How to start marquee text with full weight?

Store Design
, ,

Topic summary

A user sought help implementing a marquee text element that starts with full width, eliminating empty space at the beginning of the animation on their Shopify store.

Initial Response:

  • Another user suggested changing the marquee direction attribute from “left” to “right”
  • This didn’t address the core issue of removing initial empty space

Resolution:
The original poster solved the problem independently by modifying the Hura Marquee section code. The solution involved duplicating the marquee content blocks within the HTML structure, ensuring the scrolling text appears continuous from the start without gaps.

Key Technical Details:

  • Modified Shopify Liquid template code for the Hura Marquee component
  • Adjusted settings including speed (default: 25), height (default: 40), and pause-on-hover functionality
  • Complete working code shared for others implementing similar marquee features

The discussion is resolved with a working solution provided.

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

hi everyone, can anyone please help me to Make marquee text start with full weight.

my store: https://you-boho-vibes.myshopify.com/

password: sotroy

ScreenShot_20221224003938.png
ScreenShot_20221224003938.png1364×624 288 KB

2

Hi @hamza-elkaissi1

You only need to update the direction attribute of marquee tag from left to right.

EBOOST_0-1671845441670.png
EBOOST_0-1671845441670.png1867×625 77.9 KB

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

3

hi, thanks for replying, but I want it to start with full weight, means I want it to start with no empty space, this is the section code, thank you

{%- if section.blocks.size > 0 and section.settings.show_marquee_bar -%}
  
    
  

  

Powered by HuraTips.Com

  
{%- endif -%}

{% schema %}
{
  "name": "Hura Marquee",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee_bar",
      "label": "Show"
    },
    {
      "type": "select",
      "id": "direction",
      "options": [
        {
          "value": "left",
          "label": "Right to Left"
        },
        {
          "value": "right",
          "label": "Left to Right"
        }
      ],
      "default": "right",
      "label": "Direction"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover"
    },
    {
      "type": "text",
      "id": "speed",
      "label": "Speed",
      "default": "15"
    }
],
"blocks": [
    {
      "type": "header",
      "name": "Message",
      "settings": [
          {
            "id": "message",
            "type": "textarea",
           "label": "Message"
          },
          {
            "type": "color",
            "id": "colorBackground",
            "label": "Background color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "colorText",
            "label": "Text color",
            "default": "#000"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hura Marquee"
    }
  ]
}
{% endschema %}
4

@PageFly-Victor can you please help with that

5

I fix it, and this is the code for anyone who interested in this section.

{%- if section.blocks.size > 0 and section.settings.show_marquee_bar -%}
  
    

      {%- for block in section.blocks -%}
        

          {{ block.settings.message }}
        

      {%- endfor -%}
      {%- for block in section.blocks -%}
        
          {{ block.settings.message }}
        

      {%- endfor -%}
    

  

  

Powered by HuraTips.Com

  
{%- endif -%}

{% schema %}
{
  "name": "Hura Marquee",
  "max_blocks": 1,
  "settings": [
    {
      "type": "checkbox",
      "id": "show_marquee_bar",
      "label": "Show"
    },
    {
      "type": "select",
      "id": "direction",
      "options": [
        {
          "value": "left",
          "label": "Right to Left"
        },
        {
          "value": "right",
          "label": "Left to Right"
        }
      ],
      "default": "right",
      "label": "Direction"
    },
    {
      "type": "checkbox",
      "id": "pause_on_hover",
      "label": "Pause on hover"
    },
    {
      "type": "number",
      "id": "speed",
      "label": "Speed",
      "default": 25
    },
     {
      "type": "number",
      "id": "height",
      "label": "Height",
      "default": 40
    }
],
"blocks": [
    {
      "type": "header",
      "name": "Message",
      "settings": [
          {
            "id": "message",
            "type": "textarea",
           "label": "Message"
          },
          {
            "type": "color",
            "id": "colorBackground",
            "label": "Background color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "colorText",
            "label": "Text color",
            "default": "#000"
          }
      ]
    }
  ],
  "presets": [
    {
      "name": "Hura Marquee"
    }
  ]
}
{% endschema %}