Adding a Christmas Decorated Announcement Bar on Shopify
Share
To add a Christmas decorated announcement bar to your Shopify store with a promotional campaign, create a regular announcement bar, edit its text as you like and link a promotional page. After that upload a background image for the bar and copy its URL. Go to the announcement bar customization bar, scroll down, expand the "Custom CSS" section and write custom CSS code.
Here's my background image:
Here's my custom CSS code:
.utility-bar {
background-image:
url(https://cdn.shopify.com/s/files/1/0839/2255/1112/files/winter-hoidays.png?v=1734368280);
background-position: center;
background-size: contain;
background-attachment: unset;
}
.utility-bar .announcement-bar__link {
color: white;
}
.utility-bar .announcement-bar__message {
background-color: rgb(242, 70, 27);
color: white;
padding-left: 30px;
padding-right: 30px;
border-radius: 30px;
font-size: 14px;
}