Insert rolling marquee on my Homepage (Debut theme)

Solved
mrfarmersg
Tourist
10 0 4

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

0 Likes
dmwwebartisan
Shopify Partner
4550 1021 1318

@mrfarmersg 

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

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
mrfarmersg
Tourist
10 0 4

Over here, below the first section!Screenshot 2021-02-17 at 1.16.23 PM.pngIs there a Shopify app that allows me to add this?

Thanks!

dmwwebartisan
Shopify Partner
4550 1021 1318

@mrfarmersg 

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

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
mrfarmersg
Tourist
10 0 4
dmwwebartisan
Shopify Partner
4550 1021 1318

This is an 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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
mrfarmersg
Tourist
10 0 4

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"?

0 Likes
dmwwebartisan
Shopify Partner
4550 1021 1318

@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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App