How can I create new a product badge that says 'NEW' - Dawn theme

Shopify Discussion
1

Hi,

I’m currently using the dawn theme and have the 2 default badges which are SALE and SOLD OUT which change automatically.

Is there any way to create a new badge called ‘NEW’ so that products I choose have this badge displayed? And if so, can it be done by copy and pasting code into my custom .css file?

My store is saikocollective.com. This is the code that I currently have for my current badges. I’d like the ‘NEW’ badge to be the same colour, size and position as the SALE badge if possible.

/* Sale badge (product page) */
.product .badge[class*='sale']{
background: red !important;
color: #ffffff !important;
font-size: 14px !important;
}

/* Sold out badge (product page) */
.product .badge[class*='sold']{
background: #000000 !important;
color: #ffffff !important;
font-size: 14px !important;
}

@media (max-width: 749px){
/* Sale badge (product page) */
.product .badge[class*='sale']{
font-size: 13px !important;
}

/* Sold out badge (product page) */
.product .badge[class*='sold']{
font-size: 13px !important;
}
}

/* Sale badge top left */
.card__badge {

justify-self: flex-start!important;

align-self: auto !important;

grid-row-start: auto !important;

}

/* Sale badge square */
.badge{
border-radius: 0; top: 5; left: initial; right: 5; padding: 5px;
}

Thanks!

2

Hi thanks for this response! Will this change the new badge to be the same as my current badges? I made some edits to the positioning, size and colours so it’s slightly different to the default

3

Ankur, I use the TURBO Theme, and I was looking as well to add the NEW badge on the product page, I followed carefully your instructions but after I insert the code

{% if product.tags contains ‘new’ %}
{% include ‘product-badge-new’ %}
{% endif %}

anywhere in the product.liquid I receive the following error:

Liquid error (snippets/product line 190): include usage is not allowed in this context

I would appreciate if you could help out.

Thanks

Marco

4

Try ‘Render’ instead of ‘include’ - this should work.

5

Can you help me getting the badge working? Where do i put the codes? i tried following the instructions but they don’t display for me.

6

Hi @VastVibes

I created a tutorial for this: https://youtu.be/0OjLBnyTyus?si=DxZODP2buUg0cUcc

3 Likes
7

Hi @MarcoM0857

Not sure if you still need help with this, but I created a tutorial: https://youtu.be/0OjLBnyTyus?si=DxZODP2buUg0cUcc

1 Like
8

Hi @fadi_yousif ,

Your tutorial was super helpful, is there a way to edit the size of the badge so when you are on the mobile view it doesnt cover up the product?

Screenshot 2024-05-29 at 9.00.29 AM.png
Screenshot 2024-05-29 at 9.00.29 AM.png614×756 74.7 KB

Thank you!

9

Hi @Kicosbo

Glad you found it helpful!

You would need to write a CSS media query to target mobile devices and adjust the size.

Good luck!

10

Hi,

I also watched your tutorial video on facebook to change the font color on my product tag but I have tried it several times and it I cannot get it to change. Are you able to assist me?

11

I would need to take a look at the theme code to fix it, but I only do paid work as a freelancer

12

No problem, I will find another solution.

Thanks!

1 Like
13

Hi @saikocollective ,

Please refer the below video to implement unlimited badges created using the metaobject and their placements.

Hope video will help others as well.

14

Hi @saikocollective ,

Please refer the below video to implement multiple badges on card.