Why Scrolling Text Matters in eCommerce
- Potential Conversion Lift:
- Mobile Optimization:
- Attention Retention:
Common Business Scenarios
- Flash Sales: “24-HOUR SALE: 50% OFF ALL OUTERWEAR – USE CODE HURRICANE”
- Shipping Alerts: “FREE EXPRESS SHIPPING FOR ORDERS ABOVE $100”
- New Launches: “JUST IN: SUMMER 2025 COLLECTION – SHOP NOW”
- Trust Badges: “⭐ 4.9/5 RATED BY 15K CUSTOMERS | 30-DAY RETURNS”
Implementation Steps
Step 1: Create Liquid Template
In your Shopify theme code editor, create a new file named my-marquee.liquid
in the sections
folder.
{%- assign get = section.settings -%}
{% style %}
.ccpro-scrolling-text#section_{{ section.id }} {
background: {{ get.background_color }};
color: {{ get.text_color }};
padding-top: {{ get.spacing_top_mobile }}px;
padding-bottom: {{ get.spacing_bottom_mobile }}px;
--text-font-weight: {{ get.text_font_weight }};
font-size: {{ get.text_size_mobile }}px;
--marquee-speed: {{ get.speed_mobile }}s;
--icon-size: {{ get.icon_size_mobile }}px;
}
@media (min-width:992px) {
.ccpro-scrolling-text#section_{{ section.id }} {
padding-top: {{ get.spacing_top_desktop }}px;
padding-bottom: {{ get.spacing_bottom_desktop }}px;
font-size: {{ get.text_size_desktop }}px;
--marquee-speed: {{ get.speed_desktop }}s;
--icon-size: {{ get.icon_size_desktop }}px;
}
}
{% endstyle %}
{% for i in (1..5) %}
{%- for block in section.blocks -%}
{%- assign get = block.settings -%}
{%- if get.text != blank or get.selected_icon != blank -%}
{%- if get.selected_icon != blank -%}
{{ get.selected_icon | image_url: width: 18, height:18 | image_tag }}
{%- endif -%}
{%- if get.text != blank -%}
{{ get.text }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{% endfor %}
{% schema %}
{
"name": "Scrolling Annoucement Bar",
"settings": [
{
"type": "paragraph",
"content": "Subscribe our channel [Shinetech ChangChun](https:\/\/youtube.com\/@ShinetechShopidev?sub_confirmation=1)"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000"
},
{
"type": "checkbox",
"id": "enable_container",
"label": "Enable Container",
"default": true
},
{
"type": "header",
"content": "Texts"
},
{
"type": "range",
"id": "text_font_weight",
"label": "Font Weight",
"min": 100,
"max": 900,
"step": 100,
"default": 500
},
{
"type": "range",
"id": "text_size_desktop",
"label": "Text Size (Desktop)",
"unit": "px",
"min": 10,
"max": 200,
"step": 2,
"default": 48
},
{
"type": "range",
"id": "text_size_mobile",
"label": "Text Size (Mobile)",
"unit": "px",
"min": 8,
"max": 200,
"step": 2,
"default": 32
},
{
"type": "header",
"content": "Icon/Logo Size"
},
{
"type": "range",
"id": "icon_size_desktop",
"label": "Size (Desktop)",
"unit": "px",
"min": 0,
"max": 200,
"step": 2,
"default": 36
},
{
"type": "range",
"id": "icon_size_mobile",
"label": "Size (Mobile)",
"unit": "px",
"min": 0,
"max": 100,
"step": 1,
"default": 25
},
{
"type": "select",
"id": "direction",
"label": "Direction",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "range",
"id": "speed_desktop",
"label": "Speed (Desktop)",
"unit": "s",
"min": 1,
"max": 100,
"step": 1,
"default": 10
},
{
"type": "range",
"id": "speed_mobile",
"label": "Speed (Mobile)",
"unit": "s",
"min": 1,
"max": 100,
"step": 1,
"default": 10
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "range",
"id": "spacing_top_desktop",
"label": "Spacing Top (Desktop)",
"unit": "px",
"min": 0,
"max": 200,
"step": 5,
"default": 10
},
{
"type": "range",
"id": "spacing_bottom_desktop",
"label": "Spacing Bottom (Desktop)",
"unit": "px",
"min": 0,
"max": 200,
"step": 5,
"default": 10
},
{
"type": "range",
"id": "spacing_top_mobile",
"label": "Spacing Top (Mobile)",
"unit": "px",
"min": 0,
"max": 200,
"step": 5,
"default": 10
},
{
"type": "range",
"id": "spacing_bottom_mobile",
"label": "Spacing Bottom (Mobile)",
"unit": "px",
"min": 0,
"max": 200,
"step": 5,
"default": 10
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "image_picker",
"id": "selected_icon",
"label": "Select Icon",
"info": "Recommended to have consistent Icon/Logo dimension"
},
{
"type": "inline_richtext",
"id": "text",
"label": "Content",
"default": "Add campaign text here."
}
]
}
],
"presets": [
{
"name": "Scrolling Annoucement Bar",
"blocks": [
{
"type": "text",
"settings": {
"text": "Add your text here."
}
},
{
"type": "text",
"settings": {
"text": "Add your text here."
}
},
{
"type": "text",
"settings": {
"text": "Add your text here."
}
}
]
}
]
}
{% endschema %}
Step 2: Add CSS Animation
Create a new file named section-scrolling-text.min.css
in the assets
folder:
.ccpro-scrolling-text .ccpro-st__inner{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;white-space:nowrap;font-size:inherit;font-weight:bold;overflow:hidden;position:relative;z-index:2}
.ccpro-scrolling-text .ccpro-st__inner>div{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-shrink:0;flex-shrink:0;-webkit-animation:marqueeLeft var(--marquee-speed) linear infinite;
animation:marqueeLeft var(--marquee-speed) linear infinite}
.ccpro-scrolling-text .ccpro-st__inner.ccpro-st__direction-right>div{-webkit-animation:marqueeRight var(--marquee-speed) linear infinite;animation:marqueeRight var(--marquee-speed) linear infinite}
.ccpro-scrolling-text .ccpro-st__item{pointer-events:none;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;padding:0 30px}
.ccpro-scrolling-text .ccpro-st__item span{transition:all .25s cubic-bezier(0.104,0.204,0.492,1)}.ccpro-scrolling-text .ccpro-st__item-icon{width:var(--icon-size);margin-right:10px}
.ccpro-scrolling-text .ccpro-st__item-text{font-weight:var(--text-font-weight)}.ccpro-scrolling-text .ccpro-st__item-text a{color:inherit}
@keyframes marqueeLeft {
from {
-webkit-transform:translateX(0);
transform: translateX(0);
}
to {
-webkit-transform:translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes marqueeRight {
from {
-webkit-transform:translateX(-100%);
transform: translateX(-100%);
}
to {
-webkit-transform:translateX(0);
transform: translateX(0);
}
}
Step 3: Enable in Theme Editor
In Shopify Admin, navigate to Online Store > Themes > Customize.
Add your new “Custom Marquee” section to the header or product template.
Strategic Optimization Tips
1. Speed & Readability
Optimal duration: 15-25 seconds per cycle.
Contrast ratio: Ensure a contrast ratio of at least 4.5:1 for accessibility.
2. Content Best Practices
Keep messages under 120 characters.
Use emojis sparingly: 🚚 Free Shipping | 🔥 50% Off
Final Thoughts
By integrating scrolling text into the Dawn theme, eCommerce stores can effectively communicate critical messages and drive higher engagement. Following the steps in this guide enables merchants to create urgency and improve customer interaction, similar to successful strategies employed by top industry players.
For those who prefer a more straightforward approach, public apps in the Shopify app store offer easy-to-use alternatives that still align with brand aesthetics and functionality.