Dawn Theme - custom tag for certain products on Collection all pages - metaobjects?

[xnyjyh]

Hello, how can I add a custom text to only "Certain products" on all Collection pages the product is in?

Like image below ...

[WalkYourStyle · Accepted solution]

1)

One way you can do this is by going to your Theme -> Edit Code and locate inside the Sections folder a file named  something like  'card-product.liquid', then find the element card__information at around line 148 ,and add this code inside the card__information element.

{% if card_product.handle == 'product-handle' %}
<div class="custom-product-tag">Customize</div>
{% endif %}

Then you can style the text according to your preferences

2)

Another way you can do it is by using pseudo elements. 

Firstly you would need to find the element with classname card__information which looks like this inside the 'card-product.liquid'

<div class="card__information">
</div>

And update the class name to this

<div class="card__information {% if card_product.title == 'Product-Title' %}customizable{% endif %}">
</div>

Then inside the Assets Folder locate the 'component-card.css' and at the bottom at this code

.card__information{
  position: relative;
}
.card__information .customizable::before{
  content: 'Customize';
  position: absolute;
  top: 0;
  left: 0;
  color: orange;
  font-size: 13px;
}

3)

A third way you can do this is to create a product metafield with a name for example 'customizable product', and then go to the products you want to add the 'Customize' text and add it to the metafield.
Then go to the element with class name 'card__information' and add this element at the start of the element.

{% assign customizable_product = card_product.metafields.custom.customizable-product.value %}
{% if customizable_product != blank %}
  <div class="customizable-product">{{ customizable_product }}</div>
{% endif %}

[WalkYourStyle · Accepted solution]

Hi and sorry for the delayed response you can do that by including more cases inside the if statement like this

{% if card_product.handle == 'A' or card_product.handle == 'B' or card_product.handle == 'C' %}
<div class="custom-product-tag">Customize</div>
{% endif %}

or this way

{% assign custom_handles = "A,B,C" | split: "," %}
{% if custom_handles contains card_product.handle %}
  <div class="custom-product-tag">Customize</div>
{% endif %}

[WalkYourStyle]

Please share your website's URL with us, if you would.

[Shadab_dev]

@xnyjyh i believe on the section that's used to display product we can check the title of the product of it matches the product we want to add the text in , we can add a small p tag underneath with that text.

There's two things though 

• Do you want it to just say customize in so same text under all the occurrences?
• Secondly it's just a normal text right not clickable or something, asking this because it says customize so just making sure no popup or anything appears in the click of it. Ri8?

And are you using dawn's latest version which version 15?

Thanks

[xnyjyh]

Just text, not linked. version 12 dawn. only on products I need it on. only 2 so far I need it on

[Shadab_dev]

@xnyjyh will update you with a solution when I am done 

Thanks

[WalkYourStyle]

So you want something like this ?

[xnyjyh]

Yes, but only on certain products. the product I want them on are hidden right now as they are quiet ready for live.

[WalkYourStyle · Accepted solution]

1)

One way you can do this is by going to your Theme -> Edit Code and locate inside the Sections folder a file named  something like  'card-product.liquid', then find the element card__information at around line 148 ,and add this code inside the card__information element.

{% if card_product.handle == 'product-handle' %}
<div class="custom-product-tag">Customize</div>
{% endif %}

Then you can style the text according to your preferences

2)

Another way you can do it is by using pseudo elements. 

Firstly you would need to find the element with classname card__information which looks like this inside the 'card-product.liquid'

<div class="card__information">
</div>

And update the class name to this

<div class="card__information {% if card_product.title == 'Product-Title' %}customizable{% endif %}">
</div>

Then inside the Assets Folder locate the 'component-card.css' and at the bottom at this code

.card__information{
  position: relative;
}
.card__information .customizable::before{
  content: 'Customize';
  position: absolute;
  top: 0;
  left: 0;
  color: orange;
  font-size: 13px;
}

3)

A third way you can do this is to create a product metafield with a name for example 'customizable product', and then go to the products you want to add the 'Customize' text and add it to the metafield.
Then go to the element with class name 'card__information' and add this element at the start of the element.

{% assign customizable_product = card_product.metafields.custom.customizable-product.value %}
{% if customizable_product != blank %}
  <div class="customizable-product">{{ customizable_product }}</div>
{% endif %}

[xnyjyh]

Awesome, ok ill try it our soon. just about to log off now! ill be sure to like and accept if it works 🙂

[xnyjyh]

Which would be best in case there are more than 1 product that need this tag? I'm guess the 3rd one?

[xnyjyh]

#1 and #2 does not work, and I don't know metafields good enough to do this one.

[WalkYourStyle]

The 3rd way in my opinion is the best and easiest, because you get to work with metafields which are essential and it you dont' have to check for every handle. 

[xnyjyh]

one last thing... i got the first #1 to work, but how can I add more than 1 handle in the same IF?

[WalkYourStyle · Accepted solution]

Hi and sorry for the delayed response you can do that by including more cases inside the if statement like this

{% if card_product.handle == 'A' or card_product.handle == 'B' or card_product.handle == 'C' %}
<div class="custom-product-tag">Customize</div>
{% endif %}

or this way

{% assign custom_handles = "A,B,C" | split: "," %}
{% if custom_handles contains card_product.handle %}
  <div class="custom-product-tag">Customize</div>
{% endif %}

[xnyjyh]

I cant seem to get it too work. the first one :

{% if card_product.handle == 'A' or card_product.handle == 'B' or card_product.handle == 'C' %}
<div class="custom-product-tag">Customize</div>
{% endif %}

This is what I did and I'm sure I did it wrong haha:

{% if card_product.handle == 'howah-crew-socks' == 'howah-gel-orthotic-insoles' %}
<div class="customize">Customize</div>
{% endif %}

[WalkYourStyle · Accepted solution]

You are almost correct. In the if statement when you check for multiple conditions like `card_product.handle == 'howah-crew-socks' ` or `card_product.handle == 'howah-gel-orthotic-insoles' ` you need to use logical operators such as or(||), and(&&). In your case what you want to do is to check if the product handle is 'howah-crew-socks' or if the product handle is 'howah-gel-orthotic-insoles'. So the corrected version of your statement is 

{% if card_product.handle == 'howah-crew-socks' or card_product.handle == 'howah-gel-orthotic-insoles' %}
<div class="customize">Customize</div>
{% endif %}

 So you need seperate the cases with 'or' and you can't do this: 

card_product.handle == 'howah-crew-socks' == 'howah-gel-orthotic-insoles'