Announcement Bar Image

Solved
djrodas08
New Member
4 0 0

Hello!

 

I am trying to place an image as my announcement bar background rather than a solid color. I cannot figure out how to do this, I've searched everywhere!  Any suggestions are appreciated! 

Thanks 🙂

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
11620 1816 2321

This is an accepted solution.

Hello @djrodas08 ,
Please add this code at the bottom of theme -> edit code -> assets -> theme.scss.liquid file

.announcement-bar__message {
	font-weight: 600;
	font-size: 16px;
}
.announcement-bar {
	background-image: url("https://cdn.shopify.com/s/files/1/0272/0766/3715/files/candles231.png?v=1571192685");
}

For more query feel free to direct communicate .

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Nick
Community Moderator
Community Moderator
4510 433 981

This is an accepted solution.

Hi @djrodas08,

 

Nick here from Shopify. 

 

@oscprofessional got it right here. Our theme support team gave it a quick test and can confirm it works. You can see this from the screenshot below testing it out: 

 

19-10-wxzon-as8jk

 

 

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 11 (11)
oscprofessional
Shopify Partner
11620 1816 2321

Hello 

Please share your site url.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
djrodas08
New Member
4 0 0
www.whiteivoryco.com

It is still in maintenance mode
oscprofessional
Shopify Partner
11620 1816 2321

This is an accepted solution.

Hello @djrodas08 ,
Please add this code at the bottom of theme -> edit code -> assets -> theme.scss.liquid file

.announcement-bar__message {
	font-weight: 600;
	font-size: 16px;
}
.announcement-bar {
	background-image: url("https://cdn.shopify.com/s/files/1/0272/0766/3715/files/candles231.png?v=1571192685");
}

For more query feel free to direct communicate .

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Nick
Community Moderator
Community Moderator
4510 433 981

This is an accepted solution.

Hi @djrodas08,

 

Nick here from Shopify. 

 

@oscprofessional got it right here. Our theme support team gave it a quick test and can confirm it works. You can see this from the screenshot below testing it out: 

 

19-10-wxzon-as8jk

 

 

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

djrodas08
New Member
4 0 0

Thanks so much! It worked. I changed the picture to a different one, now I am just wondering how I can change the size of the image, so it does not appear so zoomed

ike1
New Member
4 0 0

Hi Nick how do make this the image for the announcement bar. How would I go about using the code? I added it to the bottom of the assets code and nothing happened.

 OT - Who Header.png

Nick
Community Moderator
Community Moderator
4510 433 981

Hi @ike1,

I wouldn't be very proficient or comfortable with code so I'm not 100% sure about this. Can you share a link to your store and let me know what theme you are using and I can ask someone in our theme support team about it for you? Let me know! 

Alternatively, if you wanted to speak to someone on our support team about this in real-time, you could reach out here too

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

rohan1986
New Member
1 0 0

How to make the image responsive?

Nick
Community Moderator
Community Moderator
4510 433 981

Hi @rohan1986,

As I mentioned above, I am not comfortable or proficient with coding or changes like making images on the announcement bar responsive. I spoke to a colleague of mine who mentioned you could adjust the styling of the bar with media queries so it reacts/ behaves differently when viewed on different sized screens with a guide here. 

You could also look into hiring someone to do this for you also. It seems like a small enough task which one of the Shopify Experts could do for you. 

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

valentin27
New Member
1 0 0

Any idea how to change the background to an image on Prestige Theme ? 

I tried to piece of code mentioned here above but it is not working. 

Thanks!

 

Nick
Community Moderator
Community Moderator
4510 433 981

Hi @valentin27,

If the solution in the thread isn't working, I'd recommend reaching out to the theme developers of Prestige directly (Maestrooo)who might be able to help. You can contact them directly here. If this doesn't fall under their help scope, your best next step could be to ask a Shopify Expert as a small task

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog