Title Description Marquee Section
Enhance your Shopify store with a fully customizable marquee section. Display scrolling text and images with options to pause on hover, adjust speed for smooth or slow animations, and customize colors, spacing, and font sizes. Perfect for announcements, promotions, or featured content in an engaging, seamless loop.
Liquid Code
<style>
.section-{{ section.id }}.custom-marquee {
display: flex;
align-items: center;
height: {{ section.settings.marquee_height }}px;
width: 100vw;
max-width: 100%;
overflow-x: hidden;
background: {{ section.settings.colorBackground }};
color: {{ section.settings.colorText }};
}
.section-{{ section.id }}.custom-marquee .track {
display: flex;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee {{ section.settings.marquee_speed }}s linear infinite;
}
.section-{{ section.id }}.custom-marquee .content {
margin-left: {{ section.settings.item_spacing }}px;
font-size: {{ section.settings.font_size }}px;
display: flex;
align-items: center;
gap: 10px;
}
.section-{{ section.id }}.custom-marquee .content img {
width: {{ section.settings.image_width }}px;
height: auto;
filter: invert(1);
}
/* Pause animation on hover */
.section-{{ section.id }}.custom-marquee:hover .track {
animation-play-state: paused;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
<div class="section-{{ section.id }} custom-marquee" role="region">
<div class="track">
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
<!-- Duplicate content for smooth infinite scrolling -->
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
<!-- Duplicate content for smooth infinite scrolling -->
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
<!-- Duplicate content for smooth infinite scrolling -->
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
<!-- Duplicate content for smooth infinite scrolling -->
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
<!-- Duplicate content for smooth infinite scrolling -->
{% for block in section.blocks %}
<div class="content marquee-item">
{% if block.settings.image != blank %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="Marquee Image">
{% endif %}
<span>{{ block.settings.new_text }}</span>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Marquee Section",
"settings": [
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#000"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#fff"
},
{
"type": "range",
"id": "marquee_height",
"min": 24,
"max": 200,
"step": 2,
"default": 46,
"label": "Marquee height"
},
{
"type": "range",
"id": "font_size",
"min": 8,
"max": 100,
"step": 2,
"default": 24,
"label": "Font size"
},
{
"type": "range",
"id": "image_width",
"min": 20,
"max": 200,
"step": 5,
"default": 50,
"label": "Image width"
},
{
"type": "range",
"id": "marquee_speed",
"min": 20,
"max": 400,
"step": 5,
"default": 60,
"label": "Marquee speed (seconds, slower = larger value)"
},
{
"type": "range",
"id": "item_spacing",
"min": 10,
"max": 100,
"step": 5,
"default": 20,
"label": "Spacing between items"
}
],
"blocks": [
{
"type": "text",
"name": "Text with Image",
"settings": [
{
"type": "text",
"id": "new_text",
"default": "Welcome to our store!",
"label": "Text"
},
{
"type": "image_picker",
"id": "image",
"label": "Image (optional)"
}
]
}
],
"presets": [
{
"name": "Marquee Section",
"blocks": [
{
"type": "text"
},
{
"type": "text"
},
{
"type": "text"
}
]
}
]
}
{% endschema %}