FluentCart Add-on Docs

Appearance

Hierarchy Grid ​

One large lead image across the full width of the gallery, with the rest of your photos in a grid below it. The main shot gets the spotlight; the details follow.

Hierarchy Grid is a grid with a clear first image. Your featured photo spans the whole width, then the remaining photos fill a grid of columns underneath — two by default. Like every grid layout, nothing slides and every photo is visible.

The free plugin doesn't include this layout; it ships Thumbs Bottom and Thumbs Top.

Front-end product page, gallery column and summary, one full-width lead image with a two-column grid below

When to choose it ​

  • You have one hero shot and several detail shots. The lead image sells the product; the grid answers "what does the sole look like?"
  • You like the openness of a grid but want an obvious starting point. Plain Tiles treats every photo the same. Hierarchy Grid tells shoppers where to look first.

How to switch to it ​

  1. Go to FluentCart → Product Gallery → General.
  2. Under Gallery Layout, click Hierarchy Grid.
  3. Click Save Settings.

Settings that appear for this layout ​

On the General tab:

  • Columns — how many columns the grid below the lead image uses, per device (defaults 2 / 2 / 2 / 1). See Grid options.
  • Visible Gallery Items, Number of Items and Gallery Expansion — show only the first few photos and reveal the rest with a button or a scroll. See Grid options.
  • Gallery Image Space — gaps between images. See Grid options.
  • Gallery Bottom Gap, Gallery Image Caption and Gallery Image Source. See Gallery image.

On the Gallery tab: Product Image, plus Show More Button when Visible Gallery Items is Specific.

Sub-tabs hidden for this layout ​

  • Gallery Slider, Navigation & Pagination and Thumbnails Navigation.

Things worth knowing ​

  • The lead image is always the first photo — the product's featured image in FluentCart. To change which photo leads, change the featured image on the product.
  • It adapts to smaller screens. Below about 990px wide the grid drops to two columns with the lead image still full width; on phones (below about 520px) everything stacks in a single column.
  • The product summary stays in view beside the gallery on screens wider than about 770px.

Other layouts ​

Thumbs Bottom Thumbs Left Tiles Modern Grid Anchor Nav Vertical Scroll Thumbs Right Thumbs Top Multi-row Thumbs Slider