Articles on: Theme Sections

Scrolling content

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.


1. How to access the Scrolling content section?


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



2. How to customize Scrolling content section?


2.1. Blocks


2.1.1. Message block


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.



2.1.2. Icon block


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


2.2. Scrolling content


Once you add the Scrolling content section, you can customize its settings in the left or right sidebar (depending on your screen size)


  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



Typography


  • 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


  • 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.



Section padding


  • 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.



  1. 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

Updated on: 15/08/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!