Banner animation scale

The Banner Animation Scale section lets you create a bold and animated banner that scales on scroll for an eye-catching effect. It supports images and videos as background, making it perfect for showcasing a product, promotion, or collection in a visually dynamic way. You can also add a countdown timer to highlight limited-time offers or upcoming launches. This section combines strong visuals with smooth animations to create an engaging and modern storefront experience.

Adding a Section

In order to add a section, you need to go to Customizer → Add Section → Banner animation scale.

Section settings

1. Enable rounded corners - the setting allows you to add rounded corners for the container;

Colors

1. Section background - background color setting;

2. Text content background - background color for the content;

3. Enable glass effect - the setting allows you to add glass effect for the text content background;

4. Text - text color setting;

5. Link - ****setting link text color;

6. Button background - setting the background color of the button;

7. Button label - setting button label color;

8. Button border - setting the color of the button border;

9. Button background (hover) - setting the background color of the button on hover;

10. Button text (hover) - setting button label color on hover;

11. Button border (hover) - setting the button border color on hover.

12. Overlay - overlay color for media content;

13. Image border color - the color of the border that can be added to the media content;

Layout

1. Container width - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Blocks settings

Block limit - 1

The section contains three different types of blocks (banner options): Full-width and Countdown timer.

Block Wide Media

General

1. Desktop banner min height - set a minimum height for the banner on the desktop;

2. Mobile banner min height - set a minimum height for the banner on the mobile;

3. Media type - selector for choosing the type of media content to be displayed. Available types are:

   • Image - a normal image will be displayed;

   • HTML5 video - HTML5 video will be displayed;

   • Youtube/Vimeo - a video from the YouTube or Vimeo platform will be displayed.

4. Label - field for Label;

5. Heading - field for Heading;

6. Text - field for Text;

7. Button label - a field for the label content of the button;

8. Button link - the URL field for the button;

9. Button aria-label - field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;

10. Overlay opacity - overlay transparency adjustment;

11. Overlay color - setting allows you to select the color of the overlay;

12. Image desktop - choose a picture to be displayed on the Desktop;

13. Image mobile - choose a picture to be displayed on the Mobile;

14. Image border width - the setting allows you to set the size of the border;

15. Image border indent - the setting allows you to set the indent of the border;

Video

1. HTML5 Desktop Video - a field to add an HTML5 Video to be displayed on the Desktop;

2. HTML5 Mobile Video - a field to add an HTML5 Video to be displayed on the Mobile;

3. Youtube/Vimeo Desktop Video Url - a field for adding a link to YouTube or Vimeo video to be displayed on the Desktop;

4. Youtube/Vimeo Mobile Video Url - a field for adding a link to YouTube or Vimeo video to be displayed on the Mobile.

Alignment

1. Content alignment - content position selector within the block. Text can have 3 positions:

   • Left - content positioning on the left side;

   • Center - positioning content in the center;

   • Right - positioning content on the right side;

2. Content alignment mobile - content position selector within the block on the mobile. Text can have 3 positions:

   • Left - content positioning on the left side;

   • Center - positioning content in the center;

   • Right - positioning content on the right side;

3. Block alignment horizontal - block horizontal position selector. A block can have 3 positions.

   • Left - block’s positioning on the left side of the container;

   • Center - block’s positioning in the center of the container;

   • Right - block’s positioning on the right side of the container.

4. Block alignment vertical - block vertical position selector. A block can have 3 positions.

   • Top - block’s positioning on the top side of the container;

   • Center - block’s positioning in the center of the container;

   • Bottom - block’s positioning on the bottom side of the container.

Block Sale Timer

General

1. Desktop banner min height - set a minimum height for the banner on the desktop;

2. Mobile banner min height - set a minimum height for the banner on the mobile;

3. Media type - selector for choosing the type of media content to be displayed. Available types are:

   • Image - a normal image will be displayed;

   • HTML5 video - HTML5 video will be displayed;

   • Youtube/Vimeo - a video from the YouTube or Vimeo platform will be displayed;

4. Label - field for Label;

5. Heading - field for Heading;

6. Text - field for Text;

7. Button label - a field for the text content of the button;

8. Button link - the URL field for the button;

9. Button aria-label - field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;

10. Image desktop - choose a picture to be displayed on the Desktop;

11. Image mobile - choose a picture to be displayed on the Mobile;

12. Image border width - the setting allows you to set the size of the border;

13. Image border indent - the setting allows you to set the indent of the border;

Timer

1. Year - years of the end of the countdown timer;

2. Month - month of the end of the countdown timer;

3. Day - day of the end of the countdown timer;

4. Hour - hour of the end of the countdown timer;

5. Timezone - Timezone;

6. Timer cell background color - setting the background color for the time cell;

7. Timer cell color - setting the text color for the cells of the countdown.

Video

1. HTML5 Desktop Video - a field to add an HTML5 Video to be displayed on the Desktop;

2. HTML5 Mobile Video - a field to add an HTML5 Video to be displayed on the Mobile;

3. Youtube/Vimeo Desktop Video Url - a field for adding a link to YouTube or Vimeo video to be displayed on the Desktop;

4. Youtube/Vimeo Mobile Video Url - field to add a link to YouTube or Vimeo video to be displayed on the Mobile.

Alignment

1. Content alignment - content position selector within the block. Text can have 3 positions:

   • Left - content positioning on the left side;

   • Center - positioning content in the center;

   • Right - positioning content on the right side;

2. Content alignment mobile - content position selector within the block on mobile. Text can have 3 positions:

   • Left - content positioning on the left side;

   • Center - positioning content in the center;

   • Right - positioning content on the right side;

3. Block alignment horizontal - block horizontal position selector. A block can have 3 positions.

   • Left - block’s positioning on the left side of the container;

   • Center - block’s positioning in the center of the container;

   • Right - block’s positioning on the right side of the container.

4. Block alignment vertical - block vertical position selector. A block can have 3 positions.

   • Top - block’s positioning on the top side of the container;

   • Center - block’s positioning in the center of the container;

   • Bottom - block’s positioning on the bottom side of the container.

Additional Information

1. When choosing a media type, you must fill in the appropriate setting, for example, if you have selected the Image type, then below you will find the setting to upload images;

2. In cases where there are settings for different devices (Desktop and Mobile), you can fill in only one of the fields. The filled-out field will replace the empty one. For example, you can only fill in Desktop, which will be displayed in the same way for Mobile and vice versa;

3. If you set an incorrect date for the timer, the timer will not start and zero values will be displayed;

4. When the timer expires, zero values will be shown.