Shopify themes, liquid, logos, and UX
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 🙂
Solved! Go to the solution
This is an accepted solution.
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!
which position you will add rolling marque on home page. please send screenshot I can help you.
Thanks!
Over here, below the first section!Is there a Shopify app that allows me to add this?
Thanks!
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
This is an accepted solution.
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!
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"?
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!
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
Hi there,
Is there a solution for this with Prestige Theme?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024