The most feature-rich listing section in the theme — a tabbed, filterable product grid pulling live products from one or more real collections, with fine control over card content and an optional embedded promotional tile inside the grid.
Section settings #
- Section width: Choose from: “Page”, “Full”.
- Color scheme: Choose which color scheme (defined in Theme settings → Colors) this element uses.
- Card color scheme: Choose which color scheme (defined in Theme settings → Colors) this element uses.
- Subheading: Enter a short line of text.
- Subheading: Choose from: “H1”, “H2”, “H3”, “H4”, “H5”, “H6”.
- Heading: Enter a short line of text.
- Heading size: Choose from: “H1”, “H2”, “H3”, “H4”, “H5”, “H6”.
- Text: Enter a longer block of text (one item per line where applicable).
- Text size: Choose from: “H1”, “H2”, “H3”, “H4”, “H5”, “H6”.
- Show tab image: Switch this on to show tab image.
- Show View all button: Switch this on to show View all button.
- Button label: Enter a short line of text.
- Button style: Choose from: “Primary button”, “Secondary button”, “Outline”, “Link”.
- Show second image on hover: Switch this on to show second image on hover.
- Desktop view: Choose from: “Grid”, “Slideshow”.
- Show add to cart button: Switch this on to show add to cart button.
- Show product vendor: Switch this on to show product vendor.
- Show product rating: Switch this on to show product rating.
- Show variant swatches: Switch this on to show variant swatches.
- Enable mobile slideshow for grid view: Switch this on to enable mobile slideshow for grid view.
- Products to show: Fine-tune this value with the slider (from 2 to 50).
- Products per row on desktop: Fine-tune this value with the slider (from 2 to 6).
- Products per row on mobile: Fine-tune this value with the slider (from 1 to 3).
- Top padding: Fine-tune this value with the slider (from 0 to 100px).
- Bottom padding: Fine-tune this value with the slider (from 0 to 100px).
- Autoplay slideshow: Switch this on to enable autoplay slideshow.
- Speed (ms): Fine-tune this value with the slider (from 10 to 100).
- Show navigation: Switch this on to show navigation.
- Show scrollbar: Switch this on to show scrollbar.
- Pagination style: Choose from: “Dots”, “Progress bar”, “Numbers line”, “Circle progress”.
Collection block #
- Tab label: Enter a short line of text.
- Collection: Select a collection from your store.
- Tab image: Upload or select an image to display.
Promotion blocks #
- Promotion style: Choose from: “Style 1”, “Style 2”, “Style 3”.
- Position: Set promotion card insertion position (1 to 50) using the slider.
- Promotion width: Choose from: “1 Column”, “2 Columns”, “3 Columns”.
- Promotion height: Choose from: “1 Row”, “2 Rows”.
- Color scheme: Choose which color scheme (defined in Theme settings → Colors) this element uses.
- Custom background color: Choose custom background color (Visible when Promotion style is “Style 1”).
- Background image: Upload an image (Visible when Promotion style is “Style 2” or “Style 3”).
- Image: Upload an image.
- Badge text: Enter a short line of text (Visible when Promotion style is “Style 2”).
- Heading: Enter a short line of text.
- Highlight text: Enter the exact word from heading to highlight (Visible when Promotion style is “Style 1”).
- Heading color: Choose custom font color for heading (Visible when Promotion style is “Style 1”).
- Highlight color: Choose custom color for highlight text word (Visible when Promotion style is “Style 1”).
- Subtext: Enter a longer block of text (Visible when Promotion style is “Style 1” or “Style 3”).
- Link: Select a link or enter a custom URL.
- Button label: Enter a short line of text (Visible when Promotion style is “Style 2” or “Style 3”).
- Button style: Choose from: “Primary button”, “Secondary button”, “Outline”, “Link” (Visible when Promotion style is “Style 2” or “Style 3”).
