Success
Grid interface settings
Control default grid layouts and let customers adjust the view when it suits their browsing style.
Use these settings to control how grid-based pages feel to browse. You can set the default layout for larger screens and mobile, then decide whether customers see a built-in interface to switch grid sizes themselves. For a broader overview of how theme settings are organized, see Shopify documentation on the theme editor
This settings group is most useful on pages where customers scan multiple items in a grid. A good setup gives you a strong default while still leaving room for different browsing preferences.
Default grid layout
Section titled “Default grid layout”Your desktop and mobile grid size choices set the starting view when a grid first appears. A denser layout shows more items at once, while a roomier layout gives each card more space for images, titles, pricing, and other details.
On larger screens, a tighter grid can work well when cards are visually simple and customers are likely to compare many items quickly. A more spacious desktop grid is usually easier to browse when cards include longer names, badges, swatches, or other supporting information.
Mobile deserves its own decision. A single-column layout gives each item more visual focus and can improve readability, while a two-column layout helps customers scan faster with less scrolling.
Pick your default based on the amount of content inside each card, not just the number of items you want visible. If cards carry several labels or longer text, a denser grid can feel crowded very quickly.
Grid size controls
Section titled “Grid size controls”When the grid size interface is enabled, customers can switch to a layout that suits their own browsing style. This is helpful when some visitors want to scan as many items as possible, while others prefer larger cards that are easier to read.
If you want a more curated presentation, you can leave the interface off and rely on the defaults you set. If flexibility matters more, turning the control on gives customers a simple way to adjust the view without changing the underlying content.
For more detail on how this interface works across supported grids, see Grid interface settings. For related theme setup guidance, see Shopify documentation on sections and blocks
Sticky controls
Section titled “Sticky controls”The sticky interface keeps these controls available near the top of the page while customers scroll. This can make the browsing experience smoother on longer grid pages, since people do not need to return to the top just to change the layout.
Sticky controls are most useful when grids are long and layout changes are likely after scrolling begins. On shorter pages, or on layouts that already keep several controls visible, a sticky interface may feel unnecessary.
Usage notes
Section titled “Usage notes”- Start with card content. Choose grid density based on how much text and supporting detail each card needs to display clearly.
- Tune mobile separately. Set the mobile default for small-screen readability rather than mirroring the desktop preference.
- Review both viewports. Desktop and mobile controls can affect layout, alignment, visibility, and media display differently, so check each screen size before publishing.
- Watch for preview differences. The editor preview can make a grid available before live content exists, so confirm the final result with real content where possible.
- Expect slider behavior to change. If the grid is presented as a slider-style layout, navigation, pagination, preview, and breakpoint behavior may differ from a static grid or stacked layout.
- Keep fallback styling intact. Leave blank or default-style values when you want the surrounding area to keep its built-in look; use explicit colors, gradients, or media overrides only when you want the grid area to stand out more.