Spacing

When customizing a new theme, we recommend starting with customizing these global spacing settings before you make granular tweaks to individual settings in order to minimize setup work.

Spacing scale size

This setting determines the overall spacing size and sizing of elements. This can be a quick way to create looser or tighter spacing across the theme without tweaking individual settings.

Vertical and horizontal grid gap

This setting controls the spacing between groups of similiar items, such as within a product grid, testimonials, blog posts, etc. This can be controlled at a desktop and mobile level.

Section gap

This setting controls the spacing between elements within a section, such as the distance between a section header and the content. This can be controlled at a desktop and mobile level.

Section padding

This setting controls the spacing at the start and end of each section. Most sections allow you to override this at a section level, so set an appropriate default first before you make any customizations This can be controlled at a desktop and mobile level.

Diagram of the grid gap, section gap and section padding settings described above