Adding new icons inside of the codes of dawn theme

Retired Boards Appdev Store Design
1

Hi,

Could you pls help me about adding new icons inside of dawn theme? The payment pos system icon is vital because the company accept my application if I add the icon they have sent to me. They do’t want the icon which is provided by badges apps. They have said that they won’t accept my application. The icon is needed for the home page and product pages?Are there anyone who can share the steps for developing codes?

1 Like
2

Hi
Badges can be added on product boxes by using Product Tags. All you have to do is add Tag at Product level.

Step 1: Add product tag

Please add the following tag to your product, this tag can be anything you’d like but for sake of simplicity we’ll use the below tag:

label-new

Step 2: Add this code in product loop

You need to add the conditional statement that will loop through our product tags as following:

{% for tag in product_card_product.tags %}
 {% if tag == "label-new" %}
   <div class="label-new">NEW!</div>
 {% endif%}
{% endfor %}

n order to do this, we need to open our card-____product.liquid file in our Code Editor and put the above condition below the element

. This will allow us to filter through the product tags and display the NEW! text for each product containing the tag label-new.

Step 3: Style this tag

Find this file components-card.css code editor.
At the bottom of the file you can add your styles as following:

.label-new {
 background: var( — color-base-background-2);
 border: 2px solid var( — color-base-background-1);
 margin-top: 1em;
 padding: 0.3em 0.5em;
 z-index: 2;
 position: absolute;
 font-size: 0.875em;
}

The styles above are just for reference, please feel free to change them so it matches your website layout.

You should now be able to see the NEW! badge on your products containing label-new tag.

ravichoudharysb_0-1668935472123.png
ravichoudharysb_0-1668935472123.png700×276 63.7 KB

Please mind that for old themes that have not migrated to Store 2.0 the code above will most likely not work — however the process is the same.

Credit: link

Thanks