EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
Free Shopify Text Marquee: How to Create and Customize
Table Of Contents
In the digital shopping landscape, visually compelling elements like Shopify's free Text Marquee feature can significantly enhance your store's appeal. The Text Marquee allows for engaging scrolling text messages to communicate important details like special offers or new products. Businesses employing such dynamic visual tools have seen an average conversion rate increase of 72%, underscoring the importance of integrating visually stimulating elements into your online storefront.
In this blog, we will guide you through the process of implementing and customizing Shopify Text Marquee in your store. We will explore how to make the most of this feature to enhance the visual appeal of your store and effectively communicate with your visitors. Before going into the details, make sure you have built an eCommerce store on Shopify!
What is Shopify Text Marquee?
The Shopify Text Marquee is a built-in feature that enables you to create scrolling text or messages on your Shopify store. It appears as a prominent banner or section on your website, capturing the attention of visitors and delivering important announcements, promotions, or other relevant information.
With the Text Marquee, you have the flexibility to customize the content, appearance, and behavior of the scrolling text. You can choose the text to display, adjust the scrolling speed, control the direction of the scroll (horizontal or vertical), and even add visual effects for a more eye-catching presentation.
This feature is particularly useful for highlighting limited-time offers, new product launches, store-wide sales, or any other important updates you want to communicate to your customers. It helps create a sense of urgency, draw attention to key messages, and enhance the overall user experience on your Shopify store.
[ecom-global-block]ecom-shopify-trial-block[/ecom-global-block]
Benefits of Shopify Texte Marquee
1. Attention-Grabbing Messaging
The Shopify Text Marquee allows you to display scrolling text that grabs visitors' attention. By utilizing this feature effectively, you can showcase important messages or promotions in a visually dynamic way, ensuring they don't go unnoticed. This helps increase engagement and drives attention to key information.
2. Highlight Special Offers or Sales
With the Text Marquee, you can emphasize limited-time offers, exclusive deals, or special promotions. By scrolling these messages across the screen, you create a sense of urgency and encourage visitors to take advantage of the offers. This can lead to increased conversions and boost sales for your Shopify store.
3. Improved Communication
The Text Marquee provides a clear and prominent way to communicate important updates, announcements, or information to your visitors. Whether it's shipping updates, holiday hours, or store-wide notices, the scrolling text ensures that the information is effectively conveyed to your audience, improving communication and reducing any potential confusion.
4. Engaging and Interactive Design
The dynamic nature of the scrolling text in the Text Marquee adds an interactive and visually engaging element to your store's design. This helps capture visitors' attention and creates a more immersive browsing experience, increasing their overall engagement with your Shopify store.
5. Customization Options
The Text Marquee offers customization options, allowing you to tailor the appearance and behavior of the scrolling text to align with your brand and store design. You can choose fonts, colors, and sizes that reflect your brand identity, ensuring a consistent and visually appealing experience for your visitors.
6. Easy Implementation
Implementing the Text Marquee in your Shopify store is straightforward, even for users with limited technical knowledge. Shopify provides user-friendly options and a straightforward interface to enable and customize the Text Marquee, making it easy for you to incorporate this engaging feature into your store.
Overall, the benefits of the Shopify Text Marquee include capturing attention, highlighting offers, improving communication, creating an engaging design, offering customization options, and providing easy implementation. By leveraging these advantages, you can enhance your Shopify store's visual appeal, effectively communicate with visitors, and drive engagement and conversions.
How to Create Marquee Text Using Shopify Default (Coding method)
Step 1: Sign up for your Shopify account
- If you don't already own a Shopify store, you need to sign up for Shopify (free)
- Log in to your online store using your registered email and password.
Step 2: Create a new section
- From your Shopify admin, go to Online Store and click Themes.
- Click Actions, and then click Edit Code.
- Under the Sections folder, click on Add a new section link to create a new section.
- Fill the section name to the field on the dialog and click Done button.
Step 3: Change the code
- In the online code editor, please replace the existing code with the below code:
|
<div class="hura-marquee-bar hura-messages"> <marquee width="100%" scrollamount="{{ section.settings.speed }}" direction="{{ section.settings.direction }}" {% if section.settings.pause_on_hover %}onmouseover="this.stop();" onmouseout="this.start();"{% endif %}> {%- for block in section.blocks -%} <div class="hura-message" style="background:{{block.settings.colorBackground}};color:{{block.settings.colorText}};">{{block.settings.message}}</div> {%- endfor -%} </marquee> </div> <p style="display:none!important;">Powered by <a rel=”nofollow” href="//www.huratips.com" target="_blank">HuraTips.Com</a></p> <style> .hura-marquee-bar.hura-messages{ position: relative; overflow: hidden; display: flex; } .hura-marquee-bar .hura-message{ text-align:center; padding:2px 7%; display: inline-block; } </style> {%- endif -%}
{% schema %} { "name": "Hura Marquee", "settings": [ { "type": "checkbox", "id": "show_marquee_bar", "label": "Show" }, { "type": "select", "id": "direction", "options": [ { "value": "left", "label": "Right to Left" }, { "value": "right", "label": "Left to Right" } ], "default": "right", "label": "Direction" }, { "type": "checkbox", "id": "pause_on_hover", "label": "Pause on hover" }, { "type": "text", "id": "speed", "label": "Speed", "default": "15" } ], "blocks": [ { "type": "header", "name": "Message", "settings": [ { "id": "message", "type": "textarea", "label": "Message" }, { "type": "color", "id": "colorBackground", "label": "Background color", "default": "#ffffff" }, { "type": "color", "id": "colorText", "label": "Text color", "default": "#000" } ] } ], "presets": [ { "name": "Hura Marquee" } ] } {% endschema %} |
(source: huratips)
- Click Save
Step 4: Save
Click Save and you are done.
Add Text Marquee to Your Shopify Store Using EComposer (without coding)
In fact, Shopify allows you to create Text Marquee completely for free, but the way to create is complicated and not diverse in design. Especially, for those who do not know how to code, this will be a difficult challenge to overcome. That's why we bring EComposer - Shopify Page Builder to you as a great solution to save money, save time and deliver extremely good results.
With EComposer, you can build a professional store with all types of page such as a homepage, collection page, product page, about us page, blog page, policy page, landing page, etc. EComposer bring the best solutions for your Shopify stores from page building to optimize conversion rates.
Specifically, EComposer provides a lot of sections, page templates, elements, extensions and other advanced features. Moreover, you also can utilize AI Content Generator in EComposer to write content for your page smartly.
Text Maruee is one of the amazing extensions of EComposer, you can use this feature to animate your text in a horizontal loop, and it’s free for all of you. Follow the steps below:
Step 1: Install and open EComposer
- In the Shopify App Store, search EComposer Landing Page Builder then click Add App
- To activate the use of the app, Install the app to your Shopify store.
- In the Dashboard menu, go to Apps, click EComposer Landing Page Builder.
Step 2: Start building Shopify Text Marquee
- Click Start Building in the right corner of the dashboard and select a page where you want to place Shopify Text Marquee.
- Choose any EComposer template you want or click Blank Template. Then, go to Set up page info and select Start Building.
- In EComposer's editor, go to Elements, select Advance, and look for Text Marquee.
Step 3: Customize Shopify Text Marquee
Now use EComposer's live drag and drop to drag the Text Marquee anywhere you want. Then start customizing Shopify Slider to your liking.
* Content:
- Group Items: Sale up to 50%, Buy 1 Get 1 Free, and other promotions are just a few examples of the text content you can add to the text marquee to transform it become a promotion.
- Icon/Image: You can modify the icon there or use the Image to create the promotion’s decoration. Also, you can modify the position of the Icon/Image via the options named “Icon/Image position”
- Animation Speed: Allows you to choose the speed time the Text Marquee will be active. In most cases, you can set it to 0.2 or higher.
- Reverse direction: Normally, that will play from Right to Left, but if you’d prefer the opposite, you may use this option to make it play from Left to Right.
* Design:
- Text: While discussing text design, several of the fundamental settings, like typography, text colour, text gradient, text-shadow, and spacing, can be changed.
* Advanced
You can customize everything related to visible settings like code, background, animation, and so on.
Step 4: Save and Publish
Once you are satisfied with your customization, in the right corner of the edit page you have options to save and publish.
Best Practices for Customizing Shopify Text Marquee
1. Selecting an attention-grabbing message and writing compelling copy
The message displayed in the Text Marquee should be concise, engaging, and relevant to your audience. Consider using strong action verbs, compelling offers, or intriguing questions to capture visitors' attention.
For instance, a message like "Don't Miss Out on Our Exclusive Summer Sale - Shop Now!" creates a sense of urgency and entices visitors to explore further.
2. Choosing the right font, color, and size to ensure readability and visual appeal
Opt for fonts that are easy to read, even at a glance. Consider the overall tone of your brand and the desired impact of your message when selecting font styles. Choose colors that align with your brand palette and provide sufficient contrast against the background to ensure readability. Experiment with font sizes to find the right balance between visibility and aesthetics.
3. Aligning the Text Marquee with your store's branding and design aesthetic
Maintain consistency with your store's overall branding by using fonts, colors, and styles that reflect your brand identity. For example, if your brand has a minimalistic aesthetic, choose a clean and simple font for the Text Marquee. Ensure that the design elements of the Text Marquee seamlessly blend with the rest of your website to create a cohesive user experience.
4. Considerations for mobile responsiveness and optimizing the Text Marquee across devices
With the prevalence of mobile browsing, it's essential to ensure that the Text Marquee displays properly and remains readable on different devices. Test the Text Marquee on various screen sizes and orientations to verify that the content is fully visible and easily readable. Adjust the font size and scrolling speed if necessary to optimize the Text Marquee for mobile users.
5. Timing and frequency of message updates for optimal impact
Keep your messages fresh and relevant by updating the Text Marquee regularly. Consider the nature of your business, seasonal promotions, or upcoming events when deciding on the timing and frequency of updates. For example, if you have a limited-time offer, ensure that the Text Marquee reflects the countdown and generates a sense of urgency.
By implementing these best practices, you can maximize the impact of your Shopify Text Marquee. Crafting attention-grabbing messages, selecting visually appealing fonts and colors, maintaining brand consistency, optimizing for mobile devices, and strategically timing message updates will contribute to an engaging and effective Text Marquee experience for your visitors.
[ecom-global-block]ecom-shopify-trial-block[/ecom-global-block]
In a nutshell
Throughout this guide, we've explored the numerous benefits of implementing a Text Marquee in your Shopify store. By utilizing this dynamic feature, you can effectively capture the attention of visitors, convey important messages, and create an engaging shopping experience.
The Text Marquee allows you to highlight limited-time offers, promote new products, and communicate announcements in a visually appealing way. By incorporating this feature, you can enhance customer engagement, boost conversions, and elevate your store's overall appeal.
If you want more information or want to learn more about EComposer, follow us at ecomposer.io or click on the message icon located in the right corner of the screen.
=================
Add EComposer Next generation page builder Here
Follow Us on Facebook
Join Official Community
0 comments