Blog Articles

Blog

Enhancing Shopify Dawn Theme with Scrolling Text

Author: Sonya

02-06-2025 8:35 AM

Technical Guide & Strategic Implementation

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

  1. Potential Conversion Lift: Stores using scrolling marquees have reported increases in conversion rates by highlighting time-sensitive offers, though the exact impact can vary.

  2. Mobile Optimization: With 65% of Shopify traffic from mobile devices, compact scrolling text efficiently utilizes limited screen space.

  3. Attention Retention: Animated elements capture 3x more visual attention than static text.

Common business scenarios include:

  • 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 making any code modifications, always ensure you create a copy of the theme first. Test all your changes on this copy to confirm everything works perfectly before publishing it to the live theme. This precaution helps prevent any issues from affecting your main theme and keeps your work safe.

Step 1: Create Liquid Template

In your 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 Announcement Bar",
  "settings": [
    {
        "type": "paragraph",
        "content": "Subscribe to 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

  1. In Shopify Admin, navigate to Online Store > Themes > Customize.

  2. 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 ≥ 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.

For any questions or further assistance, please don't hesitate to reach out. Simply leave us a message, and we will respond to you as soon as possible. We're here to help and look forward to working with you!