Customize Roller theme: Home page sections
With ShopBase Themes, you can customize home page sections to create a glamorous website in just a few steps. In this article, we will guide you on how to adjust your home page for Roller theme.
A. Header
B. Slideshow
C. Rich text
D. Image with text
E. Featured collection
F. Customer testimonial
G. Collection list
H. Newsletter
I. Banner
J. Video slider
To customize all of the features of Roller theme for home page sections, please follow these steps before you start:
From your ShopBase admin site, go to Online Store > Themes > Customize.
Choose Home section in the dropdown menu.
Please refer to this article on how to customize your Header sections.
In Slideshow section:
Text animation: Choose which animation style for loading the slide's text: None, Fade In, Fade Up or Fade Down.
Gallery transition: Display slide transition in 2 ways: fade (faster moment) and slide.
Ratio: Change the ratio of your images.
Change slides every: Set the time for changing slides.
Opacity: Adjust the opacity of images.
You can add different Slide blocks into the Slideshow section. Each Slide block allows you to add background image, alt text, preheading, heading, subheading, or adjust text alignment and text position. You can also enable text background or insert links for first/primary button label.
The Rich Text section is where to share introduction or announcements to impress your customers. For Roller theme, you can:
Heading: Add a heading to introduce your business.
Text: Add detailed information.
Text alignment: Align the position of the text.
Link label: Add label of the link to a targeted page.
Link: Insert link to the targeted page.
This section will show off any big or important images you have along with any applicable text and a call to action button. In this section, you can:
Choose the layout.
Images per row: Choose how many promotions to show per row. Choose from 2 to 4.
Animation: Select animation style for your texts displaying on images as you hover into each image.
You can add different Image with Text blocks into this section. The Image with Text block allows you to configure each image with text by adding images, alt text, headline, text, button labels/links/buttons. You can enable a maximum of 12 blocks on your homepage.
You can feature the products from one of your collections on your home page.
Heading: Change to another heading instead of the default featured collection.
Collection: Choose one of yours to show.
Collection layout: Set the layout to your featured collection like Grid, Slider or Mix.
Product per row: Decide how many products to display. Choose from 2 to 5.
Limit products: Decide the number of products showing. Choose from 1 to 60.
Button label: Enable the view more button and edit its name.
The Roller theme include a Testimonials homepage section which is a quick and easy way to add customer feedback and reviews to your site. You can add image, alt text, testimonial, customer information.
Testimonial title/Heading section: Enter title for your testimonial.
Text animation: Choose which animation style for loading the testimonial slide's text. You can choose from: None, Fade In, Fade Up or Fade Down.
Change slides every: Adjust the number of seconds it takes to change slides within your testimonials. Choose from 4 - 12 seconds.
You can add different Testimonial blocks into this section. These block allows you to configure each customer testimonial by adding images, alt texts, editing the testimonial content and customer's name.
You can add heading to your collection list. For Inside theme, there are more settings for you to customize such as layout, image styles, item per row, title position, title alignment and button label.
You can add different Collection blocks into this section. These block allows you to create collection, add image and alt text for your collection.
Newsletter section helps to encourage your customers to stay in the loop with your company, adding the signup as a whole homepage section may better suit your design and is just a great alternative to have. By default, after a customer signs up for your newsletter, their email address are stored in your customer database. You can add image, adjust heading and subheading.
This feature can be used to introduce your store promotion codes. You can freely customize the banner's background image, alt text, ratio, opacity, heading, text position and alignment, image link, along with button links and labels.
The Video section can be very helpful for customers to see how your product appears and works in real life. It includes many features for setting up the presence of videos on your site such as image, alt text, preheading, heading, subheading, etc...
Autoplay video: If this option is selected, your video will play automatically. However, most of browsers have added some limitations on videos to prevent them from autoplaying. In addition, when you choose this option, all of the content settings including image/thumbnail, heading, preheading, subheading, buttons, button links will not be displayed.
You can add different Video blocks into this section. These block allows you to configure each video by adding video links, images, alt texts, preheading, heading, subheading, text position and alignment, along with button labels and links.
For Bassy theme, please refer to this article for more information.
For Inside theme, please refer to this article for more information.
All steps in this article uses the updated Theme Editor version 2.0, which have been updated to boost versatility and make it easier to tailor your storefront with sections and blocks. Please refer to this article for more information on Theme Editor version 2.0 and how to update.
Overview of Themes
In this article
A. Header
B. Slideshow
C. Rich text
D. Image with text
E. Featured collection
F. Customer testimonial
G. Collection list
H. Newsletter
I. Banner
J. Video slider
To customize all of the features of Roller theme for home page sections, please follow these steps before you start:
From your ShopBase admin site, go to Online Store > Themes > Customize.
Choose Home section in the dropdown menu.
A. Header
Please refer to this article on how to customize your Header sections.
B. Slideshow
In Slideshow section:
Text animation: Choose which animation style for loading the slide's text: None, Fade In, Fade Up or Fade Down.
Gallery transition: Display slide transition in 2 ways: fade (faster moment) and slide.
Ratio: Change the ratio of your images.
Change slides every: Set the time for changing slides.
Opacity: Adjust the opacity of images.
You can add different Slide blocks into the Slideshow section. Each Slide block allows you to add background image, alt text, preheading, heading, subheading, or adjust text alignment and text position. You can also enable text background or insert links for first/primary button label.
C. Rich text
The Rich Text section is where to share introduction or announcements to impress your customers. For Roller theme, you can:
Heading: Add a heading to introduce your business.
Text: Add detailed information.
Text alignment: Align the position of the text.
Link label: Add label of the link to a targeted page.
Link: Insert link to the targeted page.
D. Image with Text
This section will show off any big or important images you have along with any applicable text and a call to action button. In this section, you can:
Choose the layout.
Images per row: Choose how many promotions to show per row. Choose from 2 to 4.
Animation: Select animation style for your texts displaying on images as you hover into each image.
You can add different Image with Text blocks into this section. The Image with Text block allows you to configure each image with text by adding images, alt text, headline, text, button labels/links/buttons. You can enable a maximum of 12 blocks on your homepage.
E. Featured collection
You can feature the products from one of your collections on your home page.
Heading: Change to another heading instead of the default featured collection.
Collection: Choose one of yours to show.
Collection layout: Set the layout to your featured collection like Grid, Slider or Mix.
Product per row: Decide how many products to display. Choose from 2 to 5.
Limit products: Decide the number of products showing. Choose from 1 to 60.
Button label: Enable the view more button and edit its name.
F. Customer testimonial
The Roller theme include a Testimonials homepage section which is a quick and easy way to add customer feedback and reviews to your site. You can add image, alt text, testimonial, customer information.
Testimonial title/Heading section: Enter title for your testimonial.
Text animation: Choose which animation style for loading the testimonial slide's text. You can choose from: None, Fade In, Fade Up or Fade Down.
Change slides every: Adjust the number of seconds it takes to change slides within your testimonials. Choose from 4 - 12 seconds.
You can add different Testimonial blocks into this section. These block allows you to configure each customer testimonial by adding images, alt texts, editing the testimonial content and customer's name.
G. Collection list
You can add heading to your collection list. For Inside theme, there are more settings for you to customize such as layout, image styles, item per row, title position, title alignment and button label.
You can add different Collection blocks into this section. These block allows you to create collection, add image and alt text for your collection.
H. Newsletter
Newsletter section helps to encourage your customers to stay in the loop with your company, adding the signup as a whole homepage section may better suit your design and is just a great alternative to have. By default, after a customer signs up for your newsletter, their email address are stored in your customer database. You can add image, adjust heading and subheading.
I. Banner
This feature can be used to introduce your store promotion codes. You can freely customize the banner's background image, alt text, ratio, opacity, heading, text position and alignment, image link, along with button links and labels.
J. Video slider
The Video section can be very helpful for customers to see how your product appears and works in real life. It includes many features for setting up the presence of videos on your site such as image, alt text, preheading, heading, subheading, etc...
Autoplay video: If this option is selected, your video will play automatically. However, most of browsers have added some limitations on videos to prevent them from autoplaying. In addition, when you choose this option, all of the content settings including image/thumbnail, heading, preheading, subheading, buttons, button links will not be displayed.
You can add different Video blocks into this section. These block allows you to configure each video by adding video links, images, alt texts, preheading, heading, subheading, text position and alignment, along with button labels and links.
For Bassy theme, please refer to this article for more information.
For Inside theme, please refer to this article for more information.
All steps in this article uses the updated Theme Editor version 2.0, which have been updated to boost versatility and make it easier to tailor your storefront with sections and blocks. Please refer to this article for more information on Theme Editor version 2.0 and how to update.
Related articles
Overview of Themes
Updated on: 25/08/2022
Thank you!