Adding icons to product card. Dawn theme

[MaBa]

Hi,

i would like to add specific product icons in the product page as in the picture below.

I read that I could use the product metafield but not sure how. I’m using Dawn theme.

Thanks

[diego_ezfy]

Hi @MaBa

Using metafields would be the best approach for this indeed, but some coding experience will definitely be required. I’m afraid this is not a beginner-friendly type of modification.

In brief details, this is how it could be done:

If you want to stick with metafields, first of all you’ll want to create the metafields for your products at settings > metafields > products.

If your intent is to use icons, then you can opt either for “file” or perhaps “multi-line text” for SVG codes.

Once that is done, you can then add the metafields to your Dawn theme’s product page. It will be located at main-product.liquid. More information can be found here.

Finally you can add your images from the product admin. They will show up at the bottom of the page under “metafields”.

I hope it helps.

Kind regards,
Diego

[MaBa]

Hi @Anonymous ,

I managed to add the icons but I would like to align them to the right. In the cart-product.liquid file I added this code to display the icons:

{%- if card_product.metafields.custom != blank -%}
{%- for field in card_product.metafields.custom -%}
{% if field != nil %}
{{ field | last | img_tag}}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

and the result is:

How can I align the icons to the right?

Thanks a lot!