Announcement Bar Image

Solved
Highlighted
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 :)

0 Likes
Highlighted

Hello 

Please share your site url.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
4 0 0
www.whiteivoryco.com

It is still in maintenance mode
0 Likes
Highlighted

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 .

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Community Moderator
Community Moderator
3386 252 602

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

0 Likes
Highlighted
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

0 Likes
Highlighted
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

0 Likes
Highlighted
Community Moderator
Community Moderator
3386 252 602

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

0 Likes
Highlighted
New Member
1 0 0

How to make the image responsive?

0 Likes
Highlighted
Community Moderator
Community Moderator
3386 252 602

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

0 Likes