Articles on: Online store
This article is also available in:

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.

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.

Slideshow section in Roller theme
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.


Slide block in Roller theme

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.

Rich Text section in Roller theme

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.

Image with Text section in Roller theme
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.


Image with Text block in Roller theme



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.

Featured collection section in Roller theme

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.

Customer testimonial section in Roller theme
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.


Testimonial block in Roller theme

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.

Collection list section in Roller theme
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.

Newsletter section in Roller theme

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.

Banner section in Roller theme

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.

Video slider section in Roller theme
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.


Video block in Roller theme
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

Updated on: 25/08/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!