Marquee

A Marquee section is a horizontally scrolling strip of content that continuously moves across the screen, often used to highlight short messages, announcements, or key selling points. You’ve probably seen it as a repeating line of text like “Free Shipping Worldwide” or “New Arrivals Weekly” smoothly sliding from one side to the other.

This type of component is especially useful for online stores because it draws attention without interrupting the browsing experience. Unlike pop-ups or banners, a marquee feels subtle yet dynamic—it keeps important information visible while adding a sense of motion and energy to your storefront.

Stores commonly use marquee sections to promote ongoing offers, highlight benefits (like free returns or secure payments), or reinforce brand messaging. Because the content loops continuously, it ensures that visitors will eventually see the message, no matter when they land on the page.

When used thoughtfully, a marquee can improve communication, guide customer decisions, and make your store feel more lively and engaging—all without taking up too much space.

It works by using and adding several subcomponents inside of it, which are called Items, with content inside and various options to customize them.

---

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

Alignment

You’ll find two options for choosing the alignment for both desktop and mobile devices of the subcomponents of this section.

Since you can add images and text within each item, the alignment will arrange them as it follows:

• Left: image on the left, text on the right.
• Center: image on the top, followed by the text.
• Right: image on the right, text on the left.

Behavior

This group of options allow you to control and customize certain settings regarding the behavior of the component.

Direction

Defines the horizontal direction on which the component animates.

Speed

Defines the speed for the animation.

Clone amount

Since component’s items have to repeat in order to create the smooth transition that makes it look like it’s scrolling infinitely, they will be contained into a group.

When definining the number in this option, you will be able to define how many repeated (cloned) groups the component will have.

So for example, if you see empty spaces on either the left or right side (depending on the Direction option), you might need to increase the “amount of groups” so the component can fill those “gaps”.

You can read and find examples and case scenarios further down in this section of the page.

Equalize items width

Allows for all items to have the exact same width, regardless of the length or amount of content inside of them.

Stop on hover

Allows to stop the animation of the component when a user places the mouse on top of it.

This can be useful if items are clickable and/or have links, and you want clients to be able click on them without any issue.

Image options (General)

This group of options provides certain settings to control how the images you can add and display on each item will behave.

Display

Defines how the images will adapt to the available space related to the Ratio (dimension) selected below.

• Resize: Images will adapt as much as possible to the dimension of the available space.
• Crop: It will fill the entire area space available with the majority of the image.

Size

Defines the size of the image based on predefined options for desktop and mobile devices, as it follows:

• Small:
  • Desktop: 50px
  • Mobile: 40px
• Medium:
  • Desktop: 75px
  • Mobile: 65px
• Large:
  • Desktop: 100px
  • Mobile: 90px
• Extra large:
  • Desktop: 125px
  • Mobile: 115px

With these sizes in mind, you can know the maximum measure for the width and height of each image. Which means that ideally you should not upload and use images bigger than the one you selected.

Ratio

Allows to define the dimension for the images to be displayed.

Shape

Allows to define the shape in which all images will be presented.

Title options

When enabling the Show titles option within this group, the following ones will become visible to be used:

Font

Defines which font to use, based on the ones selected at Theme settings > Fonts.

Other styles

The following options allow to perform and apply styles to all item’s titles:

• Weight
• Letter spacing
• All caps

Appearance

This group contains the following options to customize the component:

• Show mask: displays a fading gradient color on the left and right side of the component so the items blend with the component’s background color.
• Left and right space: shows or removes the left and right space between the component and the browser window.
• Content colors: allows to choose the Color Pack for the component.
• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.

---

---

Subcomponent settings

As mentioned before, the subcomponent for a Marquee component is called Item, and you can add as many as you want. The options for this subcomponent are the following:

Title

This field allow to display a text inside the item.

If left empty, you will necessarily need to add an image so something displays in it.

Link

This option allows you to make the entire item to be a link. When chosing one the following options will become available:

• Link image: if enabled and the link you choose it’s a category, product or page, its image will be displayed as long as it has one.
• Link text: not visible for merchants, but useful for browsers to display a text when users hover on the item.
• External link: the link will be opened in a new browser tab.

Image options

Within this group of options you will be able to upload a custom image to each item.

If you have added a Link and also enabled Link image, when you upload an image here it will override the one that comes from there.

Once you upload the first image, a second option will become available to add another one specifically for mobile devices. If you don’t upload one, the previous one will be used for all devices.

Note: the sizes for the images you will need to upload can be found in this section of the page.

---

---

Troubleshooting

As it was mentioned before the Marquee component can present some empty spaces on the right side and/or at the end of the sequence of items.

If that happens, there are some things you can do within the component settings in order to make it work properly. The most common scenarios can be because of:

Fewer items

If the component doesn’t have too many items (e.g. two or three at most), which is fine by the way, you can increase the value of the Clone amount option up to the point where you stop seeing the gap and therefore, the component manages to cover it and make it work nicely.

Fewer clones

On the opposite, even if you have a lot of items added in the component and still it doesn’t manage to cover the sequence and gaps or empty spaces are still visible, you can try to keep increasing the value of the Clone amount option to achieve the same effect mentioned above.

Equalizing widths

If any of the above works and you still see gaps or empty spaces in the sequence, you can try disabling the Equalize items width option so the width of all your items respect the amount of content they have and cover the entire avaialable space of the component.