Dynamic (Multiple announcements) announcement bar for Prestige theme

Store Design
1

Hi there, would like to a2 announcements to my announcement bar (intervals of 5s and repeats)

Under the Prestige theme, we can only have 1 announcement at a time.

TribeFitCollec_1-1630424286570.png
TribeFitCollec_1-1630424286570.png2486×547 190 KB

Would like to split the announcement to 2 -

(i) Climate neutral delivery. Free for all SG orders.

(ii) Climate neutral delivery. Free for all International orders over $200 USD

All font in high caps.

2

Hi, @TribeFitCollec !

Happy to recommend some potential app options for you to achieve what you are looking for. Have you looked into apps at all? Here are a few options:

Otherwise, if you’re not wanting to use an app, perhaps another Community user can help out with some coding recommendations. Lastly, you can also always hire a Shopify Expert to help with coding this for you.

Let us know how this goes!

3

That can be an advanced customization depending on the final bells and whistles.

Contact me if you want to get this customization added to the theme with the mentioned settings.

The broad steps would be to duplicate the section/block giving the 2nd one a unique name similar to the first.

The a crude CSS animation fade-out fade-in transition to toggle which announcement is shown.

There’s also modifying the base section to contain separate text, or being split into segments to show multiple announcements.

4

@PaulNewton what would the CSS code look like. I have created the second announcement bar and can get them to both show on the home page. However I need to layer them on top of each other and make the top one fade in and out.

Here is my code i setup.

  

{%- if section.settings.show_announcement -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

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

        

{{ section.settings.text | escape }}

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

    {%- else -%}
      
    {%- endif -%}

  {%- endif -%}
{%- endif -%}

{%- if section.settings.show_announcement2 -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

    {%- if section.settings.link2 == blank -%}
      

    {%- else -%}
      
    {%- endif -%}

        

{{ section.settings.text2 | escape }}

    {%- if section.settings.link2 == blank -%}            
      

    {%- else -%}
      
    {%- endif -%}

  {%- endif -%}
{%- endif -%}