How To Create Marquee Text Scrolling Direction Is Right To Left or Vice Versa in Shopify
You can use marquee text scrolling to grab your customer’s attention and deliver your message across your entire website, including free shipping, coupon codes, flash sales, and direct your traffic to any page.
This article will guide you on how to create marquee text scrolling direction is right to left or vice versa in Shopify.
Following the below steps to know how to do that:
Step 1: Create a new section
- From your Shopify admin, go to Online Store > 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 – hura-marquee to the field on the dialog and click Done button.
- In the online code editor, please replace the existing code with the below code.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192{%- if section.blocks.size > 0 and section.settings.show_marquee_bar -%}<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 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 %}
- Click Save.
Step 2: Add a new Marquee Text Scrolling
- From your Shopify admin, go to Online Store > Themes.
- Click Customize.
- You scroll to the bottom page and click on Add section. Find Hura Marquee and add this section to your page.
- You click on this section to configure and add messages for this.
- Click Save and you are done.
If you are technical or have a custom developer at your disposal, you can follow the guide to do it yourself. If you consider yourself non-technical, there is a Shopify app that helps you. It’s called Hura Theme Blocks and you can refer to the article here.
I hope this article is useful to you.
Hey, Thanks your sharing！
But i got a problem.
I am still building my site during the 3day free trial.
I created a new section and embeded your code, but it is not working.
Back to customize my site, it doesnt show up the marquee section when i create a new one.
Appreciated！
If you’re more technical, you may want to do this manually. If you consider yourself non-technical, you can refer to the article here: https://www.huratips.com/tech-tips/how-to-create-an-infinite-scrolling-text-in-shopify.html
HI this works fine but can the whole bar colour be changed and the text size ?
If you don’t have knowledge about programming so I think you should use a Shopify app. I suggest Hura Theme Blocks. You can refer to here: https://www.huratips.com/tech-tips/how-to-create-an-infinite-scrolling-text-in-shopify.html
Hi, this is a great feature, we like it!
One question – how can the scrolling text begin with no empty space?
In other words, when the page loads, can the text already be appeared?
Hello,
Is there a way to have the scroller begin with text, in other words have the text shown as soon as the page is loade?