How can I relocate and apply color to a metafield on my product page?

[stefanensko]

Hi all, i'm trying to move €/capsula (one line text metafield) to the right of the price on product page and maybe apply it a different color brackground (only the metafield background)

https://oj8br0e8p32n1pzu-57179668671.shopifypreview.com

site preview search adagio and u will land on that page

[clavilla57]

anyone?

[Dan-From-Ryviu]

Hi @clavilla57 

Please move that minefield code to price.liquid file before this line of code

{%- if show_badges -%}

[clavilla57]

yeah i know i'm noob, but its been a long time from my last work on liquid..so how to move it?😅

[Dan-From-Ryviu]

Did you add that metafield code in main-product.liquid file, go there and find that code, cut that code and paste it into price.liquid file

[Dan-From-Ryviu]

Ahh, you added that meta field in Text block in Product information. Please remove it and then call that code to price.liquid file 

[clavilla57]

Done it this way

{{ product.metafields.custom._capsulaprezzo }}

now the problem are 2

1. It also appear on collection page

2. on product page it's not aligned to the price

This is what i'm trying to reach

[Dan-From-Ryviu]

Please update the code to this so it will appear on the product only

{% if template == 'product' %}
{{ product.metafields.custom._capsulaprezzo }}
{% endif %}

And add this CSS code to make it align with the price

.product__info-container .price { display: flex; align-items: center; }

[clavilla57]

by doing this (the first code) metafield disappear

[Dan-From-Ryviu · Accepted solution]

Please try to update code like this

{% if template.name == 'product' %}
{{ product.metafields.custom._capsulaprezzo }}
{% endif %}

[clavilla57]

ok now i can see it on the product page correctly. i just need to resize it and move it to the right 

[Dan-From-Ryviu]

Please update this code 

#shopify-section-template--20214060843353__main .product__info-container .price {
    display: flex;
    align-items: center;
}

To this 

#shopify-section-template--20214060843353__main .product__info-container .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[clavilla57]

---

---

i've changed css of product information, like this

.product__info-container .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}