FluentCart Add-on Docs

Appearance

Bricks ​

Swap FluentCart's Product Gallery element for a Shortcode element in your Bricks single-product template.

First, check whether you need this at all. If your Bricks product template includes the product's main content (a Post Content element or similar), FluentCart builds the product area. Smart Product Gallery then appears there automatically, with nothing to add. Use the steps below when the gallery doesn't show: your template uses FluentCart's own gallery element, or you've laid the product area out by hand.

You can do this in 3 steps

  1. Style the galleryFluentCart → Product Gallery. Once, for every product.
  2. Copy the shortcodeAdvanced → Advanced Controls.
  3. Add a Shortcode elementElements → Shortcode, then paste.

Step 1: Style the gallery ​

The builder only places the gallery. Its look (layout, zoom, arrows, colors) comes from the settings page and is shared by every product.

  1. Go to FluentCart → Product Gallery.
  2. Choose a layout and adjust what you like. Quick Start →
  3. Click Save Settings.

Step 2: Copy the shortcode ​

A shortcode is a short tag in square brackets that WordPress swaps for real content when the page loads. Smart Product Gallery's is:

[smart_product_gallery]

You can type it, or copy it from the plugin. Open Advanced → Advanced Controls and click the Shortcode field. You'll see "Copy successfully" when it's on your clipboard.

Advanced → Advanced Controls, the read-only Shortcode field with its help text

Which product does it show?

In a single-product template, leave the shortcode as it is. It shows the gallery of whichever product is being viewed. On an ordinary page (a landing page, say), name the product: [smart_product_gallery product_id="123"]. You'll find the ID in the address bar when you edit the product in FluentCart.

Step 3: Add a Shortcode element ​

FluentCart adds its own elements to Bricks, including one called Product Gallery. That one shows FluentCart's original gallery, and Smart Product Gallery can't take it over, so you swap it.

  1. Open your single-product template in Bricks (Bricks → Templates, the template set to show on FluentCart products).
  2. Select FluentCart's Product Gallery element and delete it.
  3. Click + to open the Elements panel, search for Shortcode, and drag it into the same spot.
  4. Paste [smart_product_gallery] into its Shortcode field. Bricks renders shortcodes in the canvas, so you should see the gallery straight away.
  5. Click Save.

Save or publish the template, then open a product in a private browser window to check it.

Two elements called "Product Gallery"

The Product Gallery element in Bricks' panel belongs to FluentCart, not to Smart Product Gallery. Smart Product Gallery has no Bricks element of its own. The Shortcode element is the way in.

Troubleshooting ​

Two galleries show on the product page. The template still has FluentCart's gallery, or a Post Content element that already brings the gallery in automatically. Remove the extra one.

"Please provide a valid product ID." The shortcode can't tell which product to show. That happens on pages that aren't product pages. Add product_id="…" with the product's ID.

The gallery shows but looks unstyled, or doesn't slide. Clear any caching or optimization plugin's cache, then reload. If you use a "delay JavaScript" or "combine scripts" option, exclude the gallery's scripts (Swiper and the plugin's gallery.js) from it.

My change in the settings didn't show up. Press Save Settings on the settings page, then refresh the product page. The builder's own preview may not reflect gallery settings until you reload it.

Other editors and builders ​

Block EditorElementorDiviOxygen