Need Direction Adding Metafield Coding on Product Page

Store Design
, ,
1

Trying to add a page width block of rich text on the product page - below the image/description - but BEFORE the reviews.

I have the code ready to drop in, just not sure where it should go and how to make it page width please (not on the right side like the description).

Please advise!

My page layout URL is https://claribelskincare.com/products/body-scrub-with-aha-choose-your-natural-scent

This is the code line I need to add: {{ product.metafields.custom.rich_text_field.value }}

2

Hi, I have a few questions here:

  1. Is this attribute already included in your product template’s liquid file?
  2. I assume that you have defined this attribute in the product’s setting?
  3. If yes to the above questions, would you mind sharing screenshots of the placement of the variable in your code, and of it defined in the product’s metafield?
3

In fact, you don’t need to add any code, just add a richtext section. Select the metafields you added.

wo_0-1749777373563.png
wo_0-1749777373563.png1884Ă—692 151 KB

4

Where exactly, what line, does this code go? Need specifics please.

I should clarify for anyone reading this that the rich metafield on the product page is going to be DIFFERENT on every product page, so just adding a block is not going to work.

Thank you so much.

5

Hi Joseph,

Thank you for your response.

  1. I need to add the code to my product template page - but don’t know where to add it. Want it full width directly in between the product description/image section and the reviews section. Every time I place the code somewhere it’s the wrong place.

  2. The attribute is via a metafield app, defined as a rich text field.

  3. Don’t have the code placed yet - need to know where it should go.

Please help if you can - thank you.

jeanette

6

@claribelskincar Thanks for your replies! If you are using a metafield app, you need to make sure that it’s storing the metafields in Shopify’s native metafields system. Usually you can access the metafields within a product. It’s stored under the “Product metafields” section, which only shows if metafields were added to Shopify’s native metafields system as mentioned:

Joseph_W_0-1751661970472.png
Joseph_W_0-1751661970472.png717Ă—153 6.8 KB

To display your metafield, you can access it by adding {{ product.metafields.custom.rich_text_field.value }} into your preferred template. Let’s say that you wanted to add it above your Add to Cart button, then you would need to find either your product template, which could be “sections/main-product.liquid” or the cart form’s template which could be “snippets/buy-button.liquid” or “snippets/product-form.liquid”. So, the 1st part is identifying which template renders your product page or the cart/product form.

Then find the code in the template that’s associated with the area where you want to add the rich text. So, if you wanted to add it before the product form, then you would have to search the template for the div that has the class “product-variant-id”:

Joseph_W_1-1751662405150.png
Joseph_W_1-1751662405150.png1620Ă—638 211 KB

Then add the code above that div:

{% if product.metafields.custom.rich_text_field.value %}

{{ product.metafields.custom.rich_text_field.value | metafield_tag }}
{% endif %}

…