How can I add a marquee element to my homepage?

Technical Q&A
1

Hey there,

Looking for some assistance and understanding as to how to add a marquee element using the following github https://github.com/ezekielaquino/Marquee3000 on my homepage. Just under the main hero image.

My website: https://rapidsupplies.com.au/ - currently using the Debut theme.

Thanks

1 Like
2

Hi @AdamVieira

Welcome to Shopify Community.

Aibek is here from Shopify Community.

The first step is to download this JS file and add it to the /assets folder: https://raw.githubusercontent.com/ezekielaquino/Marquee3000/master/marquee3k.min.js

Then, as in the instructions, connect to theme. liquid at the end of the file.

Then next find hero.liquid and at the end you can insert:


        
        # Some marquee content

We took all this from the instructions in github.

We recommend creating a copy of the current theme and working in a copy so that there is no downtime.

Try it and if it doesn’t work, then add us as partners in Admin Panel and we will do it for you

1 Like
3

Got it working!

I was stuck for a bit on adding the Marquee3k.init() into the end of the marquee3k.min.js

Thank you very much

4

Great job!

If you need help with anything else, do not hesitate to send us email here: hello@speedimize.io

We will be glad to help you.

1 Like
5

Hi, @Anonymous , @AdamVieira can you clarify how to do this?

  1. Added the marquee3k.min.js to /assets.

  2. Added <script src=“{{ ‘marquee3k.min.js’ | asset_url }}“> to theme.liquid.

  3. Added <div class=“marquee3k”
    data-speed=“0.25” → play around here
    data-reverse=“bool” → default: R to L / T to B
    data-pausable=“bool” → Pause marquee on hover>

    Some marquee content


    to theme.liquid.

  4. Tried adding Marquee3k.init() to the end of marquee3k.min.js

I have Some marquee content showing up but no scrolling. Am i missing something?

6

So, I will provide all that I have through my side, I have recently gone live with the new DAWN Theme and have implemented it in this theme.

I have the marquee3k.min.js in the assets folder along with a section-marquee-ribbon.css for the additional styling of the ribbon

AdamVieira_0-1639434037472.png
AdamVieira_0-1639434037472.png693×447 11.2 KB

I then also have a “ribbon.liquid” in the sections folder which looks like this

AdamVieira_1-1639434145587.png
AdamVieira_1-1639434145587.png1310×668 26.4 KB

Just note that I have added the script and the css link in here as well as all the elements that I desire to be displayed in the marquee

The final step was to add the element into the theme through the editor

AdamVieira_3-1639434332523.png
AdamVieira_3-1639434332523.png1619×304 96.2 KB

Hope that helps!

Let us know how you go

7

Thanks for the info! I’ve followed your setup but still have issues.

It seems to have the text stacking vertically instead of horizontally. And the text is not scrolling, it’s still static.

Anything I’m missing?

8

Are you using the DAWN theme?

Is any of the css being applied?

9

Looks like i had some small text that was off! Thanks again for your help