How to remove odd space and add more space to marquee text in annoucement bar

Store Design
1

So I added marquee text but now there is an odd space when the marquee text starts at the beginning again.

ZephyrShop_0-1711635473367.png

Also I want there to be a bigger space at the end and start of each separate message because it seems to be all squished.

And I want it to be slowed down a little bit.

Last thing can someone show me how to change what I have just said, on my own, just in case i don’t like the results.

MY STORE IS: https://zephyrshop.org/

Here is the code which someone gave me for the marquee text.

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘announcement’ -%}

{%- if block.settings.message_one != blank -%} {%- if block.settings.link != blank -%} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three| escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% schema %}
{
“name”: “t:sections.announcement-bar.name”,
“max_blocks”: 12,
“blocks”: [
{
“type”: “announcement”,
“name”: “t:sections.announcement-bar.blocks.announcement.name”,
“settings”: [
{
“type”: “text”,
“id”: “message_one”,
“default”: “Message one”,
“label”: “Announcement one”
},
{
“type”: “text”,
“id”: “message_two”,
“default”: “Message two”,
“label”: “Announcement two”
},
{
“type”: “text”,
“id”: “message_three”,
“default”: “Message three”,
“label”: “Announcement three”
},
{
“type”: “text”,
“id”: “message_four”,
“default”: “Message four”,
“label”: “Announcement four”
},
{
“type”: “text”,
“id”: “message_five”,
“default”: “Message five”,
“label”: “Announcement five”
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “accent-1”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}

.marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } } /* Enable animation */ .enable-animation .marquee__content { animation: scroll 20s linear infinite; } /* Pause on hover */ .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } .marquee--fit-content { max-width: fit-content; } .marquee--pos-absolute .marquee__content:last-child { position: absolute; top: 0; left: 0; } .enable-animation .marquee--pos-absolute .marquee__content:last-child { animation-name: scroll-abs; } @keyframes scroll-abs { from { transform: translateX(calc(100% + var(--gap))); } to { transform: translateX(0); } } ul.marquee__content { margin: 0; }
2

Hi @ZephyrShop

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Your Old Code On Add This New Full Code


{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      
        {%- if block.settings.message_one != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
          

            

              - {{ block.settings.message_one | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_two | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_three | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_four | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_five | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              
            

            
              - {{ block.settings.message_one | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_two | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_three | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_four | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              

              - {{ block.settings.message_five | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
              
            

          

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

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
        {
        "type": "announcement",
        "name": "t:sections.announcement-bar.blocks.announcement.name",
        "settings": [
            {
              "type": "text",
              "id": "message_one",
              "default": "Message one",
              "label": "Announcement one"
            },
            {
              "type": "text",
              "id": "message_two",
              "default": "Message two",
              "label": "Announcement two"
            },
            {
              "type": "text",
              "id": "message_three",
              "default": "Message three",
              "label": "Announcement three"
            },
            {
              "type": "text",
              "id": "message_four",
              "default": "Message four",
              "label": "Announcement four"
            },
            {
              "type": "text",
              "id": "message_five",
              "default": "Message five",
              "label": "Announcement five"
            },
            {
              "type": "select",
              "id": "text_alignment",
              "options": [
                  {
                  "value": "left",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
                  },
                  {
                  "value": "center",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
                  },
                  {
                  "value": "right",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
                  }
                ],
              "default": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
              },
            {
              "type": "color_scheme",
              "id": "color_scheme",
              "label": "t:sections.all.colors.label",
              "default": "accent-1"
            },
            {
              "type": "url",
              "id": "link",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
            }
          ]
        }
    ],
    "default": {
    "blocks": [
    {
      "type": "announcement"
      }
    ]
  }
}
{% endschema %}