Marquee
A continuously scrolling row of text or images. Good for shipping promises, stockist logos or a run of short claims.
At a glance: Add it to any page with Add section.
Good for
- A running strip of shipping, returns and guarantee promises
- Stockist or press logos drifting across the page
- Short product claims, each with a small image
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Marquee and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Background
| Enable image background | Puts a photo behind the scrolling row, darkened by the overlay opacity so the text stays readable.
Off by default. |
| Background image | Image shown behind the section content.
1920 x 1080px .jpg recommended. Only appears when Enable image background is on. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 50%). Only appears when Enable image background is on. |
Marquee
| Scroll direction | Which way the content travels.
Choose Left (default) or Right. |
| Scroll speed | How fast the content moves. Lower is slower.
1 is slowest, 10 is fastest. Adjustable from 1 to 10 (default 5). |
| Item gap | Space between items in the row or grid.
Adjustable from 8px to 96px (default 32px). |
| Pause on hover | Stops the animation while the pointer is over the section.
On by default. |
| Show separator | Adds a small dot between items, in the section's text color.
Off by default. |
| Enable edge fade | Fades the row out at the left and right edges, so items drift in and out instead of being cut off sharply.
On by default. |
Text sizes
| Item heading size | Heading size for each item, from the sizes in Theme settings → Typography.
Choose Default, H1, H2 (default), H3, H4, H5 or H6. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Item block
Content
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Link | Where this item links to. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
Media
| Icon or image | The image for this block.
64 x 64px .png or .svg recommended. |
| Image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Choose Portrait (3:4) (default), Square (1:1), Landscape (4:3) or Adapt to image. |
| Image fit | Cover fills the frame and crops the overflow; Contain fits the whole image inside the frame and may leave space at the edges.
Choose Cover (default) or Contain. |
| Desktop image width | How much of the row width the image takes.
Adjustable from 50px to 200px (default 150px). |
| Mobile image width | Image width on mobile.
Adjustable from 24px to 130px (default 110px). |
| Image corner radius | Rounds the corners of the image.
Adjustable from 0% to 50% (default 2%). |
Tips
- Keep each item to a few words. Shoppers read a moving line in passing.
- Turn on edge fade. Items then drift in and out instead of being cut off at the screen edge.
- Slow it down for longer text. A lower scroll speed gives shoppers time to read.
Troubleshooting
The background image isn't showing
You need both: Enable image background turned on, and an image chosen in Background image.