How to Set Up the Scrolling Promotion Section in Be Yours

The Scrolling promotion section displays a continuously moving row of promotional messages, icons, or images. It is useful for shipping offers, campaigns, brand messages, and logos.

Version note: Scrolling promotion was introduced in Be Yours 5.3.0. Background gradient support was added in 6.1.0. The instructions below are based on Be Yours 9.5.1.

Demo Usage

• Preset: Beauty
• Demo page: The Good C Vitamin C Serum – Product page
• Section location: Below the product purchase area, before Our promise.
• Demo content: “FREE SHIPPING on all orders over $100”, “EASY RETURNS 30-day postage paid returns”, and “10% OFF your first order | Use code: FIRST10”.

STEPS:

1. Add the Scrolling Promotion Section

• From Shopify admin, go to Online Store > Themes and click Customize.
• Open the page template where you want to show the promotion.
• Click Add section and select Scrolling promotion.
• Add Announcement or Image blocks.
• Configure the section settings and click Save.

2. Configure Scrolling and Layout

Setting	Description
Direction	Choose Left or Right to control the scrolling direction.
Speed	Adjust how quickly the content moves, from 0.5 to 2.5 s/100px. Lower values move faster.
Show section divider	Display a divider above the section.
Top padding	Adjust spacing above the content.
Bottom padding	Adjust spacing below the content.

The scrolling animation pauses when customers hover over the section on devices that support hover. It also pauses when the section is outside the visible screen area.

3. Add an Announcement Block

Use an Announcement block to display scrolling text with an optional icon and link.

Setting	Description
Icon	Choose a built-in icon or None.
Icon size	Choose Small, Medium, or Large.
Custom SVG icon	Add a custom SVG icon instead of the built-in icon.
Text	Enter the promotional message.
Text size	Set the text size from 12 to 150 px.
Link	Make the message clickable.

• In the section, click Add block > Announcement.
• Enter your message, choose an icon if needed, and add a link.
• Click Save.

4. Add an Image Block

Use an Image block for logos, promotional graphics, or brand images.

Setting	Description
Image	Select the image to display.
Custom height	Set the image height from 0 to 200 px.
Link	Make the image clickable.

• In the section, click Add block > Image.
• Select your image and adjust Custom height.
• Add an optional link, then click Save.

You can mix Announcement and Image blocks in the same scrolling row.

5. Configure Colors

Enable Use custom colors to customize the section's appearance.

Setting	Description
Icon	Set the icon color.
Text	Set the text color.
Background	Set the section background color.
Background gradient	Use a gradient instead of a solid background.

• Open the Scrolling promotion section.
• Enable Use custom colors.
• Select the colors or background gradient.
• Click Save.

If custom colors are disabled, the section follows the theme's existing color styling.

6. Notes and Troubleshooting

• The section supports Announcement and Image blocks; both can have individual links.
• Make sure at least one block contains text or an image.
• If an icon does not appear, check the Icon or Custom SVG icon setting.
• If an image does not appear, confirm that the Image field is populated.
• If the movement looks too fast or slow, adjust Speed.
• If custom colors do not appear, enable Use custom colors.
• The animation automatically pauses when the section leaves the screen or is hovered over on supported devices.

If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.