Spacer

Add empty space between two sections, and choose whether it shows on desktop, tablet and mobile.

---

The Spacer section adds a gap between two sections. Use it when you want more room between sections than their own padding settings give you, or when you want extra space on one device only.

The spacer is transparent, so it shows your page's background.

1. Our guide to set up a Spacer section:

Steps:

• In the theme editor, click Add section.

• Locate Spacer.

• Drag it between the two sections you want to separate.

• Click Save.

2. Section settings

• Visibility

  • Show on desktop: Shows the space on screens 990px wide and above.

  • Show on tablet: Shows the space on screens 750–989px wide.

  • Show on mobile: Shows the space on screens below 750px wide.

• Section padding

  • Top padding and Bottom padding: 0–100px. The height of the spacer is the two added together. On tablet and mobile, the spacer is 75% of that height.

3. Tips

• Before adding a spacer, try raising the Top padding or Bottom padding of the sections around it. Use a spacer when that isn't enough.

• Turn off Show on mobile to add breathing room on desktop without making mobile pages longer.

• Set both paddings to 0 to hide the spacer everywhere without deleting it.