Custom Wavy Marquee - Coding Help

Store Design

Topic summary

A user is seeking help with custom code for a wavy marquee section in their Shopify theme. They’ve shared their implementation which includes:

Technical Components:

  • CSS styling for SVG-based wavy text animation
  • Liquid template variables for customizable settings (text color, font size, path movement)
  • Custom path options for both text and background elements
  • Marquee animation with infinite repeat

Customization Options:

  • Font size control (1-10 rem)
  • Text color picker
  • Background color with transparency toggle
  • Custom path definitions for text and background
  • Movement/positioning adjustments

Code Structure:

  • Uses SVG with animated text along a path
  • Implements startOffset animation for scrolling effect
  • Section-specific ID targeting for styling
  • Schema settings for theme customizer integration

The post appears incomplete as the code snippet cuts off mid-implementation. No specific problem or question has been stated yet, suggesting this may be the beginning of a troubleshooting request.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have created a custom section in my theme for a Wavy Marquee, using the below code:

{% style %}
.wavy-svg-one {
overflow: visible !important;
width: 125vw;
left: -20vw;
position: relative;
padding: 5vw 0;
}

.wavy-path {
position: absolute;
translate: 0 -50%;
z-index: 1;
}

.wavy-path {
width: 100vw;
overflow: hidden;
}

tspan {
font-family: var(–font-heading-family);
}

.section-{{ section.id }} #path-span-one {
fill: {{ section.settings.color_text }};
font-size: {{ section.settings.font_size }}rem;
}

.section-{{ section.id }} #path-bg-one {
transform: translateY({{ section.settings.movePath }}%);
}

{% if section.settings.custompath_text != blank %}
.section-{{ section.id }} #path-text-one {
d: path(“{{ section.settings.custompath_text }}”);
}
{% endif %}

{% if section.settings.custompath_bg != blank %}
.section-{{ section.id }} #path-bg-one {
d: path(“{{ section.settings.custompath_bg }}”);
}
{% endif %}
{% endstyle %}

{% unless section.settings.transparent_bg %} .section-{{ section.id }} .path-bg { fill: {{ section.settings.background }}; } {% else %} .section-{{ section.id }} .path-bg { fill: rgba(0,0,0,0); } {% endunless %} .path-text { fill: none; } {{ section.settings.text }}

{% schema %}
{
“name”: “Wavy Marquee”,
“settings”: [
{
“type”: “html”,
“id”: “text”,
“label”: “Marquee Text”
},
{
“type”: “checkbox”,
“id”: “transparent_bg”,
“label”: “Transparent Background”,
“default”: true
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “transparent”,
“info”: “This will only work if the transparent option is toggled off.”
},
{
“type”: “color”,
“id”: “color_text”,
“label”: “Text Color”,
“default”: “rgba(0,0,0,1)”
},
{
“type”: “range”,
“id”: “font_size”,
“min”: 1,
“max”: 10,
“step”: 1,
“unit”: “rem”,
“label”: “Font size”,
“default”: 2
},
{
“type”: “range”,
“id”: “movePath”,
“min”: -10,
“max”: 10,
“step”: 1,
“unit”: “%”,
“label”: “Background Movement”,
“default”: 0
},
{
“type”: “html”,
“id”: “custompath_text”,
“label”: “Custom Path for Text”,
“info”: “This is an advanced option.”
},
{
“type”: “html”,
“id”: “custompath_bg”,
“label”: “Custom Path for the Background”,
“info”: “This is an advanced option.”
},
{
“type”: “html”,
“id”: “custom_class”,
“label”: “Custom Class”,
“info”: “Separate multiple classes with spaces. Please do not add comma or other symbols.”
}
],
“blocks”: ,
“presets”: [
{
“name”: “Wavy Marquee”
}
]
}
{% endschema %}

It is working well, however, I would like it to stretch across for larger screens and stretch down for smaller screens without scaling (it is currently becoming very small on mobile and you cannot read the wording). If possible I would also like to keep it left aligned.

Is someone able to assist with adding some coding to fix this?

The preview link for the website is https://rwuf4mv4f3ai6wk2-65874886903.shopifypreview.com

Thank you so much!