Skip to main content
Grid settings define the space between cards in every grid the theme renders: collection and search results, featured products, collection lists and blog grids. Tight gaps make grids feel dense and image-led; wider gaps give each card room to breathe. Desktop and mobile values are set separately, so you can keep phones compact while opening up larger screens.

​
What these settings control

  • Horizontal space between cards in a row on desktop and on mobile
  • Vertical space between rows of cards on desktop and on mobile
  • The gap between slides in product sliders, which reuse the column gap so a slider and a grid line up

​
How to access

1

Open the Theme Customizer

From your Shopify admin, go to Online Store, then Themes, and select Customize.
2

Open Theme settings

Select the Theme settings icon at the bottom of the left sidebar.
3

Select Grid

Expand the Grid group to see the Desktop and Mobile settings.
Grid group in the Theme settings sidebar

​
Settings

​
Desktop

Column gap (desktop): Horizontal space between cards on screens wider than a tablet, from 0 to 60 pixels in steps of 2. Default: 16 pixels. Product sliders in sections such as Featured products use the same value between slides, so a slider and a grid on the same page share one rhythm. Row gap (desktop): Vertical space between rows, from 0 to 60 pixels in steps of 2. Default: 24 pixels. A row gap slightly larger than the column gap, as in the defaults, helps the eye read rows rather than columns.

​
Mobile

Column gap (mobile): Horizontal space between cards on phones, from 0 to 40 pixels in steps of 2. Default: 8 pixels. With two columns on a narrow screen, every pixel of gap comes out of card width, so mobile gaps are intentionally smaller. Row gap (mobile): Vertical space between rows on phones, from 0 to 40 pixels in steps of 2. Default: 16 pixels.
Setting both gaps to 0 together with the card border in Cards produces a continuous grid where cards share borders, a common look for fashion and lifestyle stores.
The number of columns is not a theme setting. Each section that renders a grid, such as the Collection Page (PLP) or Featured products, sets its own column count.

​
Best practices

  • Keep desktop gaps between 12 and 24 pixels: This range separates cards clearly without wasting width when a collection uses four or five columns.
  • Halve the gap on mobile: A mobile column gap around half the desktop value keeps two-column product images large enough to judge.
  • Consider the card border: With Show a border on cards enabled, small gaps read as a tidy lattice; large gaps make bordered cards float as separate tiles.
  • Match row gap to card text: Cards with vendor, swatches and tags below the image need a larger row gap so the info of one row does not crowd the next row’s images.
  • Check sliders as well as grids: The desktop column gap also spaces product sliders, so preview a Featured products section after changing it.