Auto-scrolling promotion

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.

How to add an Auto-scrolling promotion section to your Shopify store

How to edit an Auto-scrolling promotion section

Section settings

General

See how to adjust the Container settings

See how to adjust the Color scheme settings

Section header

• 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.\

Settings

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.

Section padding

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.

Block settings

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

Toggle Use custom spacing to enable margin adjustments.

Once enabled, you can customize the spacing using the provided sliders or input fields (10px - 100px).

Image

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.

Text

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.

Testimonial

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).