Insert rolling marquee on my Homepage (Debut theme)

[mrfarmersg]

Hi!

I am looking at inserting a rolling marquee on my homepage but I can't seem to do it.

This is the code for it!

<!-- Codes by HTML.am -->

<!-- CSS Code -->
<style type="text/css" scoped>
.GeneratedMarquee {
font-family:sans-serif;
font-size:3em;
line-height:1.3em;
color:#23402A;
padding:0.1em;

}
</style>

<!-- HTML Code -->
<marquee class="GeneratedMarquee" direction="right" scrollamount="9" behavior="scroll">SUSTAINABLE ☺ ETHICAL ☺ ORGANIC</marquee>

Where should I insert this?

Thanks

[dmwwebartisan]

@mrfarmersg 

which position you will add rolling marque on home page. please send screenshot I can help you.

Thanks!

[mrfarmersg]

Over here, below the first section!Is there a Shopify app that allows me to add this?

Thanks!

[dmwwebartisan]

@mrfarmersg 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[mrfarmersg]

https://mr-farmer-sg.myshopify.com/

blowee

[dmwwebartisan · Accepted solution]

@mrfarmersg 

Edit your Sections/collection.liquid file.

find code

<div class="page-width">

after add this code  

{% if template.name == 'index' %}
  <marquee class="GeneratedMarquee" direction="right" scrollamount="9" behavior="scroll">SUSTAINABLE ☺ ETHICAL ☺ ORGANIC</marquee>
 {% endif %}

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file.

#shopify-section-featured-collections .GeneratedMarquee {
font-family:sans-serif;
font-size:3em;
line-height:1.3em;
color:#23402A;
padding:0.1em;
}

Hope this will work for you.

Thanks!

[mrfarmersg]

Hey,

Thanks! How do you edit the size of the text? Changing the font value doesn't work for me. Do I change "em" to "px"?

[dmwwebartisan]

@mrfarmersg 

yes you can change "em" to "px" edit your CSS file and change font size in following CSS class

#shopify-section-featured-collections .GeneratedMarquee {
font-family:sans-serif;
font-size:25px;
line-height:1.3em;
color:#23402A;
padding:0.1em;
}

Hope this will work for you.

Thanks!