How can I replace product titles with metafields on my site?

Store Design
1

Trying to spread the product title over 2 or 3 lines as this looks alot nicer. People told me to use metafields. I now have created all the metafields but i still don’t understand how I can use the metafields as title.

Knipsel.JPG
Knipsel.JPG251×387 8.01 KB

So for example here the title is Dior Sauvage Eau de Toilette

I would like to turn it into

Dior (product.metafields.custom.merk)

Sauvage (product.metafields.custom.geurnaam)

Eau de Toilette (product.metafields.custom.concentraat)

I have these metafields but no idea how to use them. I also can’t make use of the “Vendor” category as Google doesn’t like this.

download.png
download.png1186×531 41 KB

Store link: https://ji1fmu3roec9wqdf-53265825967.shopifypreview.com

2

Hello @Bramm
it needs to modify liquid and replace the {{ product.title }} with above mentioned metafields.
so please find the in the theme where {{ product.title }} and replace that.

1 Like
3

Hello there

  1. Open the Liquid file for the product page where you want to display the title with line breaks. This could be product.liquid or a similar file.

  2. Find the section of the file where the product title is displayed. This will typically be wrapped in an HTML tag like <h1> or <h2>.

  3. Replace the existing code that displays the product title with Liquid code that references your metafields and adds line breaks. For example, let’s say you have created two metafields called Line 1 and Line 2. You can use the following code to display the title with two lines:

# 
   {{ product.metafields.custom.Line 1 }}

   {{ product.metafields.custom.Line 2 }}

This code uses the {{ }} Liquid tags to reference the values of the Line 1 and Line 2 metafields. The <br> HTML tag is used to add a line break between the two lines.

1 Like
4

Not sure I agree with that recommendation to move each part into a metafield. I am a huge metafield fan but this sounds like extra work.

Liquid is able to look at a string and split it into parts. For example it could take “Dior Sauvage Eau de Toilette” and split it into two by looking for “Eau de Toilette” (Eau de Parfum etc). This would give you an array with:

  1. Dior Sauvage
  2. Eau de Toilette

If “Dior” is already added as the vendor then you could also use that to split out the first part. This would give you your three components.

  1. Dior
  2. Sauvage
  3. Eau de Toilette

Since you already have to add Liquid code to show the metafields this feels like a much better and easier long term management. It would require that the vendor field value matches the first part of the title exactly.

Now that said, if you must use metafields where are you replacing it? On a product page - a collection page - somewhere else? The location of the code you need to change will differ based on the theme and where you’re replacing it.

1 Like
5

Guys, thank you so much for all the responses! Going to try out some suggestions here. Will update in a bit :).