I was following a tutorial to add a Marquee section to my website, the code works fine but I wanted to add in a section where I could change the background colour, but it doesn’t like what I’ve added. Could someone take a look please to let me know where I’ve gone wrong, thank you!
{%- assign id = ‘#shopify-section-’ | append: section.id -%}
{% style %}
{{id}} .marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 100px;
overflow-x: hidden;
}
{{id}} .marquee-content {
display: flex;
gap: 8rem;
}
{{id}} .track {
position: absolute;
white-space: nowrap;
font-size:4rem;
will-change: transform;
animation: marquee 38s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
{{id}} .marquee .track:hover {
animation-play-state: paused;
}
{% endstyle %}
{% for i in (1..5) %}
{% for block in section.blocks %}
{{block.settings.message}}
{% endfor %}
{% endfor %}
{% schema %}
{
“name”: “Marquee Full Width”,
“settings”: ,
“blocks”: [
{
“type”: “ScrollingText”,
“name”: “Scrolling Text”,
“limit”: 4,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Title”,
“label”: “Scrolling Text”
},
{
“type”: “color”,
“id”: “colorBackground”,
“default”: “#1D2646”,
“label”: “Background Color”
},
{
“type”: “color”
“id”: “colorText”
“default”: “#ffffff”
“label”: “Text color”
}
]
}
],
“presets”: [
{
“name”: “Marquee Full Width”
}
]
}
{% endschema %}
Hello @SHDistill , You forgot to put " , " in your schema for the settings of colorText, try the code below.
{%- assign id = '#shopify-section-' | append: section.id -%}
{% style %}
{{id}} .marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 100px;
overflow-x: hidden;
}
{{id}} .marquee-content {
display: flex;
gap: 8rem;
}
{{id}} .track {
position: absolute;
white-space: nowrap;
font-size:4rem;
will-change: transform;
animation: marquee 38s linear infinite;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
{{id}} .marquee .track:hover {
animation-play-state: paused;
}
{% endstyle %}
{% for i in (1..5) %}
{% for block in section.blocks %}
{{block.settings.message}}
{% endfor %}
{% endfor %}
{% schema %}
{
"name": "Marquee Full Width",
"settings": [],
"blocks": [
{
"type": "ScrollingText",
"name": "Scrolling Text",
"limit": 4,
"settings": [
{
"type": "text",
"id": "text",
"default": "Title",
"label": "Scrolling Text"
},
{
"type": "color",
"id": "colorBackground",
"default": "#1D2646",
"label": "Background Color"
},
{
"type": "color",
"id": "colorText",
"default": "#ffffff",
"label": "Text color",
}
]
}
],
"presets": [
{
"name": "Marquee Full Width"
}
]
}
{% endschema %}
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
1 Like
Thank you this worked! I’ve published it on the site but there’s now a long white gap after the text, how do I have it so it’s an infinite loop? Thanks
It’s https://summerhalldistillery.com/ the banner is right at the bottom, thank you
Increasing it to 10 worked, thank you
