Adding an announcement bar under the header on top of the product description on one product page

[dogand]

I would like to add an announcement bar so I can put text on top of the product description section and below the header. So in between the two. I only want to do this for one products product page. Can anyone assist? My theme is Craft. Thanks.

[Dan-From-Ryviu · Accepted solution]

Hi @dogand 

You can do that by going to your Online store > Themes > Edit code > open theme.liquid file, find this line of code 

{% sections 'header-group' %}

Add this code below this line of code above 

    {%- if product.id == your shopify product ID  -%}
    <div class="utility-bar color-background-1 gradient utility-bar--bottom-border">
      <div class="page-width utility-bar__grid">
        <div class="announcement-bar" role="region" aria-label="Announcement">
          <p class="announcement-bar__message h5">
                <span>Welcome to our store</span>
          </p>
        </div>
      </div>
    </div>  
    {%- endif -%}

Please add your shopify product ID that you want announcement bar appear

[Dan-From-Ryviu · Accepted solution]

Sorry, please add code below header group.

You can see your product ID when opening that product in your Shopify admin, check the number after /product/ part is product ID 

[Dan-From-Ryviu · Accepted solution]

Hi @dogand 

You can do that by going to your Online store > Themes > Edit code > open theme.liquid file, find this line of code 

{% sections 'header-group' %}

Add this code below this line of code above 

    {%- if product.id == your shopify product ID  -%}
    <div class="utility-bar color-background-1 gradient utility-bar--bottom-border">
      <div class="page-width utility-bar__grid">
        <div class="announcement-bar" role="region" aria-label="Announcement">
          <p class="announcement-bar__message h5">
                <span>Welcome to our store</span>
          </p>
        </div>
      </div>
    </div>  
    {%- endif -%}

Please add your shopify product ID that you want announcement bar appear

[dogand]

Hi @Dan-From-Ryviu 

Just to clarify, do I add the code below or above the header group code? Also how would I add my product ID?

Thank you for your help!

[Dan-From-Ryviu · Accepted solution]

Sorry, please add code below header group.

You can see your product ID when opening that product in your Shopify admin, check the number after /product/ part is product ID 

[dogand]

@Dan-From-Ryviu how would I add this product ID to the code? and where in the code?

[Dan-From-Ryviu · Accepted solution]

Please check this image