How do I code a custom badge in the Prestige theme?

[Boogie_dk]

Hi, can somebody help me how to code a custom badge in the Prestige theme? I am already using the custom badge that follows with the theme on all products.

The shop is here: https://peter-solberg.myshopify.com/ and you can access it with the code: Bogiliam2015

[LuffyOnePiece]

Hi @Boogie_dk ,

We need to create a metafield for the badge and show the badge to the products.

Thank you

[Boogie_dk]

Thank you for your answer and I know, but I am already using the custom badge that came with the theme. I need help how to code a new custom badge.

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Here is the solution:

1.Create product metafield:

2.Go to Online Store->Theme->Edit code

3.Open product-item.liquid file and find this code 

 {%- if product.available -%}  
          {%- if product.compare_at_price > product.price -%}
            <span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ 'product.labels.on_sale' | t }}</span>
          {%- endif -%}
        {%- else -%}
          <span class="ProductItem__Label ProductItem__Label--soldOut Heading Text--subdued">{{ 'product.labels.sold_out' | t }}</span>
        {%- endif -%}

Replace with:

 {% if product.metafields.custom.custom_badge !=blank %}
            <span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ product.metafields.custom.custom_badge }}</span>
          {% else %}
        {%- if product.available -%}  
          {%- if product.compare_at_price > product.price -%}
            <span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ 'product.labels.on_sale' | t }}</span>
          {%- endif -%}
        {%- else -%}
          <span class="ProductItem__Label ProductItem__Label--soldOut Heading Text--subdued">{{ 'product.labels.sold_out' | t }}</span>
        {%- endif -%}
          {% endif %}

You have added custom product badge text here :

Then your custom product badge will be update on website like this: 

Hope this helps.

If you have any further queries, please let me know.

Regards,

San

[Boogie_dk]

Hi again, an thank you for your answer. I have created the Meta Field but the Prestige theme does not seem to have a product-item.liquid file. Do you know what it can be named instead?

[Boogie_dk]

The theme only has these product files:

[INA_MSWEB]

Hello,

Thank you for your response.

You can open product-card.liquid and proceed. 

If you have any further questions, please let me know.

Regards,

San

[Boogie_dk]

Hi again, the code is not there 😕 Maybe another file? 

[Boogie_dk]

Maybe in this file somewhere?:

[INA_MSWEB]

Hello,

Thank you for getting back to me.

You can remove the code from 69 to 72 and insert the provided code.

If you have any further questions do let me know.

Regards,

San

[Boogie_dk]

Then it messes with the sale badge (the purple badge on the screendump and adds the text "Off" on all products:

[INA_MSWEB]

Hello,

Thank you for your response.

Please share the screenshot of the coding page where you have added it. Maybe we can find the error.

If you have further questions, please let me know.

Regards,

San

[Boogie_dk]

Thank you for your answer - please see the attached screendump.

[INA_MSWEB]

Hello,

Thank you for sharing the screenshot.

Please paste the code given above 68 number line and cut the code from line no. 68 to 85 and paste in {% else %} condition.

{% if product.metafields.custom.custom_badge !=blank %}
<span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ product.metafields.custom.custom_badge }}</span>
{% else %}
{% endif %}

Remember this product.metafields.custom.custom_badge this should match with your own custom meta field.

If you case any issue, please let me know.

Regards,

San

[Boogie_dk]

Thank you.

Can you perhapse copy paste into this code so I am sure it is done correctly?

{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
PRODUCT BADGES COMPONENT
----------------------------------------------------------------------------------------------------------------------

This component is used in product listing and product page to render the badges of a given product

********************************************
Supported variables
********************************************

* product: the product to render the badges
* variant: the specific variant to show the badge from
* vertical: if set to true, the badges are outputted vertically
* types: the types of badge to output. Can be "custom", "sold_out" or "discount" (or a combination separated by comma). If nothing is set, all badges are outputted.
* form_id: an optional form ID to use to update the badges when a given variant changes
{%- endcomment -%}

{%- liquid
assign badge_types = types | default: 'custom, sold_out, discount' | split: ','
assign variant = variant | default: product.selected_or_first_available_variant
-%}

{%- assign is_badge_list_hidden = true -%}

{%- capture badges -%}
{%- for badge_type in badge_types -%}
{%- assign stripped_badge_type = badge_type | strip -%}

{%- case stripped_badge_type -%}
{%- when 'custom' -%}
{%- assign custom_badges = product.metafields.custom.badges.value -%}

{%- for custom_badge in custom_badges -%}
{%- assign is_badge_list_hidden = false -%}
<span class="badge badge--custom badge--{{ custom_badge | handle }}">{{ custom_badge }}</span>
{%- endfor -%}

{%- when 'sold_out' -%}
{%- if settings.show_sold_out_badge -%}
{%- if variant.available == false or form_id != blank -%}
{%- unless variant.available -%}
{%- assign is_badge_list_hidden = false -%}
{%- endunless -%}

<sold-out-badge {% if variant.available %}hidden{% endif %} {% if form_id != blank %}form="{{ form_id }}"{% endif %} class="badge badge--sold-out">
{{- 'product.general.sold_out_badge' | t -}}
</sold-out-badge>
{%- endif -%}
{%- endif -%}

{%- when 'discount' -%}
{%- if settings.show_discount -%}
{%- assign is_variant_on_sale = false -%}

{%- if variant.compare_at_price > variant.price -%}
{%- assign is_variant_on_sale = true -%}
{%- assign is_badge_list_hidden = false -%}
{%- endif -%}

{%- if product.compare_at_price > product.price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ variant.compare_at_price | minus: variant.price | money }}{%- endcapture -%}
{%- endif -%}

<on-sale-badge {% if form_id != blank and is_variant_on_sale == false %}hidden{% endif %} {% if settings.show_discount %}discount-mode="{{ settings.discount_mode | escape }}"{% endif %} {% if form_id != blank %}form="{{ form_id }}"{% endif %} class="badge badge--on-sale">
{%- if form_id == blank and is_variant_on_sale == false or product.compare_at_price_varies -%}
{{- 'product.general.on_sale_badge' | t -}}
{%- else -%}
{{- 'product.general.discount_badge_html' | t: savings: savings -}}
{%- endif -%}
</on-sale-badge>
{%- endif -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endcapture -%}

{%- if badges != blank -%}
<badge-list {% if form_id != blank and is_badge_list_hidden %}hidden{% endif %} class="badge-list {% if vertical %}badge-list--vertical{% endif %}">
{{- badges -}}
</badge-list>
{%- endif -%}

[INA_MSWEB]

Hello,

Thank you for your response.

Please find the code as requested:

{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
PRODUCT BADGES COMPONENT
----------------------------------------------------------------------------------------------------------------------
This component is used in product listing and product page to render the badges of a given product
********************************************
Supported variables
********************************************
* product: the product to render the badges
* variant: the specific variant to show the badge from
* vertical: if set to true, the badges are outputted vertically
* types: the types of badge to output. Can be "custom", "sold_out" or "discount" (or a combination separated by comma). If nothing is set, all badges are outputted.
* form_id: an optional form ID to use to update the badges when a given variant changes
{%- endcomment -%}
{%- liquid
assign badge_types = types | default: 'custom, sold_out, discount' | split: ','
assign variant = variant | default: product.selected_or_first_available_variant
-%}
{%- assign is_badge_list_hidden = true -%}
{%- capture badges -%}
{%- for badge_type in badge_types -%}
{%- assign stripped_badge_type = badge_type | strip -%}
{%- case stripped_badge_type -%}
{%- when 'custom' -%}
{%- assign custom_badges = product.metafields.custom.badges.value -%}
{%- for custom_badge in custom_badges -%}
{%- assign is_badge_list_hidden = false -%}
<span class="badge badge--custom badge--{{ custom_badge | handle }}">{{ custom_badge }}</span>
{%- endfor -%}
{%- when 'sold_out' -%}
{%- if settings.show_sold_out_badge -%}
{%- if variant.available == false or form_id != blank -%}
{%- unless variant.available -%}
{%- assign is_badge_list_hidden = false -%}
{%- endunless -%}
<sold-out-badge {% if variant.available %}hidden{% endif %} {% if form_id != blank %}form="{{ form_id }}"{% endif %} class="badge badge--sold-out">
{{- 'product.general.sold_out_badge' | t -}}
</sold-out-badge>
{%- endif -%}
{%- endif -%}
{%- when 'discount' -%}
{%- if settings.show_discount -%}
{%- assign is_variant_on_sale = false -%}
{%- if variant.compare_at_price > variant.price -%}
{%- assign is_variant_on_sale = true -%}
{%- assign is_badge_list_hidden = false -%}
{%- endif -%}
{%- if product.compare_at_price > product.price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}{{ variant.compare_at_price | minus: variant.price | money }}{%- endcapture -%}
{%- endif -%}
{% if product.metafields.custom.custom_badge !=blank %}
<span class="ProductItem__Label ProductItem__Label--onSale Heading Text--subdued">{{ product.metafields.custom.custom_badge }}</span>
{% else %}
<on-sale-badge {% if form_id != blank and is_variant_on_sale == false %}hidden{% endif %} {% if settings.show_discount %}discount-mode="{{ settings.discount_mode | escape }}"{% endif %} {% if form_id != blank %}form="{{ form_id }}"{% endif %} class="badge badge--on-sale">
{%- if form_id == blank and is_variant_on_sale == false or product.compare_at_price_varies -%}
{{- 'product.general.on_sale_badge' | t -}}
{%- else -%}
{{- 'product.general.discount_badge_html' | t: savings: savings -}}
{%- endif -%}
</on-sale-badge>
{% endif %}
{%- endif -%}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endcapture -%}
{%- if badges != blank -%}
<badge-list {% if form_id != blank and is_badge_list_hidden %}hidden{% endif %} class="badge-list {% if vertical %}badge-list--vertical{% endif %}">
{{- badges -}}
</badge-list>
{%- endif -%}

If you have any concern, please let me know.

Regards,

San

[Boogie_dk]

Hi again and thank you for your efforts. But the provided code removes the Sale badge and shows a text without a badge. And sorry for taking your time:

[INA_MSWEB]

Hello,

Thank you for your response.

We can fix it for you as it a very small task.

You can connect with us by DM or email mentioned in signature.

If you have any queries do let me know.

Regards,

San