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

Store Design
, ,
1

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)

stefanensko_0-1701266257627.png
stefanensko_0-1701266257627.png512×352 8 KB

https://oj8br0e8p32n1pzu-57179668671.shopifypreview.com

site preview search adagio and u will land on that page

2

anyone?

3

Hi @clavilla57

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

{%- if show_badges -%}
4

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

5

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

6

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

7

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

Screenshot 2023-11-28 173649.png
Screenshot 2023-11-28 173649.png555×329 7.34 KB

8

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; }
9

by doing this (the first code) metafield disappear

10

Please try to update code like this

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

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

Immagine (3).png
Immagine (3).png1366×768 10.4 KB

12

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;
}
13

i’ve changed css of product information, like this

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