Product Grid Layout

Store Design
, ,
1

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

armani goed.png
armani goed.png326Ă—485 36.6 KB

armani slecht.png
armani slecht.png296Ă—404 26.5 KB

https://el5298tkybtt82ws-53265825967.shopifypreview.com

Thank you for the help i appreciate it

2

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

Replace 2 lines of code below it with those codes

product.metafields.custom.geurnaam 

product.metafields.custom.concentraat

product.metafields.custom.merk

Save your file

1 Like
3

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

Replace 2 lines of code below it with those codes

{{product.metafields.custom.geurnaam}} 

{{product.metafields.custom.concentraat}}

{{product.metafields.custom.merk}}
1 Like
4

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:

BSSCommerceB2B_0-1718353352550.png
BSSCommerceB2B_0-1718353352550.png400Ă—195 26.3 KB

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 :

{{product.metafields.custom.geurnaam}} 

{{product.metafields.custom.concentraat}}

{{product.metafields.custom.merk}}

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!

1 Like
5

You guys are all amazing, thank you!