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?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024