Announcement Bar Image

[djrodas08]

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 🙂

[oscprofessional]

Hello djrodas08,

Please share your site url.

[djrodas08]

www.whiteivoryco.com

It is still in maintenance mode

[oscprofessional · 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 .

[Nick · 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: 

[djrodas08]

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]

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.

 

[Nick]

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. 

[rohan1986]

How to make the image responsive?

[Nick]

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. 

[valentin27]

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]

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.