White space

This guide describes setting up the White space section.

Use the section on a page to add blank space between sections.

​

​The previous image shows a White space section on a store's home page. The section adds blank space between the store's Header and Featured collection table sections. In the upper left, part of Theme editor's section menu is displayed. To specify a height for the section, the menu's Height option is set to 17x (multiples of theme content spacing).

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a White space section

To set up a White space section:

1. In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a White space section.

   Note

   The section can be added to any page, except Checkout and Gift card pages. To add the section to the current page, select Add section > White space. Refer to Shopify help: Add a section.

2. From the side menu, select White space.

3. Select a setting described in the following table.

Setting name	Description
Height	Adjust the Height slider to specify a height for the section. The slider ranges from 6x to 18x (multiples of your theme's content spacing). In Theme settings > Grid, use the Content spacing options to specify your theme's content spacing size. Refer to Grid.
Hide bottom border of section above	Use the Hide bottom border of section above option to show or hide a border at the bottom of the section above the White space section.
Color > Color scheme	Use the Color scheme picker to select a color scheme for the section. Refer to Colors.
Theme settings	If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSS	Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove section	Select Remove section to delete the section from the current page.

Note

To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.

To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.