How to add a 'New Color!' badge to specific products in Prestige theme?

Store Design
1

Hi,

I want to code specific products to have “New Color!” when viewing on collection pages.

How can I do this?

https://amandauprichard.com/

1 Like
2

Hi @Amanda_Uprichar ,

Do you want to display a badge just like “Sale” badge on the collection page?

3

While this isn’t a super complicated code edit, if you are not comfortable making changes to code you’re probably going to want to hire a developer to do it for you.

The way that I would approach it would be to tag the product something like “new color”.

Then in collection-template.liquid (probably the name of the file you want, it can be different depending on the theme, but it’s a strong convention) you’re going to want to look for your product loop. It’ll look something like this:

{% for product in collection.products %}

{% endfor %}

This is just general code, it’s not going to be exactly what yours looks like. Inside there you’re going to have to set some conditions to check for a product tag and then render something based on that tag. So:

{% for product in collection.products %}

{% if product.tags contains 'new color' %}
NEW COLOR!

{% endif %}

{% endfor %}

Then you’ll need to set some CSS to position that over your product:

.product-wrapper {
position: relative;
}
.color-badge {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
top: 10px;
right: 10px;
}

In this case that would give you a dark grey circle in the top right of your product. This is all just kind of theory though, where you put all this depends entirely on your individual theme code.