Product Grid Layout

[Bramm]

Hello,

I am struggling with the layout of my products on my store.

i would like to replace the product title and the product vendor with metafields 

on the first line I want product.metafields.custom.geurnaam  (this one should replace the title)

on the second line I want product.metafields.custom.concentraat 

on the third line I want product.metafields.custom.merk (this one should replace the product vendor)

With your help I was able to get this set up in my old theme but unfortunately just copying doesn't help. 

The image on the left shows how i want it , the right one shows its current state

https://el5298tkybtt82ws-53265825967.shopifypreview.com 

Thank you for the help i appreciate it 

[Dan-From-Ryviu · Accepted solution]

Go to your Online Store > Themes > in the theme you want to edit > click "..." > Edit code > find product-grid-item.liquid file, find this line of code 

<div class="grid-item__meta-main">

Replace 2 lines of code below it with those codes 

<div class="grid-product__title">product.metafields.custom.geurnaam </div>
<div>product.metafields.custom.concentraat</div>
<div class="grid-product__vendor">product.metafields.custom.merk</div>

Save your file

[Rahul_dhiman · Accepted solution]

hello @Bramm ,

So this would be correct code .

Go to your Online Store > Themes > in the theme you want to edit > click "..." > Edit code > find product-grid-item.liquid file, find this line of code

<div class="grid-item__meta-main">

Replace 2 lines of code below it with those codes

<div class="grid-product__title">{{product.metafields.custom.geurnaam}} </div>
<div>{{product.metafields.custom.concentraat}}</div>
<div class="grid-product__vendor">{{product.metafields.custom.merk}}</div>

[Dan-From-Ryviu · Accepted solution]

Go to your Online Store > Themes > in the theme you want to edit > click "..." > Edit code > find product-grid-item.liquid file, find this line of code 

<div class="grid-item__meta-main">

Replace 2 lines of code below it with those codes 

<div class="grid-product__title">product.metafields.custom.geurnaam </div>
<div>product.metafields.custom.concentraat</div>
<div class="grid-product__vendor">product.metafields.custom.merk</div>

Save your file

[Rahul_dhiman · Accepted solution]

hello @Bramm ,

So this would be correct code .

Go to your Online Store > Themes > in the theme you want to edit > click "..." > Edit code > find product-grid-item.liquid file, find this line of code

<div class="grid-item__meta-main">

Replace 2 lines of code below it with those codes

<div class="grid-product__title">{{product.metafields.custom.geurnaam}} </div>
<div>{{product.metafields.custom.concentraat}}</div>
<div class="grid-product__vendor">{{product.metafields.custom.merk}}</div>

[BSSCommerce-B2B · Accepted solution]

Hi @Bramm ,

I have reviewed your requirement, you just need to edit code liquid and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2:  Search for the file "product-grid-item.liquid". In this file, search class="grid-item__meta-main" and replace lines of code below it with this code snippet : 

<div class="grid-product__title">{{product.metafields.custom.geurnaam}} </div>
<div>{{product.metafields.custom.concentraat}}</div>
<div class="grid-product__vendor">{{product.metafields.custom.merk}}</div>

In this step, you will  replace the product title and the product vendor with metafields as you describe: 

- The first line I want product.metafields.custom.geurnaam  (this one should replace the title)

- The second line I want product.metafields.custom.concentraat 

- The third line I want product.metafields.custom.merk (this one should replace the product vendor)

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Bramm]

You guys are all amazing, thank you!