Marquee Section Shopify

Enhance your Shopify store with a dynamic marquee section to highlight promotions, new arrivals, or special announcements. This eye-catching feature scrolls text across your homepage, capturing customer attention and driving engagement. Customize the content and style to match your brand, ensuring a seamless and attractive addition to your store’s design.

Please copy the code below and create a section naming marquee.liquid or anything as per your convenince and enjoy using this .

 

{%- assign id = '#shopify-section-' | append: section.id -%}

{% style %}
 {{id}} .marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 200px;
    overflow-x: hidden;
  }
 {{id}} .marquee-content {
      display: flex;
      gap: 8rem;
  }
  {{id}} .track {
    position: absolute;
    white-space: nowrap;
    font-size:6rem;
    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 %}

<div class="marquee">
  <div class="track">
    <div class="marquee-content">
      {% for i in (1..5) %}
        {% for block in section.blocks %}
          <span class="marquee-gap" style="color:{{ block.settings.color }}">{{ block.settings.text }}</span>
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

{% 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": "color",
          "default": "#000000",
          "label": "Text Color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee Full Width"
    }
  ]
}
{% endschema %}