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

Solved

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

xnyjyh
Explorer
244 0 13

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

Like image below ...

 

customize.png

Accepted Solutions (3)
WalkYourStyle
Tourist
120 20 19

This is an 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 %}

 

 

View solution in original post

WalkYourStyle
Tourist
120 20 19

This is an 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 %}

 

View solution in original post

WalkYourStyle
Tourist
120 20 19

This is an 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'

View solution in original post

Replies 15 (15)

WalkYourStyle
Tourist
120 20 19

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

Shadab_dev
Shopify Partner
159 5 18

@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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
xnyjyh
Explorer
244 0 13

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

Shadab_dev
Shopify Partner
159 5 18

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

 

Thanks

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks

WalkYourStyle
Tourist
120 20 19

So you want something like this ?

custoize.PNG

xnyjyh
Explorer
244 0 13

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

WalkYourStyle
Tourist
120 20 19

This is an 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
Explorer
244 0 13

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

xnyjyh
Explorer
244 0 13

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

xnyjyh
Explorer
244 0 13

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

WalkYourStyle
Tourist
120 20 19

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
Explorer
244 0 13

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

WalkYourStyle
Tourist
120 20 19

This is an 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
Explorer
244 0 13

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
Tourist
120 20 19

This is an 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'