Scrolling products

Display a continuously scrolling list of featured products with customizable animation and product styling.

How to access

1. Go to Shopify Admin → Online Store → Themes.

2. Click Customize on your active theme.

3. Click Add section on the page and choose Scrolling products.

Section Settings

Setting	Description
Layout
Expand to full width	Extends the section to the full browser width.
Color scheme	Sets the background and text colors.
Background opacity	Controls the background opacity.
Content
Heading	Sets the section heading text.
Heading size	Controls the size of the heading. Choose from Small, Medium, or Large.
Text	Adds supporting text to the section.
Text position	Shows the text above or below the heading.
Desktop content alignment	Aligns the section content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.
Product
Gap	Sets the space between product items.
Image size	Controls the size of the product image.
Desktop content alignment	Aligns the product content on desktop. Choose from Left, Center, or Right. On mobile, the content is automatically centered.
Animation
Reverse	Reverses the scrolling direction of the animation.
Speed	Sets the scrolling animation speed in seconds.
Section padding
Top side	Sets the space above the section.
Bottom side	Sets the space below the section.
Section divider
Shapes	Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border.

Blocks

Add blocks to this section in the theme editor. Each block is a separate item you can add, remove, and reorder.

Product

Displays a product in the scrolling product list.

Setting	Description
Color scheme	Sets the color scheme for this product item.
Product	Selects the product displayed in this block.
Image	Selects a custom image for the product. For best results, use an image with a resolution of 150 × 150 px. This replaces the product's featured image.

---

Common Questions

How do I change the scrolling direction?

Enable the Reverse option in the Animation settings to reverse the scrolling direction.

Can I replace the product image?

Yes. Select an image in the Image setting of the Product block to replace the product's featured image.

How do I change the scrolling speed?

Adjust the Speed setting under the Animation section to control how quickly the products scroll.