Scrolling content section are a unique way to draw customers' attention to important announcements, promotions, or latest news. With an eye-catching horizontal scroll effect, the message will always be visible and easily seen by customers when visiting the website.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Scrolling content
To add Message block to the Scrolling content section, click the Add item button (plus icon ➕) under the Scrolling content.
Once the Message block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the content you want to display in horizontal scrolling here.
To add Icon block to the Scrolling content section, click the Add item button (plus icon ➕) under the Scrolling content.
Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom image icon > Custom SVG icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Icon background type: Outlines the specific options available (none, square, circle, border) for styling the background of an icon
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field
Once you add the Scrolling content section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Speed: This option controls how fast the text scrolls across the screen. It's usually adjusted with a slider or a numerical input
Direction: This setting determines the direction in which the text will scroll.
Divider shape: This option allows you to add a visual separator (slash, circle, line,...) between each instance of the scrolling text (if it repeats).
Pause on hover: This is an interactive feature. When a user moves their mouse cursor over the scrolling text, the scrolling animation will temporarily stop.
Text uppercase: This option applies a CSS transformation to automatically convert all the text within the scrolling section to uppercase.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience
Text font: This option typically allows you to choose which font family will be applied to the text (body, heading)
Font size: Controls the size of the text, there is a number input (px) to select the desired size. This affects the overall readability and visual prominence of the text.
Mobile font size: Controls the size of the text for small screens, there is a number input (px) to select the desired size. This affects the overall readability and visual prominence of the text.
Spacing between content: Adjust the space between elements to create a clean and readable layout.
Mobile spacing between content: Prioritize spaciousness and smooth experience on small screens by adjusting content spacing.
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Custom CSS
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings