Scrolling promotion
A guide to set up an auto-scroll section
Last updated
A guide to set up an auto-scroll section
Last updated
A scrolling promotion section lets you display an eye-catching auto-scroll row of texts or images without any extra custom code. You will find it is really helpful in showcasing your promotion, brand lists, featured products, or any information.
In this article, we will show you how to add and customize a scrolling promotion section.
Steps:
In the theme editor (Customize), click Add section.
Select Scrolling promotion.
Make necessary changes.
Save the settings.
With section settings, you can control the direction of the auto-scroll (Left/Right), its speed, and the gap between items. To create a mobile-friendly storefront, this section lets you adjust the item gap overall (on both desktop and mobile view) or respectively.
The auto-scrolling speed can be set between 2s and 60s. The smaller the value, the faster the speed.
The color settings are for you to choose the section's background color and text color (For announcement blocks with text added.
Select the colors you like using the color palette or add a color code.
In a scrolling promotion section, there are 3 kinds of blocks:
Image block: to add image and image link.
Announcement block: to add text/icon and link.
Testimonial block: to add text, product link, image, and icon.
Select your image and adjust its height (between 0px and 200px).
This block lets you display text and/ or add an SVG icon to the scroll.
To add an SVG icon, add this custom code and insert the image link (from your Shopify files).
For example:
Select a page from your Shopify or add an external link to your image/announcement block to direct visitors to your desired destination.
If you are linking your button to an external site, you need to include the full URL of that page, including the URL's HTTPS protocol.
This block lets you feature quotes from customers.
Use the provided text fields to add a suitable Text/Author's name.
Leave any of them blank if you do not want to display them.
To show the product link on the Testimonial block
> click Select product to add the chosen products.
Click Select image to choose the image for the author or product.
Click Icon to select the number of stars or quote icons for the block (None/Quote/1 star/2 stars/3 stars/ 4 stars/5 stars).
Select None if you do not want to display them.
For example:
Pro tip: Simply copy the link right from the address bar of your browser.
