Scrolling text

Setting	Description
Text	To add text to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the text.
Text color	Text color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list.
Text size	The text size setting offers an option to control scrolling text size, that you can select from the dropdown: Hero, H₁, H₂, H₃, H₄, H₅, H₆
Font weight	Font weight defines the thickness or boldness of text on your store. Available options for scrolling text: Normal (400): Default weight for body text. Medium (500): Slightly thicker, suitable for emphasized body text or light headings. Semi-Bold (600): Heavier, ideal for subheadings or highlighted text. Bold (700): Strongest weight for maximum emphasis.

In the theme customizer, you can manually add a featured image, icon, and scrolling text by entering the details directly. Alternatively, you can use metaobjects, which provide a more structured and dynamic way to manage these elements.

Why Use Metaobjects?

Metaobjects are ideal when you need to create specific values for individual products, ensuring consistency and easy updates. They are useful for:

Assigning unique icons to different products
Displaying custom scrolling text for promotions or key product details
Managing featured images dynamically without manual input

By using metaobjects, you can efficiently store and apply structured data, reducing repetitive manual updates and improving theme customization.

In the demo store, we created a multi-scrolling banner item metaobject with fields for specifications (1, 2, 3). Each specification includes a name and its corresponding value. This metaobject is applied to all products across the store to ensure consistent and dynamic display.

Example Specifications:

Specification 1: Battery Life — Value: 40 hours
Specification 2: Sound Accuracy — Value: ±1%
Specification 3: Units Sold — Value: 1 Million+

When the Multiple Scrolling Banner Metaobject is added to every product on the product detail page in the admin, follow these steps to ensure the scrolling banner appears on the product page preview:

Locate the Multiple Scrolling Banner Field: On the product detail page in the admin, find the Multiple Scrolling Banner field.
Add the Created Entry: Select the entry you created, such as Battery Life with all the associated specifications (e.g., Sound Accuracy, Units Sold).
Connect the Entry: This links the metaobject with the product.
Customize scrolling text blocks in theme customizer: After adding an entry to the product page, follow next steps to connect it with the Theme Customizer after screenshots.

In the theme customizer, you can see several scrolling text blocks added to the section:

First Two Scrolling Banner Blocks: Display Specification 1 and its value.
Next Two Scrolling Text Blocks: Display Specification 2 and its value.
Last Two Scrolling Text Blocks: Display Specification 3 and its value.

Example:

Specification 1: Name

How to Select a Dynamic Source: Specification 1

Click on Dynamic Source: Locate the dynamic source icon in the relevant settings.
Select Multiple Scrolling Banner Metaobject: From the list of available metaobjects, choose the Multiple Scrolling Banner Metaobject.
Select Specification 1: Within the metaobject, click on Specification 1 to link it as the dynamic source.

You can customize the color, size, and font weight for the name of each specification.

The name is styled with a black color for clarity.
It has a smaller font size compared to the value, keeping the focus on the value.

Specification 1: Value

You can customize the color, size, and font weight for the value of each specification.

The value is styled with a gray color, making it distinct.
It has a larger font size than the specification name to emphasize importance.