Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.

Re: Make a custom badge (Prestige theme)

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

Boogie_dk
Shopify Partner
24 0 4

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

 

Skærmbillede 2024-04-13 kl. 10.26.47.png

Replies 17 (17)

LuffyOnePiece
Shopify Partner
645 93 117

Hi @Boogie_dk ,

 

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

 

Thank you

 

Sandeep Pangeni
Need help with your store? [email protected]
For quick response, Contact In WhatsApp +9779867521184
Boogie_dk
Shopify Partner
24 0 4

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
Shopify Partner
1281 144 166

Hello,

 

I am San from MS Web Designer.

 

Here is the solution:

1.Create product metafield:

SAN_MSWEB_0-1713167849445.png

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 :

SAN_MSWEB_1-1713167966118.png

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

SAN_MSWEB_2-1713167982925.png

Hope this helps.

 

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

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

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
Shopify Partner
24 0 4

The theme only has these product files:

 

Skærmbillede 2024-04-15 kl. 12.19.08.png

INA_MSWEB
Shopify Partner
1281 144 166

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

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

Boogie_dk
Shopify Partner
24 0 4

Maybe in this file somewhere?:

 

Skærmbillede 2024-04-15 kl. 12.29.27.png

INA_MSWEB
Shopify Partner
1281 144 166

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

 

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

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

 

Skærmbillede 2024-04-15 kl. 12.55.50.png

INA_MSWEB
Shopify Partner
1281 144 166

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

 

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

Skærmbillede 2024-04-15 kl. 21.19.26.png

 

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

INA_MSWEB
Shopify Partner
1281 144 166

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

 

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

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
Shopify Partner
1281 144 166

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

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

Boogie_dk
Shopify Partner
24 0 4

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:

 

Skærmbillede 2024-04-16 kl. 13.10.48.png

INA_MSWEB
Shopify Partner
1281 144 166

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

 

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: [email protected]
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin