Multiple Design Product Badges

Multiple Design Product Badges

Log in or Sign up to ensure access to purchased code across multiple devices.

Multiple Design Product Badge

One Time Purchase!

$29.99
Only
Refresh after a purchase


Related Articles

Adding Countdown Snippet to Product Page

Adding Countdown Snippet to Product Page

Adding Countdown Snippet to Product Page

Countdown Section for Any Shopify theme

Countdown Section for Any Shopify theme

Countdown Section for Any Shopify theme

shopify dawn theme slider

How To Show Only Selected Variant Images - Dawn...

How To Show Only Selected Variant Images - Dawn...

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  ONLY. Works from lower version to version 11

Are you tired of the default badges provided by your Shopify 2.0 FREE theme? The following will help you customize the boring design of your badge. You can choose from seven (7) badge design, and also use your personalized image (PNG only) or svg as your badge. 

Product badges or labels help customers find what they are looking for with the eye catchy labels. Create custom badges using your own image or SVG or use our 7 designs.

Check DEMO store here💻. Password: made4uo

 What you are buying:

  • Assign any of the 7 Badge designs or image or SVG for each product
  • Code able to use personalized image (support PNG file only)
  • Code able to use the SVG file
  • Change the position of the badges
  • Change the badge color and the text color
  • Use metafield to customized the badges with your own text, design, and position
  • Make sure not to use longer texts for code to function well
  • Labels will show in featured collection section and collection page
  • Customize the label or badge per product

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

Setting up the metafield:

1. On your Admin Page, click the Settings on your left hand bottom corner

2. Click Metafields, then Products, then "Add defination"

3. Follow the metafield settings below. Words are case-senstive. Follow the green highlighted settings. Red is your own text or file name that you want to use. 

Metafield badge settings

4. Make sure to add the following in your preset choices.

badge-1
badge-2
badge-3
badge-4
badge-5
badge-6
badge-7
svg
image
top-left
top-right
top-center
bottom-left
bottom-right
bottom-center

 

5. You can add the text you want to appear in the badge as preset choice.

NOTE: Some of the badges will not be able to accommodate long texts. 

6. If you are using image (PNG only) or SVG, make sure to add the file first. Then add the name of the file in your metafield presets.

Adding the metafield in the product:

1. From your Admin Page, click Products, then choose the product you want to assign a metafield.
2. Scroll all the way down, until you see the metafield.

3. Click "Add item", to create three (3) tier metafield.

First tier, should be the text you want in a badge or if you are using PNG image or SVG, use the first tier to provide the file name. 

Second tier, the badge design. If you want to use image or SVG, make sure to click the image or SVG as your second tier.

Third tier, the badge position. Some of the badge design does not go with other position. 

Badge product metafield tier

Badge Designs with the corresponding available position:

Badge Design 1: top-left, top-right, top-center
Badge Design 2: All placements
Badge Design 3: top-left, top-right, top-center
Badge Design 4: top-left, top-right, top-center
Badge Design 5: top-left, bottom-left
Badge Design 6:  top-left, bottom-left
Badge Design 7: top-right
Image: All placements
SVG: All placements

 

Adding the files (PNG image or SVG):

1. From your Admin Page, click Online Store > Themes >Actions > Edit code.

2. In the Assets folder, click "Add a new asset". Upload a file, then "Add file." 

3. Find the file you want to add, then Open, click Done.

4. The file name must match to the text you provide in your first tier metafield. You can edit the name of the file by clicking the pencil. See image below

Change the name of the file

 See the metafield assigned that matches to the file name

 

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snippet folder, click "Add a new snippet", name it "product-badge" then place the code below. Make sure to click SAVE.

<style>
.card.card--product {
  overflow: visible;
}
.card__badge.badge-bottom-left {
  bottom: 1rem;
  left: 0;
}
.card__badge.badge-top-left {
  top: 1rem;
  bottom: unset;
  left: 0;
}
.card__badge.badge-bottom-right {
  bottom: 1rem;
  left: unset;
  right: 0;
}
.card__badge.badge-top-right {
  top: 1rem;
  bottom: unset;
  left: unset;
  right: 0;
}
.card__badge.badge-bottom-center {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.card__badge.badge-top-center {
  top: 1rem;
  bottom: unset;
  left: calc(50% - 1rem);
  transform: translateX(-50%);
}
.product-badge {
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}
.ribbon-badge-1 {
  position: relative;
  margin: -17px 5px 12px 15px;
  letter-spacing: 0.1rem;
}
.ribbon-badge-1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 5rem;
  clip-path: polygon(50% 25%, 0 0, 100% 0);
  border: unset;
  background: var(--badge-background);
  color: var(--badge-color);
  left: 0;
  top: 99%;
}
.ribbon-badge-1 span {
  position: relative;
  display: block;
  text-align: center;
  background: var(--badge-background);
  padding: 10px 10px 5px;
  border-top-right-radius: 8px;
  width: 100%;
}
.ribbon-badge-1 span:before,
.ribbon-badge-1 span:after {
  position: absolute;
  content: "";
  height: 6px;
  top: 0;
  background: var(--badge-background);
  filter: brightness(0.5);
}
.ribbon-badge-1 span:before {
  width: 6px;
  left: -6px;
}
.ribbon-badge-1 span:after {
  width: 8px;
  left: -8px;
  border-radius: 8px 8px 0 0;
}
.ribbon-badge-2 {
  position: relative;
  width: max-content;
  min-width: calc(100% - 8rem);
  max-width: 25ch;
  letter-spacing: 0.1rem;
  padding: 0.5rem 1.3rem 0.6rem;
  margin: 10px 35px 0px 35px;
  border-radius: 0px 0px 3px 3px;
  background: var(--badge-background);
  color: var(--badge-color);
}
.ribbon-badge-2:before,
.ribbon-badge-2:after,
.ribbon-badge-2 span:before,
.ribbon-badge-2 span:after {
  content: "";
  position: absolute;
  top: -5px;
}
.ribbon-badge-2:before,
.ribbon-badge-2:after {
  background: var(--badge-background);
  filter: brightness(0.8);
  height: 85%;
  width: 3rem;
  top: -15%;
}
.ribbon-badge-2:before {
  left: -3rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%);
}
.ribbon-badge-2:after {
  right: -3rem;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 50% 50%, 100% 0%);
}
.ribbon-badge-2 span:before,
.ribbon-badge-2 span:after {
  height: 15%;
  width: auto;
  top: -15%;
  aspect-ratio: 1;
  background: var(--badge-background);
  filter: brightness(0.5);
}
.ribbon-badge-2 span:before {
  left: -0.5px;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
}
.ribbon-badge-2 span:after {
  right: -0.5px;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.ribbon-badge-3 {
  width: 3rem;
  height: max-content;
  letter-spacing: -0.5rem;
  padding: 10px 10px 10px 0px;
  position: relative;
  text-align: center;
  border-top-right-radius: 3px;
  background: var(--badge-background);
  color: var(--badge-color);
  text-orientation: upright;
  writing-mode: vertical-rl;
  top: -2.2rem;
}
.ribbon-badge-3:before,
.ribbon-badge-3:after {
  content: "";
  position: absolute;
  height: 0;
}
.ribbon-badge-3:before {
  height: 0;
  width: 0;
  left: -6px;
  top: 0.1px;
  border-bottom: 6px solid var(--badge-background);
  border-left: 6px solid transparent;
  filter: brightness(0.5);
}
.ribbon-badge-3:after {
  width: 3rem;
  bottom: -15px;
  left: 0;
  border-width: 3rem;
  border-left: 15px solid var(--badge-background);
  border-right: 15px solid var(--badge-background);
  border-bottom: 15px solid transparent;
}
.ribbon-badge-4 {
  width: 3rem;
  height: max-content;
  letter-spacing: -0.5rem;
  padding: 10px 10px 10px 0px;
  position: relative;
  text-align: center;
  border-top-left-radius: 3px;
  background: var(--badge-background);
  color: var(--badge-color);
  text-orientation: upright;
  writing-mode: vertical-rl;
  top: -2.2rem;
}
.ribbon-badge-4:before,
.ribbon-badge-4:after {
  content: "";
  position: absolute;
  height: 0rem;
}
.ribbon-badge-4:before {
  width: 0;
  right: -6px;
  top: 0.1px;
  border-bottom: 6px solid var(--badge-background);
  border-right: 6px solid transparent;
  filter: brightness(0.5);
}
.ribbon-badge-4:after {
  width: 3rem;
  bottom: -15px;
  left: 0;
  border-width: 3rem;
  border-left: 15px solid var(--badge-background);
  border-right: 15px solid var(--badge-background);
  border-bottom: 15px solid transparent;
}
.ribbon-badge-5 {
  position: relative;
  top: 0;
  padding: 10px 10px 10px 5px;
  background: var(--badge-background);
  box-shadow: -1px 2px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-badge-5:before,
.ribbon-badge-5:after {
  content: "";
  position: absolute;
}
.ribbon-badge-5:before {
  width: 7px;
  height: calc(100% + 7px);
  top: 0;
  left: -6.5px;
  background: var(--badge-background);
  border-radius: 5px 0 0 5px;
}
.ribbon-badge-5:after {
  width: 5px;
  height: 5px;
  bottom: -5px;
  left: -4.5px;
  background: var(--badge-background);
  filter: brightness(0.5);
  border-radius: 5px 0 0 5px;
}
.card__badge.card__badge-6 {
  width: 100px;
  height: auto;
  aspect-ratio: 1;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card__badge.card__badge-6.badge-top-right {
  top: -5px;
  right: -5px;
}
.card__badge-6:before,
.card__badge-6:after {
  content: "";
  position: absolute;
  background: var(--badge-background);
  filter: brightness(0.5);
}
.card__badge-6:before {
  width: 10px;
  height: 5px;
  top: 0;
  left: 0;
  border-radius: 5px 5px 0px 0px;
}
.card__badge-6:after {
  width: 5px;
  height: 10px;
  right: 0px;
  bottom: 0;
  border-radius: 0px 5px 5px 0px;
}
.ribbon-badge-6 {
  width: 130px;
  height: 25px;
  padding: 5px 10px;
  position: absolute;
  top: -5px;
  right: 0px;
  margin: 0;
  z-index: 2;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg) translate(33%);
  outline: 1px dashed;
  box-shadow: 0 0 0 5px var(--badge-background), 0 20px 5px -20px #0009;
  background: var(--badge-background);
  color: var(--badge-color);
  text-align: center;
}
.ribbon-badge-7 {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
  left: -10px;
  top: 0px;
  margin: 10px 0 10px;
  background: var(--badge-background);
  color: var(--badge-color);
}
.ribbon-badge-7:before,
.ribbon-badge-4:after {
  content: "";
  position: absolute;
}
.ribbon-badge-7:before {
  height: 0;
  width: 0;
  top: -8.5px;
  left: 0px;
  border-bottom: 9px solid var(--badge-background);
  border-left: 9px solid transparent;
  filter: brightness(0.5);
}
.ribbon-badge-7:after {
  height: 100%;
  width: 2rem;
  top: 0;
  left: 99%;
  clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
  background: var(--badge-background);
}
.card__svg img,
.card__image img {
  width: 80px;
  height: auto;
  aspect-ratio: 1;
}
</style>
{% assign badgeMetafield = product.metafields.custom.product_badges.value %}
{% assign badgeText = badgeMetafield[0] %}
{% assign badgeDesign = badgeMetafield[1] %}
{% assign badgePosition = badgeMetafield[2] %}
<div
  class="card__badge card__{{ badgeDesign}} badge-{{ badgePosition }}"
  style="--badge-background: {{ settings.sale_badge_color_bg }}; --badge-color: {{ settings.sale_badge_color_text }}"
>
  {% if badgeMetafield != blank %}
    {% case badgeDesign %}
      {% when 'svg' %}
        <img src="{{ badgeText | append: ".svg" | asset_url }}" alt="{{ badgeText }}">
      {% when 'image' %}
        <img src="{{ badgeText | append: ".png" | asset_url }}" alt="{{ badgeText }}">
      {% else %}
        <h3 class="product-badge ribbon-{{ badgeDesign }}">
          <span>
            {{ badgeText }}
          </span>
        </h3>
    {% endcase %}
  {% else %}
    {% if settings.old_version %}
      {%- if product.available == false -%}
        <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">
          {{- 'products.product.sold_out' | t -}}
        </span>
      {%- elsif product.compare_at_price > product.price and product.available -%}
        <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
          {{- 'products.product.on_sale' | t -}}
        </span>
      {%- endif -%}
    {% else %}
      {%- if product.available == false -%}
        <span
          id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
          class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
        >
          {{- 'products.product.sold_out' | t -}}
        </span>
      {%- elsif product.compare_at_price > product.price and product.available -%}
        <span
          id="NoMediaStandardBadge-{{ section_id }}-{{ product.id }}"
          class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
        >
          {{- 'products.product.on_sale' | t -}}
        </span>
      {%- endif -%}
      <style>
        .card__content {
        display: flex;
        }
        .card__content .card__badge {
        position: absolute;
        }
      </style>
    {% endif %}
  {% endif %}
</div>


3. Next, we need to replace the default badge code under the Snippet folder.

For Dawn theme with version below 2.5, open the product-card.liquid. Find the code below.

Product card badge code in version 2.5 below

 

For Dawn theme version 2.5 and above, or other Shopify 2.0 FREE themes , open the card-product.liquid. Find the code below. NOTE: There are two identical codes. First one is in the line 118, and the second one is in line 314. Make sure to replace both block of code

Dawn version 2.5 and above badge code

4. Replace the code with the code below.

{% if settings.old_version %}
{% render "product-badge", product: product_card_product %}
{% else %}
{% render "product-badge", product: card_product %}
{% endif %}

5. Next, open the Config folder, then settings_schema.json. Scroll all the way down, find the last "]" (closing square backet), then place the code below before it. 

,{
"name": "Product badges",
"settings": [
    {
      "type": "header",
      "content": "If metafield is not assigned, default theme badge will be use"
    },
    {
      "type": "checkbox",
      "id": "old_version",
      "label": "Do you have Dawn version 2.5 and below?",
      "default": false
    },
    {
      "type": "color",
      "id": "sale_badge_color_bg",
      "default": "#FFFFFF",
      "label": "Badge background color"
    },
    {
      "type": "color",
      "id": "sale_badge_color_text",
      "default": "#FFFFFF",
      "label": "Badge text color"
    }
  ]
}

This will provide options when you open the Theme editor. 

theme editor product badge options

Make sure to click the checkbox if you have Dawn theme version below 2.5.

 That is it (",)

Copied!
Back to blog

Leave a comment