Product Grid

Layout, content and available controls for Product Grid.

Scale Theme · v1.9.3 · 3 min read

Where to find it

Add this section from the theme editor on a supported template.

Usage notes

Replaces the default Dawn-style collection page. All product card, filter, sort, and padding controls live inside this single section.

Add a "collection-hidden" tag to the products you want to hide from the list.

Adjust custom badge colors in Theme settings > Product cards.

App mode requires a product reviews app that writes a reviews.rating metafield (Judge.me, Loox, Stamped, etc.).

Mobile filters always use the drawer. Desktop filters can use a compact collapsible bar or a sidebar.

If you want to display swatches on additional (normal) filters, type their name below. For these filters, colors are defined in Theme settings > Color swatches > Predefined custom colors.

These are the pills that appear after you select a filter.

Drawer slides in from the right edge.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
Accent textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Toolbar and filter backgroundConditional: Choose a local color when the relevant custom source is enabled.
Products per pageConditional: Adjust within the range offered by the theme editor.
Enable infinite scroll: Enable or disable this option and preview the result.
Number of columns on desktop: Adjust within the range offered by the theme editor.
Make all cards same height: Enable or disable this option and preview the result.
Horizontal gap: Adjust within the range offered by the theme editor.
Vertical gap: Adjust within the range offered by the theme editor.
Number of columns on mobile: Choose the presentation or source that fits this component.Options: 1 column · 2 columns
Image ratio: Choose the presentation or source that fits this component.Options: Adapt to image · Square (1:1) · Portrait (3:4) · Landscape (4:3)
Image fit: Choose the presentation or source that fits this component.Options: Fill card · Show full image
Image focal position: Choose the presentation or source that fits this component.Options: Center · Top · Bottom · Left · Right
Image inner spacingConditional: Adjust within the range offered by the theme editor.
Use premium minimal card layout: Enable or disable this option and preview the result.
Catalog card layout: Enable or disable this option and preview the result.
Custom badge label: Edit the text shown by this component.
Category label (optional): Edit the text shown by this component.
Show numeric rating: Enable or disable this option and preview the result.
Show second image on hoverConditional: Hides automatically when the image slider is enabled below.
Enable image slider with dots: When a product has multiple images, shows them as a swipeable slider with dot indicators.
Dots positionConditional: Choose the presentation or source that fits this component.Options: Overlay on image (bottom) · Below image
Dots visibilityConditional: Choose the presentation or source that fits this component.Options: Always visible · Desktop: hover only · Mobile: always
Max slides per cardConditional: Adjust within the range offered by the theme editor.
Card corner radius: Adjust within the range offered by the theme editor.
Sale badge style: Choose the presentation or source that fits this component.Options: Regular sale · SAVE $XX (amount) · -XX% (percentage) · Hidden
Save badge positionConditional: Choose the presentation or source that fits this component.Options: Top right · Top left · Bottom right · Bottom left
Save badge color: Choose the presentation or source that fits this component.Options: Default · Custom
Save badge backgroundConditional: Choose a local color when the relevant custom source is enabled.
Save badge textConditional: Choose a local color when the relevant custom source is enabled.
Show vendor: Enable or disable this option and preview the result.
Show product rating: Enable or disable this option and preview the result.
Show product description: Enable or disable this option and preview the result.
Star colorConditional: Choose a local color when the relevant custom source is enabled.
Rating sourceConditional: App mode reads product.metafields.reviews.rating.value. Static mode shows the same fixed rating on every card.Options: Product reviews app (metafield) · Static (fixed value)
Static rating valueConditional: Adjust within the range offered by the theme editor.
Static rating captionConditional: For example, Demo rating when showing sample data.
Card action style: Choose the presentation or source that fits this component.Options: Existing card colors · Tertiary
Title weight: Adjust within the range offered by the theme editor.
Price weight: Adjust within the range offered by the theme editor.
Compare price weight: Adjust within the range offered by the theme editor.
Rating weightConditional: Adjust within the range offered by the theme editor.
Save badge weightConditional: Adjust within the range offered by the theme editor.
View button weightConditional: Adjust within the range offered by the theme editor.
Show hover image button: Enable or disable this option and preview the result.
Hover button labelConditional: Edit the text shown by this component.
Custom hover button linkConditional: Leave blank to open each product's own page.
Show hover button on touch devicesConditional: Enable or disable this option and preview the result.
Hover button styleConditional: Choose the presentation or source that fits this component.Options: Light · Dark · Accent · Custom
Hover button backgroundConditional: Choose a local color when the relevant custom source is enabled.
Hover button textConditional: Choose a local color when the relevant custom source is enabled.
Hover button hover backgroundConditional: Choose a local color when the relevant custom source is enabled.
Enable quick add button: Enable or disable this option and preview the result.
Quick add button behaviorConditional: Choose the presentation or source that fits this component.Options: Add to cart · Open details popup
Option name to display swatches on: Name of the variant option (for example Color) that the color swatches will be based on. Configure colors in Theme settings > Color swatches.
Swatches position: Choose the presentation or source that fits this component.Options: Hidden · Top of card information · Bottom of card information
Desktop swatch sizeConditional: Adjust within the range offered by the theme editor.
Mobile swatch sizeConditional: Adjust within the range offered by the theme editor.
Enable filtering: Customize filters with the Search & Discovery app in the Shopify admin.
Desktop filter layoutConditional: Choose the presentation or source that fits this component.Options: Compact filter dropdowns · Sidebar
Sidebar corner radiusConditional: Adjust within the range offered by the theme editor.
Additional filters to display swatches onConditional: Comma-separated names of filters, e.g. Color, Finish.
Swatch corner radiusConditional: Adjust within the range offered by the theme editor.
Filters to display pills onConditional: Comma-separated names of filters to render as pill buttons instead of checkboxes, e.g. Size, Material.
Color schemeConditional: Choose an available Shopify color scheme.
Selected prices positionConditional: Choose the presentation or source that fits this component.Options: Top · Bottom
Input styleConditional: Global button styling is managed in Theme settings > Buttons.Options: Solid · Outline
Outline thicknessConditional: Adjust within the range offered by the theme editor.
Text templateConditional: Use [filter] for the filter name and [value] for the selected value. Example: [filter]: [value] → Color: Black
Text colorConditional: Choose a local color when the relevant custom source is enabled.
Background typeConditional: Choose the presentation or source that fits this component.Options: Low opacity color · Solid color · None
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Background opacityConditional: Adjust within the range offered by the theme editor.
Border thicknessConditional: Adjust within the range offered by the theme editor.
Border colorConditional: Choose a local color when the relevant custom source is enabled.
Border opacityConditional: Adjust within the range offered by the theme editor.
Drawer widthConditional: Percentage of the viewport width. 88% means 12% is left uncovered on the left side.
Drawer open styleConditional: Choose the presentation or source that fits this component.Options: Collapse · Slide
Open rows by defaultConditional: Choose the presentation or source that fits this component.Options: None · First · All
Items separator opacityConditional: Adjust within the range offered by the theme editor.
Display sticky open buttonConditional: Choose the presentation or source that fits this component.Options: Disabled · Always · After scrolling past the main button
Sticky button DNA styleConditional: Global button styling is managed in Theme settings > Buttons.Options: Primary · Secondary · Tertiary
Sticky button color schemeConditional: Choose an available Shopify color scheme.
Sticky button corner radiusConditional: Adjust within the range offered by the theme editor.
Button labelConditional: Edit the text shown by this component.
Button styleConditional: Primary, Secondary and Tertiary inherit from Theme Settings > Buttons. Custom lets you override everything for this section only.Options: Primary · Secondary · Tertiary · Custom (per-section)
Background colorConditional: Choose a local color when the relevant custom source is enabled.
Text colorConditional: Choose a local color when the relevant custom source is enabled.
Border colorConditional: Choose a local color when the relevant custom source is enabled.
Border widthConditional: Adjust within the range offered by the theme editor.
Border radiusConditional: Adjust within the range offered by the theme editor.
Enable sorting: Enable or disable this option and preview the result.
Color schemeConditional: Choose an available Shopify color scheme.
Top padding: Adjust within the range offered by the theme editor.
Bottom padding: Adjust within the range offered by the theme editor.