Solved

Insert rolling marquee on my Homepage (Debut theme)

mrfarmersg
Tourist
11 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 🙂

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 9 (9)

dmwwebartisan
Shopify Partner
12282 2546 3694

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mrfarmersg
Tourist
11 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
12282 2546 3694

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mrfarmersg
Tourist
11 0 4
dmwwebartisan
Shopify Partner
12282 2546 3694

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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
mrfarmersg
Tourist
11 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"?

dmwwebartisan
Shopify Partner
12282 2546 3694

@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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
legswine
Visitor
3 0 0

Hi dmwwebartisan 

 

I was wondering if you could help me I use debut theme and am looking to use the marquee effect on my rich text section.

Can you provide the code and sections I need to put it in for it to work?

 

Thanks

liam_g
Visitor
1 0 0

Hi there,

Is there a solution for this with Prestige Theme?