How can I restore the announcement bar code I deleted?

DashFlick
Tourist
7 0 3

I deleted the piece of code that allows you to have an announcement bar.

Could someone please give me that piece of code?

Thanks

Replies 2 (2)

oscprofessional
Shopify Partner
15897 2378 3084

@DashFlick  please check

 

Certainly, you can add an announcement bar to your Shopify store by adding the following code to your theme.liquid file in the Shopify admin. Here's how you can do it:

  1. Log in to your Shopify admin.

  2. In the left-hand menu, click on "Online Store," and then click on "Themes."

  3. On the Themes page, find the "Actions" button for your current theme and click on it. From the dropdown menu, select "Edit code."

  4. In the theme code editor, locate the theme.liquid file on the left-hand side. Click on it to open the file.

  5. Scroll through the code until you find the <header> section. This is typically where the announcement bar is located.

  6. If you deleted the code for the announcement bar, you can add the following code back in:

 

html

 

 

 

<div id="announcement-bar" class="announcement-bar"> <div class="announcement-bar__message"> Your announcement text goes here. <a href="#" class="announcement-bar__link">Shop now</a> </div> </div>
 

Replace "Your announcement text goes here" with your actual announcement message, and if you want to link to a specific page, replace "#" in the <a href="#"> with the URL of the page you want to link to.

  1. After adding the code, click the "Save" button to save your changes.

  2. To style the announcement bar, you may need to add some CSS in your theme's stylesheet. You can do this by clicking on the "Assets" folder in the theme code editor and then selecting your theme's stylesheet (usually named "theme.scss.liquid" or similar). Add your custom CSS styles there to control the appearance of the announcement bar.

  3. Finally, make sure to test your store to ensure that the announcement bar displays correctly and functions as expected.

Remember to follow best practices when customizing your theme code, and always back up your theme before making changes to avoid any unintended issues.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
DashFlick
Tourist
7 0 3

Thankyou, worked great. Though the announcement bar is moving. Could you please give me the liquid where the announcement bar is stationary?