How to add more than 2 messages and decrease padding of marquee text annoucement bar

ZephyrShop
Excursionist
50 0 4

zephyrshop.org is my website

 

So I have added this code to my annoucement-bar.liquid on the refresh theme.

But it only has 2 announcements I can type in.

I want 5 announcements because that's how much I have on my website

And I want to decrease the top and bottom padding.

 

Last thing can somebody show me how I can change the amount of messages and padding for the future?

 

Here's the code:

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}
<div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
{%- if block.settings.message_one != blank -%}
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
{%- endif -%}
<div class="page-width marquee enable-animation marquee--hover-pause">

<ul style="list-style: none" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>

<ul style="list-style: none" aria-hidden="true" class="marquee__content">
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_one | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
<li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
{{ block.settings.message_two | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</li>
</ul>

</div>
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- endif -%}
</div>
{%- 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": "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 %}
<style>

.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);
}
}

</style>

Replies 2 (2)

PageFly-Richard
Shopify Partner
4226 957 1604

 

Hi @ZephyrShop 

 

This is Richard from PageFly - Shopify Page Builder App

 

By default you can increase the Annoucement bar block with the code above

PageFlyRichard_0-1711512158127.png

 

In case you want to have 5 separate message in one block and reduce the padding, you can replace the code from your announcementbar.liquid with this one

 

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
        {%- if block.settings.message_one != blank -%}
          {%- if block.settings.link != blank -%}
            <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
          {%- endif -%}
              <div class="page-width marquee enable-animation marquee--hover-pause">

  <ul style="list-style: none" class="marquee__content">
      <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_one | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
      <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_two | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
       <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_three | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
      <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_four | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
       <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_five | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
    
  </ul>

        <ul style="list-style: none" aria-hidden="true" class="marquee__content">
                <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_one | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
            <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_two | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
              <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_three| escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
            <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_four | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
           <li class="announcement-bar__message {{ block.settings.text_alignment }} h5">
                  {{ block.settings.message_five | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                </li>
        </ul>

              </div>
          {%- if block.settings.link != blank -%}
            </a>
          {%- endif -%}
        {%- endif -%}
      </div>
  {%- 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 %}
<style>

.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;
}
</style>

 

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ZephyrShop
Excursionist
50 0 4

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

ZephyrShop_0-1711541074938.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 you show me how to change what I have just said, on my own, just in case i don't like the results.

 

https://zephyrshop.org/

 

Thanks.