Custom CSS to overlay badge on existing product image

Technical Q&A
1

Hi,

We are trying to add a custom badge to overlay on a product image using CSS code.

The code displays correctly in the preview but it gives us an error message when trying to save:

“Online store editor session can’t be published”.

This is the code we’re using which has been modified from an example we found on a community forum:

.product__media-item:first-child .product__modal-opener:after {

position: absolute;

content: “”;

background: transparent

url(https://cdn.shopify.com/s/files/1/0635/0926/6646/files/Local_Delivery_or_Collection_Only_Template.png?v=1678965267)

no-repeat left/contain;

width: 100%;

height: 100%;

top: 1px;

left: 1px;

pointer-events: none;

}

In the first instance we would like to at least be able to apply the code to an individual item but ultimately we would prefer to be able to apply it to a template for a collection of items.

Any guidance would be greatly appreciated, thanks.

2

At the moment there is a bug that doesn’t allow to save CSS blocks inside the theme customizer when CSS pseudo-elements like :after and :before are defined in the code.

You should move the code in the theme CSS file. You can put the custom CSS code at the end of the file for easier recognition if you need to update the theme in the future.

This bug will probably be solved soon, but in the meanwhile, it’s the only way I know.