Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape
Blog

Adding A "New Arrival" Badge Based On Tags In Dawn Theme

If you are after adding new product badges similar to the Shopify default "SALE" and "SOLD OUT", we've added the "New Arrival" badges.

You just need to add these tags to your products and the badges( New Arrival ) will display.

Step 1:- First go to theme and Edit code and open the card-product.liquid file and find the <div class="card__badge {{ settings.badge_position }}"> section 

in div class find the line no 98 {{ settings.sale_badge_color_scheme }}

and paste the below code after line no 98

 

 {%- elsif card_product.tags contains 'new arrival' -%}

 <span class="card__badge--new">{{ 'New Arrival' }}</span> 

 

Before the div ending with {%- endif -%}, add the following code to a fresh line above

You should replace 'new' with the tag that you wish to pick up in the logic.  

You should also replace 'New Arrival' (on the second line between the double curly braces)  with the actual text that you want to appear in the badge. 

once you save your code looks like this.

 

Step 2:- Now open the component-rating.css file within the theme code

and paste the below CSS code

.card__badge--new {

    position: absolute;

    display: inline-block;

    line-height: 1;

    text-align:center;

    font-size: 1.2rem;

    left: .5rem;

    top: .5rem; 

    background-color: #9fb18e ;

    color:white;

    padding: .6rem 1.3rem;

  }  

 

you can change the style as per your requirments.

Now check that the products you have tagged with the term above are now showing the badge (head to a collection to view this) here we add tags:- New Arrival you can change as per your requirments.