Set up global sections on your store
With global sections, you can add different content for specific purposes on your store. For example, you can create a contact form and immediately display it above the footer on your product page, or a countdown timer to motivate customer purchasing on the cart page. In this article, we will show you how to add and customize global sections on your store.
A. Add global section to your store
B. Customize content settings
C. Customize a design settings
Global sections are only available on Inside themes (version 2.0), and Roller themes (version 3.0). You can refer to this article on how to upgrade your theme.
From your ShopBase admin site, go to Online store > Themes and click on Customize of the theme you want to edit.
Select the page you wish to customize in the dropdown menu.
You can add Global sections to the following pages: Home page, Product page, Collection list page, Collection detail page, Cart page, Blog page, Blog post page, and other pages that are created from Online store > Pages.
Navigate to and click on Add section.
Then, you will see 2 tabs: Theme sections (contains list of basic sections of your theme), and Global sections (contains list of sections for specific theme customization purposes). Click on Global sections tab and select the section you want to add to your page.
You cannot add global sections that contain products (For example: a Featured Product global section, a Product + Image global section) to a Product page.
After adding a global section to your store, follow the steps in section B and C of this article to freely edit the Content and Design of each global section. Each global section are also divided into different blocks for further customization. You can customize the Content and Design of each block as well.
Content Settings allows you to edit content displayed in the section, such as text, button name, video, etc.
Uncheck Visible on mobile if you only want a section to be visible on desktop devices and not mobile devices.
Design settings allows you to edit visual elements displayed on your page. For example, if a section contains text, buttons, links, images, etc., you can edit the visuals of each section independently and separately without affecting any other elements on the page.
You can edit the following elements of a section's visuals:
There are 3 types of background:
Custom: Solid color background. You can freely select the color.
Gradient: Gradient background. You can set the gradient to go from left to right, top to bottom, or top left to bottom right.
Image: Image background.
Elements from text (heading, title, body) to image, button, link can all be edited separately. The basic settings include color, font, size and alignment. In some cases, buttons and images will have additional roundness settings for you to adjust the corner radius.
Dividers can be used to separate sections, making it easier to keep track of information. You can add dividers and change their colors and sizes upon your wish.
In here, you can customize the overall layout of your landing page section.
In Min height, you can customize the minimum height of the section. Select Default so that the most suitable height will be automatically applied for the section, or Screen so that the height will be adjusted to match the display screen.
In Max width, you can customize the maximum width of the section. Select Default so that the most suitable width will be automatically applied for the section, or Custom and enter your desired width, or None to display the width of the section at the exact size of your content. In some sections, you can also select Full to expand the display area of the content to the full screen.
Overview of Themes
In this article
A. Add global section to your store
B. Customize content settings
C. Customize a design settings
A. Add global section to your store
Global sections are only available on Inside themes (version 2.0), and Roller themes (version 3.0). You can refer to this article on how to upgrade your theme.
From your ShopBase admin site, go to Online store > Themes and click on Customize of the theme you want to edit.
Select the page you wish to customize in the dropdown menu.
You can add Global sections to the following pages: Home page, Product page, Collection list page, Collection detail page, Cart page, Blog page, Blog post page, and other pages that are created from Online store > Pages.
Navigate to and click on Add section.
Then, you will see 2 tabs: Theme sections (contains list of basic sections of your theme), and Global sections (contains list of sections for specific theme customization purposes). Click on Global sections tab and select the section you want to add to your page.
You cannot add global sections that contain products (For example: a Featured Product global section, a Product + Image global section) to a Product page.
After adding a global section to your store, follow the steps in section B and C of this article to freely edit the Content and Design of each global section. Each global section are also divided into different blocks for further customization. You can customize the Content and Design of each block as well.
B. Customize content settings
Content Settings allows you to edit content displayed in the section, such as text, button name, video, etc.
Uncheck Visible on mobile if you only want a section to be visible on desktop devices and not mobile devices.
C. Customize a design settings
Design settings allows you to edit visual elements displayed on your page. For example, if a section contains text, buttons, links, images, etc., you can edit the visuals of each section independently and separately without affecting any other elements on the page.
You can edit the following elements of a section's visuals:
1. Background
There are 3 types of background:
Custom: Solid color background. You can freely select the color.
Gradient: Gradient background. You can set the gradient to go from left to right, top to bottom, or top left to bottom right.
Image: Image background.
2. Detailed settings
Elements from text (heading, title, body) to image, button, link can all be edited separately. The basic settings include color, font, size and alignment. In some cases, buttons and images will have additional roundness settings for you to adjust the corner radius.
3. Separator
Dividers can be used to separate sections, making it easier to keep track of information. You can add dividers and change their colors and sizes upon your wish.
4. Layout
In here, you can customize the overall layout of your landing page section.
In Min height, you can customize the minimum height of the section. Select Default so that the most suitable height will be automatically applied for the section, or Screen so that the height will be adjusted to match the display screen.
In Max width, you can customize the maximum width of the section. Select Default so that the most suitable width will be automatically applied for the section, or Custom and enter your desired width, or None to display the width of the section at the exact size of your content. In some sections, you can also select Full to expand the display area of the content to the full screen.
Related articles
Overview of Themes
Updated on: 24/08/2022
Thank you!