How to effectively use Metafield with Dawn theme?

Technical Q&A
1

I don’t understand how to work. I see video for add labels “new arrival” but with theme dawn doesn’t work. Need to add more code?

2

Hi @Nico38 ,

Please follow the steps below:

  • Step 1: You need to create Metafield for ‘new arrival’.

Screenshot.png
Screenshot.png999×860 25.8 KB

  • Step 2: You go to each product and add ‘new arrival’.

Screenshot.png
Screenshot.png1150×377 13.2 KB

  • Step 3: You go to ‘main-product.liquid’ file and add the code, it will display fine.

Code: {{ product.metafields.my_fields.new_arrival }}

Screenshot.png
Screenshot.png1167×283 12.6 KB

Hope it helps!

3
@LitExtension thx you and where inser this code, on bottom file?

How to customize label?

4

oh sorry on mobile don’t see image step by step i go try

5

Hi @Nico38 ,

Yes. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

6 
is there a specific place where to insert the code in main liquid?

@LitExtension

7

I am trying to do this with label new (sorry for my english i’m french)

https://www.youtube.com/watch?v=mpg8_CpiCJ4

8

Hi @Nico38 ,

Go to snippets > product-card.liquid file, find ‘card__badge’ and add code here:

Screenshot.png
Screenshot.png1205×588 54.3 KB

Code:

{{ product.metafields.my_fields.new_arrival }}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

9

Hi @Nico38 ,

Go to snippets > card-product.liquid file, find ‘card__badge’ and add code here:

Screenshot.png
Screenshot.png1299×516 41.1 KB

Code:

{%- if card_product.metafields.my_fields.new_arrival != blank -%}
  {{ card_product.metafields.my_fields.new_arrival }}
{%- endif -%}
10

it work fine !

please last help, how to customize placement and color ?

please have you got css For this ?

11

Hi @Nico38 ,

Go to Assets > base.css and paste this at the bottom of the file:

.card__badge .badge--top-left{
    position: absolute;
    top: calc(var(--card-image-padding) + 1rem);
    left: calc(var(--card-image-padding) + 1rem);
    background-color: #FBCF53;
    border-color: #FBCF53;
}