Solved

How to show announcement bar only on mobile homepage

vcockerham2002
Tourist
26 0 1

Hi there, I would like to make an announcement bar that only shows on the homepage of mobile.  TIA my site is appleblossomgiftbaskets.com 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7556 1459 1455

This is an accepted solution.

Hi @vcockerham2002 

I'm Dan from Ryviu: Product Reviews & QA app.

You can add this code to your theme.liquid file to make it show only on mobile homepage.

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.utility-bar .announcement-bar { display: flex; }
}
</style>
{% else %}
<style>
.utility-bar .announcement-bar { display: none; }
</style>
{% endif %}

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

BrainStation23
Shopify Partner
262 43 41

This is an accepted solution.

hi @vcockerham2002 
You can follow these steps to achieve your result 
Go to online stores -> Themes  -> Edit code->theme. liquid file
Then paste the below  code above  </head>  tag

{% if template == 'index' %}

  <style>
    @media screen and (max-width: 768px) {
     .utility-bar 
     .announcement-bar
      {
        display: flex; 
      }
    }
  </style>

{% else %}
  <style>

    .utility-bar 
    .announcement-bar
     { 
       display: none; 
     }

  </style>
{% endif %}
Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7556 1459 1455

This is an accepted solution.

Hi @vcockerham2002 

I'm Dan from Ryviu: Product Reviews & QA app.

You can add this code to your theme.liquid file to make it show only on mobile homepage.

{% if template == 'index' %}
<style>
@media (max-width: 749px) {
.utility-bar .announcement-bar { display: flex; }
}
</style>
{% else %}
<style>
.utility-bar .announcement-bar { display: none; }
</style>
{% endif %}

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

BrainStation23
Shopify Partner
262 43 41

This is an accepted solution.

hi @vcockerham2002 
You can follow these steps to achieve your result 
Go to online stores -> Themes  -> Edit code->theme. liquid file
Then paste the below  code above  </head>  tag

{% if template == 'index' %}

  <style>
    @media screen and (max-width: 768px) {
     .utility-bar 
     .announcement-bar
      {
        display: flex; 
      }
    }
  </style>

{% else %}
  <style>

    .utility-bar 
    .announcement-bar
     { 
       display: none; 
     }

  </style>
{% endif %}
Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com