How to Add Shopify Marquee Text to Your Theme: A Step-by-Step Guide - OPTIXPERT

 Introduction

Adding a scrolling marquee effect to your Shopify store can enhance the visual appeal and catch the attention of your customers. Whether you want to make announcements, highlight promotions, or simply add some movement to your site, the marquee effect is a versatile tool. In this guide, we will explore how to add and customize the marquee text in Shopify, specifically for the Dawn theme. You'll also learn how to adjust the speed, color, and style of your marquee text, and how to troubleshoot common issues.

What is a Marquee Text Effect in Shopify?

A marquee text effect is a scrolling text that moves horizontally across the screen. It can be used to display important information such as sales, new arrivals, or special announcements. This dynamic text effect adds a professional and engaging touch to your store, making it more interactive and visually appealing.

Why Use a Scrolling Marquee on Your Shopify Store?

• Enhanced Visibility: A scrolling marquee draws the eye to important information, ensuring that visitors don’t miss key announcements.
• Engagement: Movement naturally attracts attention, making marquee text a great tool for engagement.
• Customization: You can easily change the text, speed, direction, and style of the marquee to fit your brand's theme.
• Mobile-Friendly: Shopify marquee effects are responsive, working well on both desktop and mobile devices.

How to Add Marquee Text to Shopify Dawn Theme

Step-by-Step Guide

1. Go to Your Shopify Admin Dashboard
   Navigate to your Shopify admin dashboard and select Online Store > Themes.

2. Edit Your Code
   Click on the "Actions" dropdown next to your theme and select Edit Code.

3. Create a New Section to Add Marquee
   In the left sidebar, click on the Sections folder and then click Add a new section and Name it "marquee-txt.liquid".

4. Insert the Marquee Code
   Insert the following code where you want the scrolling text to appear:

   Code Snippet

       
        <style>
     .section-{{ section.id }}.custom-marquee {
       display: flex;
       align-items: center;
       height: {{section.settings.marquee_height}}px;
       width: 100vw;
       max-width: 100%;
       overflow-x: hidden;
       background:{{section.settings.colorBackground}};
       color:{{section.settings.colorText}};
     }
     .section-{{ section.id }}.custom-marquee a {
       color:{{section.settings.colorText}};
       text-decoration: none;
     }
     .section-{{ section.id }}.custom-marquee .track {
       display: flex;
       align-items: center;
       white-space: nowrap;
       will-change: transform;
       animation: marquee 12s linear infinite;
     }
     .section-{{ section.id }}.custom-marquee .content {
       margin-left: 40px;
       font-size: {{section.settings.font_size}}px;
     }
     @keyframes marquee {
       from {
         transform: translateX(0);
       }
       to {
         transform: translateX(-20%);
       }
     }
   </style>
   <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
     {%- if section.settings.link != blank -%}
       <a href="{{ section.settings.link }}" class="">
     {%- endif -%}
     <div class="track ">
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- for block in section.blocks -%}
         <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
       {%- endfor -%}
       {%- if section.settings.link != blank -%}
         {% render 'icon-arrow' %}
       {%- endif -%}
     </div>
     {%- if section.settings.link != blank -%}
       </a>
     {%- endif -%}
   </div>
   {% schema %}
   {
     "name": "Marquee Text",
     "settings": [
       {
         "type": "color",
         "id": "colorBackground",
         "label": "Background color",
         "default": "#000"
       },
       {
         "type": "color",
         "id": "colorText",
         "label": "Text color",
         "default": "#fff"
       },
       {
         "type": "url",
         "id": "link",
         "label": "Link"
       },
       {
         "type": "range",
         "id": "marquee_height",
         "min": 24,
         "max": 200,
         "step": 2,
         "default": 46,
         "label": "Marquee height"
       },
       {
         "type": "range",
         "id": "font_size",
         "min": 8,
         "max": 100,
         "step": 2,
         "default": 24,
         "label": "Font size"
       }
     ],
       "blocks": [
       {
         "type": "text",
         "name": "Text",
         "limit": 20,
         "settings": [
            {
             "type": "text",
             "id": "new_text",
             "default": "Welcome to store",
             "label": "Text"
           }
         ]
       }
     ],
     "presets": [
       {
         "name": "Marquee-Txt",
         "blocks": [
           {
             "type": "text"
           },
           {
             "type": "text"
           },
           {
             "type": "text"
           }
         ]
       }
     ]
   }
   {% endschema %}
       
     

5. Save Your Changes

Click Save after adding the code. Now your Shopify store should have a scrolling marquee text.

Best Practices for Using Marquee Text Effectively

• Keep It Simple: Avoid overwhelming your customers with too much text in the marquee. Focus on one key message at a time.

• Test Across Devices: Ensure that your marquee works well on both desktop and mobile devices to avoid any display issues.

• Avoid Overuse: While marquee text can be attention-grabbing, too many moving elements can make your store feel cluttered.

Common Issues and Fixes for Marquee Text in Shopify

1. Marquee Not Displaying Properly: Ensure that your CSS and HTML code is correctly added. Double-check for any missing brackets or tags.

2. Marquee Speed Too Fast or Slow: Adjust the timing in the animation property to your desired speed.

3. Marquee Text Overflowing: Ensure that your white-space: nowrap; and overflow: hidden; properties are correctly applied.
   

FAQs

1. Can I add a marquee effect to other Shopify themes besides Dawn?
Yes, the same steps can be applied to other themes, though you might need to modify the code slightly depending on your theme’s structure.

2. How do I change the scrolling direction of the marquee text?
You can reverse the direction by changing transform: translate(100%, 0); to transform: translate(-100%, 0); in the keyframes.

3. Is the marquee text effect mobile-responsive?
Yes, the code provided is mobile-friendly and will adjust automatically to different screen sizes.

Conclusion

Adding a marquee text effect to your Shopify store, particularly in the Dawn theme, is a great way to draw attention to key messages and promotions. It’s easy to implement and customize, allowing you to adjust the speed, color, and style to fit your branding. Follow the best practices outlined in this guide to ensure your scrolling text enhances, rather than overwhelms, your store’s design.