Home Page (22 Savile Row)
Configure the home page and hero banner features in this section. In your control panel, go to Storefront > Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Home Page'.
Carousel
| Setting |
Description |
| Show carousel slides |
Select this to toggle the hero carousel on or off. Use this article to help you choose what image sizes are best for you. |
| Show carousel arrows |
Choose to toggle the left and right arrows on or off. |
| Hero carousel dots |
Choose to toggle the indicator dots on or off. |
| Use letter box carousel |
Select this option to have a shorter, "letterbox" shape carousel. |
| Maximum carousel slide height |
Set the height of carousel slides in pixels to prioritize text and use the image as a background. Alternatively, disable this to display the full image. |
| Background color |
Select the color of the overlay on the carousel. |
| Background transparency |
Select the opacity of the overlay on the carousel.
|
| Text color |
Select the color of the text on the carousel. |
| Indicator color |
Select the border color of the empty dot at the bottom of the Carousel if there is more than one slide. |
| Indicator active color |
Select the border color of the active dot at the bottom of the Carousel if there is more than one slide. |
| Indicator background color |
Select the color of the box behind the dots below the carousel if there is more than one slide. |
| Arrow color |
Select the color of the left and right arrows if there is more than one slide. |
| Arrow background color |
Select the color of the box behind the arrows if there is more than one slide. |
The carousel functionality has been enhanced so certain features can be assigned per slide.
| Setting |
Description |
| Slide X: mobile image |
Replace image specifically for mobile devices through the Image Manager. You can set up an image to display on mobile by following these steps. |
| Slide X: sub heading |
Enter the text you'd like to appear above the slide heading. |
| Slide X: content alignment |
Choose to align the carousel content left, center or right.
|
| Slide X: custom button text |
Enter the text you'd like to appear in the custom button. |
| Slide X: custom button link |
Enter the text to link to content in your store. It should only contain the absolute path to the related content, not the protocol and hostname.
For example, if you want to link to https://www.yourstore.com/our-delivery-options/ simply enter /our-delivery-options/ in the field.
|
| Slide X: custom button secondary color |
Select if you want the color for the custom button to adopt the secondary button color, if not it will use the primary button color. |
Featured Categories
| Setting |
Description |
| Enable featured categories on the home page |
When enabled, any parent category that has an image applied to it will appear as a Featured Category on the Home page.
|
| Home page featured category columns |
Select how many featured categories display per row. |
Elfsight Instagram Feed
| Setting |
Description |
| Enable the Elfsight Instagram Feed module |
Check this to activate your Elfsight Instagram feed. Elfsight offer a highly configurable feed module that we have set up our theme to work with. They offer free and premium versions, which you can sign up for here.
|
| Elfsight App ID string |
Enter the relevant code snippet from the Elfsight control panel. Full instructions can be found here.
|
Taggbox Instagram Feed
| Setting |
Description |
| Enable the Taggbox Instagram Feed module |
Check this to activate your Taggbox Instagram feed. An alternative to the Elfsight Instagram Feed module that we have set up to work on our theme is Taggbox. They also offer free and premium versions, which you can sign up for here.
|
| Instagram title |
Enter a title you want to promote your Instagram feed. If one isn't entered the default title ("Latest Instagram Posts") will be shown instead. |
| Taggbox App ID string |
Enter the relevant code snippet from the Taggbox control panel. Full instructions can be found here.
|
Products
| Setting |
Description |
| Number of Featured Products |
Select how many featured products to display on the home page, or disable this feature.
|
| Featured Products per row |
Select how many featured products display per row.
|
| Number of Most Popular Products |
Select how many most popular products to display on the home page, or disable this feature.
|
| Most Popular Products per row |
Select how many most popular products display per row.
|
| Number of New Products |
Select how many new products to display on the home page, or disable this feature.
|
| New Products per row |
Select how many new products display per row.
|
| Product Row 1 |
Select which product carousel shows in this section, or pick None to disable this feature.
|
| Product Row 2 |
Select which product carousel shows in this section, or pick None to disable this feature.
|
| Product Row 3 |
Select which product carousel shows in this section, or pick None to disable this feature.
|
Blog Posts
| Setting |
Description |
| Number of blog posts |
Select how many blog posts to display on the home page, or disable this feature.
|
| Blog posts per row |
Select how many blog posts display per row.
|
