Scrolling text marquees have become a powerful tool for eCommerce stores to communicate urgent messages and boost conversions. This technical guide demonstrates how to implement a scrolling text feature in Shopify’s Dawn theme while exploring strategic use cases and optimization tactics.
Why Scrolling Text Matters in eCommerce
- Potential Conversion Lift:
Stores using scrolling marquees have reported increases in conversion rates by highlighting time-sensitive offers, though the exact impact can vary.
- Mobile Optimization:
With 65% of Shopify traffic from mobile devices, compact scrolling text efficiently utilizes limited screen space.
- Attention Retention:
Animated elements capture 3x more visual attention than static text.
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
Before modifying any code, create a backup of your theme to prevent issues affecting your live store.
Step 1: Create Liquid Template
In your Shopify theme code editor, create a new file named my-marquee.liquid in the sections folder.
<link rel="stylesheet" href="{{ 'section-scrolling-text.min.css' | asset_url }}" media="all">
{%- 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 %}
<div class="ccpro-scrolling-text" id="section_{{ section.id }}">
<div class="{% if get.enable_container %}page-width{% endif %}">
<div class="ccpro-st__inner ccpro-st__direction-{{ get.direction }}">
{% for i in (1..5) %}
<div>
{%- for block in section.blocks -%}
{%- assign get = block.settings -%}
{%- if get.text != blank or get.selected_icon != blank -%}
<div class="ccpro-st__item" {{ block.shopify_attributes }}>
{%- if get.selected_icon != blank -%}
<div class="ccpro-st__item-icon">
<div class="ccpro-aspect-ratio" style="padding-top:{{ 1 | divided_by: get.selected_icon.aspect_ratio | times: 30 }}%">
{{ get.selected_icon | image_url: width: 18, height:18 | image_tag }}
</div>
</div>
{%- endif -%}
{%- if get.text != blank -%}
<span class="ccpro-st__item-text">{{ get.text }}</span>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
{% endfor %}
</div>
</div>
</div>
{% 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.