Help - trying to make marquee work on homepage section and product pics in collection pages?

Store Design

Topic summary

Issue: A marquee (scrolling text banner) works for text movement, but the background doesn’t resize to fit the text height. The requester also wants a similar banner across the first page of product images on collection pages. An image is provided illustrating the background sizing problem.

Proposed solution: Create a new “Marquee” section and paste a provided Shopify Liquid section with schema. Key settings include background color, text color, link, adjustable marquee height, and font size. The markup repeats text blocks multiple times to create a continuous scroll. Two tutorial videos are linked for implementation guidance, and the section can be added to any page.

Relevance to the background issue: Adjustable “marquee_height” and “font_size” settings suggest control over the container sizing to match text.

Status: No confirmation from the original poster that the fix resolves the background resizing. Applying a banner specifically over the first page of collection product images is suggested as possible (“add to any page”) but lacks detailed, collection-specific implementation steps. Discussion remains open.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi there,

I’m trying to get a marquee to work as a section in my theme’s code. I’ve managed to get the text moving as it should but the background doesn’t adapt to the size of the text as seen below. It works on one of my other themes and I can’t figure out why it’s happening. Does anyone have any ideas? I can DM or share the code. I’d also love to get a similar banner across the first page of my product pictures on the collection page. Does anyone know how I can do that?

marquee-example.jpg
marquee-example.jpg1872×162 26.7 KB

Thanks in advance!

1 Like
2

You can do it for store:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

{% schema %}
{
  "name": "Marquee Text",
  "settings": [
    {
      "type": "color",
      "id": "colorBackground",
      "label": "Background color",
      "default": "#000"
    },
    {
      "type": "color",
      "id": "colorText",
      "label": "Text color",
      "default": "#fff"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link"
    },
    {
      "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"
    }
  ],
    "blocks": [
    {
      "type": "text",
      "name": "Text",
      "limit": 20,
      "settings": [
         {
          "type": "text",
          "id": "new_text",
          "default": "Welcome to store",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Marquee",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}