← Back to Sections
Text Marquee
A smooth, edge-to-edge scrolling marquee section perfect for highlighting key messages, announcements, or brand statements. Creates an eye-catching horizontal scroll effect that draws attention to important information without taking up much vertical space.
Key Features:
- Seamless infinite scroll animation with customizable speed (100-600 seconds)
- Support for both custom SVG icons and uploaded images with color controls
- Rich text formatting for dynamic content styling
- Fully responsive typography that scales beautifully across all devices
- Edge-to-edge display with no horizontal padding for maximum impact
- Flexible color options: inherit your theme's styling or apply custom brand colors
- Optional linking capability to make the entire marquee clickable
- Reversible scroll direction for varied visual effects
Perfect for: Sale announcements, shipping notifications, brand messaging, event promotions, featured products, or any repeating message that needs continuous visibility across your site.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
padding: {{ section.settings.desktop_padding }}px 0;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding: {{ section.settings.tablet_padding }}px 0;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding: {{ section.settings.mobile_padding }}px 0;
}
}
.section-{{ section.id }} .bc-marquee {
align-items: center;
display: flex;
overflow: hidden;
text-decoration: none;
gap: {{ section.settings.element_spacing }}px;
color: inherit;
}
.section-{{ section.id }} .bc-marquee:hover,
.section-{{ section.id }} .bc-marquee:focus,
.section-{{ section.id }} .bc-marquee:visited {
color: inherit;
text-decoration: none;
}
.section-{{ section.id }} .bc-marquee-content {
min-width: 100%;
flex: none;
justify-content: space-around;
align-items: center;
display: flex;
gap: {{ section.settings.element_spacing }}px;
}
.section-{{ section.id }} .bc-marquee-content.bc-marquee-scroll {
animation: scroll {{ section.settings.speed }}s linear infinite;
{% if section.settings.reverse_direction %}
animation-direction: reverse;
{% endif %}
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icon_size }}px;
height: {{ section.settings.icon_size }}px;
color: {{ section.settings.icon_color }};
flex-shrink: 0;
}
.section-{{ section.id }} .bc-icon svg {
width: 100%;
height: 100%;
display: block;
}
.section-{{ section.id }} .bc-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
opacity: {{ section.settings.icon_opacity }}%;
}
.section-{{ section.id }} .bc-text * {
font-size: {{ section.settings.text_size }}rem;
font-size: clamp({{ section.settings.text_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
margin: 0;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - {{ section.settings.element_spacing }}px));
}
}
{%- endstyle -%}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<a href="{{ section.settings.link | default: '#' }}" class="bc-marquee">
<div class="bc-marquee-content bc-marquee-scroll">
{% for i in (1..50) %}
{% if section.settings.icon_image != blank or section.settings.icon_svg != blank %}
<div class="bc-icon">
{% if section.settings.icon_image != blank %}
<img
src="{{ section.settings.icon_image | img_url: 'original' }}"
alt="{{ section.settings.icon_image_alt | default: 'Icon' }}"
loading="lazy"
>
{% else %}
{{ section.settings.icon_svg }}
{% endif %}
</div>
{% endif %}
<div class="bc-text">{{ section.settings.text | default: '<p>Your text goes here</p>' }}</div>
{% endfor %}
</div>
</a>
</div>
{% schema %}
{
"name": "BC Marquee",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "desktop_padding",
"label": "Desktop Vertical Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 15,
"unit": "px"
},
{
"type": "range",
"id": "tablet_padding",
"label": "Tablet Vertical Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 15,
"unit": "px"
},
{
"type": "range",
"id": "mobile_padding",
"label": "Mobile Vertical Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 15,
"unit": "px"
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "element_spacing",
"label": "Spacing Between Elements",
"min": 10,
"max": 100,
"step": 5,
"default": 30,
"unit": "px"
},
{
"type": "range",
"id": "speed",
"label": "Scroll Speed",
"min": 100,
"max": 700,
"step": 25,
"default": 500,
"unit": "s"
},
{
"type": "checkbox",
"id": "reverse_direction",
"label": "Reverse scroll direction",
"default": false
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "text",
"label": "Text Content",
"default": "<p>Your text goes here</p>"
},
{
"type": "range",
"id": "text_size",
"label": "Text Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "text_line_height",
"label": "Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.2
},
{
"type": "range",
"id": "text_max_width",
"label": "Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "text_mobile_scale_ratio",
"label": "Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Icon Image (Optional)",
"info": "Upload an image to use as the icon. This takes precedence over SVG code if both are provided."
},
{
"type": "text",
"id": "icon_image_alt",
"label": "Icon Image Alt Text",
"placeholder": "e.g. Shipping icon"
},
{
"type": "textarea",
"id": "icon_svg",
"label": "SVG Icon Code",
"info": "Paste the inline SVG code here. You can copy icons directly from https://lucide.dev/icons using the 'Copy SVG' button. Make sure the SVG uses 'stroke=\"currentColor\"' or 'fill=\"currentColor\"' so the color setting works."
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"min": 16,
"max": 200,
"step": 4,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "icon_opacity",
"label": "Icon Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "header",
"content": "Advanced Options"
},
{
"type": "url",
"id": "link",
"label": "Marquee Link",
"info": "Optional link for the entire marquee section"
}
],
"presets": [
{
"name": "BC Marquee"
}
]
}
{% endschema %}
