...
This document details the configuration of the "Slider" that appears in the home page of the Mr. Teas storefront theme (and other themes).
Navigation
Panel |
---|
Main Menu → Storefronts → Pages → Click the 'Pencil' icon for the Home (page) to access the page editor → Content (tab) |
Some themes, Mr Teas for example, utilize a slider to display content on the home page.
To add or remove content from the home page slider you need to click on the Pages tab of your StoreFront as shown below.
...
In the content tab you'll see four configuration fields:
Field | Description |
---|---|
home slider | This field contains two action buttons:
|
home slider autoplay | When selected, this checkbox field will cause the slider to auto play after the page is loaded. |
home slider autoplay speed | Here you'll configure the speed in milliseconds, for example, a commonly set speed three thousand milliseconds would be configured like this: 3000ms |
home slider items | Here you configure the item or items that you want to be included in the slider. The default image configured on the item will be displayed, if only one image is configured on the item. |
Cover Mode
The goal here is a slider image that covers the entire slider area at all times no matter the size of the image uploaded. Let's put some specifics on it:
- Fills entire slider area with the image
- Scales image as needed
- Retains image proportions (aspect ratio)
- Image is centered on page
- Does not cause scrollbars
- As cross-browser compatible as possible
So for example if you have an image that is 500px x 1000px cover mode will take the max width of the image and crop the top and bottom. If the image is 1000px x 500px cover mode will take the max height and crop the left and right sides in order to center the image within the space provided. This will also happen dynamically as the browser or screen size changes.
...