{%- comment -%}
MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
Marquee: an endless strip of text items and/or logos. Text ticker, announcement strip or logo wall.
Pure CSS animation: the item group is repeated enough times to cover a very wide screen twice,
and the track slides by exactly half its width, so the loop has no seam.
Screen readers get the first group only; every copy is aria-hidden and its links are out of the tab order.
With prefers-reduced-motion the strip stops and the single group wraps onto several lines.
An optional pause button (tiny custom element) lets visitors stop the motion.
Depends on: snippets/lib-image.liquid
{%- endcomment -%}
{%- liquid
assign s = section.settings
assign eager = false
if section.index <= 2
assign eager = true
endif
comment
Estimate the width of one item group in px, so the group is repeated enough times
to fill wide screens and the loop runs at roughly the chosen speed.
endcomment
case s.text_size
when 'small'
assign fs = 14
when 'medium'
assign fs = 20
when 'large'
assign fs = 32
when 'xlarge'
assign fs = 56
else
assign fs = 96
endcase
assign cw = fs | times: 5 | divided_by: 10 | floor
if s.uppercase
assign cw = fs | times: 6 | divided_by: 10 | floor
endif
assign sep_px = 0
case s.separator
when 'dot'
assign sep_px = fs | divided_by: 2 | floor
when 'star'
assign sep_px = fs
when 'custom'
assign sep_chars = s.separator_text | size
assign sep_px = sep_chars | times: cw
endcase
if s.separator != 'none'
assign sep_px = sep_px | plus: s.gap
endif
assign group_px = 0
for block in section.blocks
if block.type == 'image'
assign h = s.logo_height
if block.settings.custom_height
assign h = block.settings.height
endif
assign ratio = 3
if block.settings.image != blank and block.settings.image.aspect_ratio
assign ratio = block.settings.image.aspect_ratio
endif
assign w = h | times: ratio | ceil
else
assign chars = block.settings.text | strip_html | size
if block.settings.icon != blank or block.settings.icon_image != blank
assign chars = chars | plus: 2
endif
assign w = chars | times: cw
endif
assign group_px = group_px | plus: w | plus: s.gap | plus: sep_px
endfor
if group_px < 1
assign group_px = 1
endif
assign reps = 3200 | plus: group_px | minus: 1 | divided_by: group_px | floor
if reps < 1
assign reps = 1
elsif reps > 16
assign reps = 16
endif
assign copies = reps | times: 2
assign half_px = reps | times: group_px
assign duration = half_px | times: 1.0 | divided_by: s.speed | round: 1
assign tilt = s.tilt | default: '0'
-%}
{%- if section.blocks.size > 0 -%}
{%- for copy in (1..copies) -%}
1 %}
aria-hidden="true"
{% endif %}
>
{%- for block in section.blocks -%}
{%- liquid
assign b = block.settings
assign tag = 'span'
if b.link != blank
assign tag = 'a'
endif
-%}