Scrolling Marquee / Ticker Announcement Bar

Toptoys2uHS
Explorer
87 1 9

Hello All,

 

I have managed to add a Marquee/Ticker onto the top of this webpage as a testing ground, however any text that is too long seems to get cut off when the overflow resets and does not display properly. 

 

I have also tried to add a link on to each of the individual texts and decrease the gap between each announcement, but have had no luck.

 

Would anyone be able to implement these functions?

 

The code can be found here and is inserted into announcement-bar.liquid

 

    {% if collection.handle == "onbuy-imports" %}
    <style>
.announcement-bar{max-height:43px;width:100vw;background-color:#3b95f0;overflow:hidden;transition:max-height .3s ease}.hd-Banner-fixed .announcement-bar{max-height:0}.announcement-bar_Ticker{display:flex;padding-top:12px;padding-bottom:12px;font-size:15px;font-weight:bold;letter-spacing:.3px;line-height:12px;text-transform:uppercase;background-color:#3b95f0;color:#fff}@media only screen and (min-width: 768px){.announcement-bar_Ticker{width:200vw}}.announcement-bar_Items{flex:1 1 100%;display:flex;animation:Ticker var(--Animation_Duration, 15s) infinite linear}.announcement-bar:hover .announcement-bar_Items{animation-play-state:paused}.announcement-bar_Item{align-items:center;flex:1 1 10%;display:flex;padding-right:50px;text-align:center}@media only screen and (min-width: 768px){.announcement-bar_Item{padding-right:0}}.announcement-bar_Text{white-space:nowrap;overflow:hidden}@keyframes Ticker{to{transform:translate(-100%)}}
</style>
<div class="announcement-bar">
<announcement-ticker class="announcement-bar_Ticker" style="--Animation_Duration: 8s;">
<div class="announcement-bar_Items">
<div class="announcement-bar_Item"><p class="announcement-bar_Text"> Order by 3pm on 21st December for GUARANTEED Christmas Delivery and Choose Parcelforce Next Day at Checkout!
</p></div>
</div>

<div class="announcement-bar_Items">
<div class="announcement-bar_Item"><p class="announcement-bar_Text">Free Standard UK Delivery on orders over £15</p></div>
</div>


</announcement-ticker>
</div>
  {% endif %}

The page to see this in action can be found here: https://toptoys2u.co.uk/collections/onbuy-imports

 

Any help is highly appreciated!

 

Replies 5 (5)

BSS-Commerce
Shopify Expert
3477 461 519

Hi @Toptoys2uHS ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Toptoys2uHS
Explorer
87 1 9

Hello @BSS-Commerce 

 

The store link and page with the active code can be found here: https://toptoys2u.co.uk/collections/onbuy-imports

 

Kind Regards

BSS-Commerce
Shopify Expert
3477 461 519

To address the issue of text getting cut off and to add links to each announcement, you can make a few modifications to your code. I've made some changes to ensure that long text is displayed properly and added links to each announcement. I've also decreased the gap between each announcement. Here's the updated code:

{% if collection.handle == "onbuy-imports" %}
  <style>
    .announcement-bar {
      max-height: 43px;
      width: 100vw;
      background-color: #3b95f0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .hd-Banner-fixed .announcement-bar {
      max-height: 0;
    }

    .announcement-bar_Ticker {
      display: flex;
      padding-top: 12px;
      padding-bottom: 12px;
      font-size: 15px;
      font-weight: bold;
      letter-spacing: 0.3px;
      line-height: 12px;
      text-transform: uppercase;
      background-color: #3b95f0;
      color: #fff;
    }

    @media only screen and (min-width: 768px) {
      .announcement-bar_Ticker {
        width: 200vw;
      }
    }

    .announcement-bar_Items {
      flex: 1 1 100%;
      display: flex;
      animation: Ticker var(--Animation_Duration, 15s) infinite linear;
    }

    .announcement-bar:hover .announcement-bar_Items {
      animation-play-state: paused;
    }

    .announcement-bar_Item {
      align-items: center;
      flex: 1 1 10%;
      display: flex;
      padding-right: 20px; /* Adjusted the padding */
      text-align: center;
    }

    @media only screen and (min-width: 768px) {
      .announcement-bar_Item {
        padding-right: 0;
      }
    }

    .announcement-bar_Text {
      white-space: nowrap;
      overflow: hidden;
      margin: 0; /* Added to remove default margin */
    }

    .announcement-bar_Link {
      color: #fff;
      text-decoration: none;
    }
  </style>

  <div class="announcement-bar">
    <announcement-ticker class="announcement-bar_Ticker" style="--Animation_Duration: 8s;">
      <div class="announcement-bar_Items">
        <div class="announcement-bar_Item">
          <p class="announcement-bar_Text">
            <a href="your_first_link" class="announcement-bar_Link">Order by 3pm on 21st December for GUARANTEED Christmas Delivery and Choose Parcelforce Next Day at Checkout!</a>
          </p>
        </div>
      </div>

      <div class="announcement-bar_Items">
        <div class="announcement-bar_Item">
          <p class="announcement-bar_Text">
            <a href="your_second_link" class="announcement-bar_Link">Free Standard UK Delivery on orders over £15</a>
          </p>
        </div>
      </div>
    </announcement-ticker>
  </div>
{% endif %}

Replace "your_first_link" and "your_second_link" with the actual URLs you want to use.

=>> These changes should help ensure that long text is displayed properly, and each announcement has a link with reduced spacing between them. Adjust the padding and other styles as needed.

Hope it helps @Toptoys2uHS 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Toptoys2uHS
Explorer
87 1 9

Hello @BSS-Commerce 

 

Thank you for your reply and update with the code.

 

Unfortunately, after implementing this, it seems that the transition has stopped entirely, and it does not scroll from right to left anymore.

 

Is there a line that is missing that caused this?

 

Kind Regards

 

**EDIT**

Hello @BSS-Commerce

 

I think I found the issue, I believe your code missed out this so there was no animation. 

 

@keyframes Ticker{to{transform:translate(-100%)}}

 

Thank you very much for all your help, however there is still the issue of the animation not looping correctly, and the first text seems to get cut off after the second text finishes and moves to the end of the screen.

To solve this, I would like to find out if you know how to change this scroll from horizontal to vertical? I would like it to look like this https://codepen.io/panwron/pen/EmyoRp

 

Kind Regards

MRamzan
Shopify Partner
165 1 21

You can try the code it will help:

Create a new section marquee and paste below code.

You can add marquee section to any page.

 

 

 

<style>
  .section-{{ section.id }}.custom-marquee {
    display: flex;
    align-items: center;
    height: {{section.settings.marquee_height}}px;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    background:{{section.settings.colorBackground}}; 
    color:{{section.settings.colorText}}; 
  }
  .section-{{ section.id }}.custom-marquee a {
    color:{{section.settings.colorText}}; 
    text-decoration: none;
  }
  .section-{{ section.id }}.custom-marquee .track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 12s linear infinite;
  }
  .section-{{ section.id }}.custom-marquee .content {
    margin-left: 40px;
    font-size: {{section.settings.font_size}}px;
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-20%);
    }
  }
</style>
  <div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}" class="">
      {%- endif -%}
          <div class="track ">
            {%- for block in section.blocks -%}
            <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- for block in section.blocks -%}
              <span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          </div>
          {%- if section.settings.link != blank -%}
        </a>
    {%- endif -%}
  </div>
{% 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 %}

 

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112