Here are a few samples that I created.
Paste these codes in your Custom CSS first:
.custom-store-message--Shooting-Star{
background: linear-gradient(to right, #fff, #8bc34a);
width: 100%;
padding: 2px 25px;
margin-top: 5px;
border-radius: 20px;
color: #fff;
font-weight: 500;
text-align: right;
font-style: italic;
}
.custom-store-message-Simple-Style {
background: linear-gradient(to right, #642b73, #c6426e);
width: fit-content;
padding: 2px 25px;
border-radius: 2px;
margin-top: 5px;
font-weight: 500;
color: #fff;
}
.custom-store-message-Simple-Style-Full-Width
{
background: linear-gradient(to right, #ff7e5f, #feb47b);
width: 100%;
padding: 2px 5px;
border-radius: 2px;
margin-top: 5px;
font-weight: 500;
color: #fff;
}
Then on your Custom HTML block, you can simply add a div with a message and a class like this:
<div class="custom-store-message-Simple-Style">60% Off 🥳</div>
How it would look:
===
More examples:
<div class="custom-store-message--Shooting-Star">60% Off 🥳</div>
Screenshot:
===
<div class="custom-store-message-Simple-Style-Full-Width">60% Off 🥳</div>
Screenshot:
