FluentCart Add-on Docs

Appearance

Elementor ​

Place the gallery in an Elementor product template or page with Elementor's Shortcode widget.

First, check whether you need this at all. If your Elementor 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 widgetElements panel → 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 widget ​

  1. Open the template or page in Elementor. For a template that every product uses, that's usually Templates → Theme Builder → Single in Elementor Pro, set to display on your FluentCart products.
  2. If the template has FluentCart's own gallery in it, delete that element first.
  3. In the Elements panel on the left, search for Shortcode and drag the widget to where the gallery should go. That's usually the left column next to the product title and price.
  4. Paste [smart_product_gallery] into the widget's Enter your shortcode box.
  5. Click Publish or Update.

Elementor's editor may show the shortcode as a plain box rather than a live gallery. The real gallery appears on the front end.

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

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 EditorDiviBricksOxygen