Auto-scrolling promotion
A guide to set up an Auto-scrolling promotion section
Last updated
A guide to set up an Auto-scrolling promotion section
Last updated
An Auto-scrolling promotion section lets you display an eye-catching auto-scroll row of logos or images.
You will find it helpful in showcasing your promotions, brand lists, featured products, or any trust-boosting information.
Steps:
In the theme editor (Customize) > click Add section.
Locate Auto-scrolling promotion.
Make necessary changes.
Save.
See how to adjust the Container settings
See how to adjust the Color scheme settings
Desktop padding bottom: Modify the space under the Section header, controlling how much gap exists before the next section.
Content spacing: Adjust the space between the subheading, heading, and description, ensuring optimal readability and layout balance.
Use the provided text fields to add a suitable Heading, Subheading, and Description.
Leave them blank if you do not want to display them.
Change the Heading size to the desired size:
Heading - Medium
Heading - Large
Heading - Extra large
Heading - Extra extra large
Mega title - Base
You can also change the Heading color:
Leave it blank if you do not want to use the default color setting in the Color scheme.\
These settings allow you to control the alignment, scrolling behavior, and spacing of items. This ensures a smooth and engaging scrolling effect for both desktop and mobile views.
Choose how the content is aligned within the scrolling section in the Vertical alignment option:
Top – Aligns items to the top.
Middle – Centers items vertically.
Bottom – Aligns items to the bottom.
Select the scrolling Direction of items:
Left – Items scroll from right to left.
Right – Items scroll from left to right
Enable the Pause scroll on hover option to pause the scrolling animation when a user hovers over the section. This allows users to interact with items more easily.
Adjust the scrolling Speed of the section (0.1x - 3x):
Set a value (e.g., 1x) to control how fast items move.
Higher values increase speed, while lower values slow it down.
Use the Item gap (Desktop) option to control the space between items in the scrolling section on desktop screens.
Similarly, the Item Gap (Mobile) setting allows you to modify the spacing between items on mobile devices.
See how to adjust the Section padding settings
In the Auto-scrolling promotion section, you can enable the Use custom mobile padding option to specifically adjust the top and bottom padding for mobile screens.
Adjust the following values (0px - 120px):
Mobile top padding – Controls the space above the section for mobile screens.
Mobile bottom padding – Controls the space below the section for mobile screens.
There are five block types can be added to the Auto-scrolling promotion section:
Image
Testimonial
Text
Rich text
Divider
The Spacing settings in blocks of the Auto-scrolling promotion section allow you to control the left and right margins for both desktop and mobile devices. This setting is available only for the following blocks:
Image
Text
Rich Text
Divider
Note: This setting is not available for the Testimonial block.
Toggle Use custom spacing to enable margin adjustments.
Once enabled, you can customize the spacing using the provided sliders or input fields (10px - 100px).
Add an Image to promote your vendor, brand, featured products, etc.
Adjust the Image height on the desktop between 20px and 400px.
Then, provide the image with a specific Link to the desired page where you want to direct customers when they click it.
You can use a Text block to display introductory text or any content you'd like to present.
You can add custom HTML to the Text field.
Then, change the Font family to Body font/ Headings font.
Moreover, you can also change the Text size to make the content look balanced. (10px - 100px)
Provide the text with a specific Link to the desired page where you want to direct customers when they click it.
Showcase reviews from your customers in a scrolling section to increase brand trust.
You can add text, the author's name, a product, and an image/icon to each of the testimonials.
Rich text
You can use a Rich text block to display introductory text which allows formatting of the text like adding styles, links, or lists. To learn more, see Shopify's Rich Text Editor guide.
Toggle the Highlighted text color option to enable a custom color for highlighted text
Then, change the Font family to Body font/ Headings font.
Moreover, you can also change the Text size to make the content look balanced. (10px - 100px)
Divider
The Divider width option allows you to control the length of the divider (20px - 200px).
The Subheading field is only available in Zest version 9.0.0 and above.
The Testimonial block is only available in Zest version 7.1.0 and above.
The Rich text block is only available in Zest version 9.0.0 and above.
The Divider block is only available in Zest version 9.0.0 and above.
