The Spacer: Add or Remove Space app by Convertify Apps allows you to insert blank space (or remove blank space) between any two sections OR any two blocks.
This simple app gives you the power to make every page of your site have the exact spacing you want. What's more, you can specify different spacing for desktop and mobile devices, add a background color to the blank space (to match the background color of the section/block immediately above or below the spacer), and optionally make the background span the full screen width.
This app user guide is organized into 3 sections:
- Install the 'Spacer: Add or Remove Space' app
- Add the 'Spacer' section or block to your theme
- Configure settings
1. Install the 'Spacer: Add or Remove Space' App
CLICK HERE to download the Spacer: Add or Remove Space app from the Shopify App Store. On this page, click the green 'Add app' button and then follow the prompts to add the app to your Shopify store. You'll see that our app includes a 15-day free trial before the first $2.99 monthly billing (which is processed by Shopify as part of your regular monthly Shopify subscription).
2. Add the 'Spacer' Section or Block to Your Theme
In your Shopify admin panel, navigate to the Online Store > Themes page. At the top of the page, you'll see a picture of your "live theme" (desktop version and mobile version). To launch the Theme Editor (i.e. Customizer), simply click the green 'Customize' button.
Now navigate to the page where you want to add (or remove) blank space.
To change the spacing between two sections, scroll to the very bottom of the left menu and click the blue 'Add section' button/link.
[INSERT SCREENSHOT]
Similarly, to change the spacing between two blocks within a section, click the blue 'Add block' button/link within that section.
[INSERT SCREENSHOT]
In either case, you'll notice that the menu that appears is organized into 2 parts: 1) THEME SECTIONS and 2) APPS. (Note: You may need to scroll down within the menu to see the 'APPS' sections.)
[INSERT SCREENSHOT]
Within the 'APPS' section, click the 'Spacer' item.
The 'Spacer' section (or block) has now been added to the bottom of the page template (or bottom of the section). Click on the 'move' icon to drag and drop the 'Spacer' section (or block) to be between the two sections (or two blocks) where you want to change the vertical spacing.
[INSERT GIF IMAGE]
3. Configure Settings
All settings for this app are located in Shopify Theme Editor (i.e. Customizer) as part of the 'Spacer' section (or 'Spacer' block). There are no settings in the app itself.
Once you've added the 'Spacer' section (or block) to your page template (as outlined above), click the 'Spacer' section/block title in the left menu. The following settings/options will appear:
- Blank space - desktop - Use the slider to choose how much blank space you want to show between the section/block above the 'Spacer' and the section/block below it (on desktop devices). If you want to remove space (which will cause the section/block below the 'Spacer' to be moved up and appear closer to the section/block above), select a negative number.
- Blank space - mobile - This setting is the same as the one above, except this one controls the amount of additional space (or space removed) on mobile devices.
- Background color - Use the color selector tool to choose the background color for the 'Spacer' section/block. Leave 'transparent' selected if you want the spacer to show the page's background color (or the section's background color, if the spacer is a block). The background color doesn't matter if you are removing blank space. (Note: If you choose a color and then decide you want to revert back to transparent, simply delete the color hex code - i.e. #c8c8c8 - from the field.)
- Make background full screen width - This setting only applies to the 'Spacer' section (it does not apply to the 'Spacer' block). If you tick this box, the background color will span the entire width of the visitor's screen (not just the width of the page).
Still have questions? We're here to help. Simply submit a help ticket.
Comments
0 comments
Please sign in to leave a comment.