Re: Product Grid Layout

Solved

Product Grid Layout

Bramm
Explorer
74 0 7

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.pngarmani slecht.png

https://el5298tkybtt82ws-53265825967.shopifypreview.com 

 

Thank you for the help i appreciate it 

Accepted Solutions (3)

Dan-From-Ryviu
Shopify Partner
8528 1681 1692

This is an 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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Rahul_dhiman
Shopify Partner
231 43 43

This is an 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>
Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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:

BSSCommerceB2B_0-1718353352550.png

 

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! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
8528 1681 1692

This is an 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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Rahul_dhiman
Shopify Partner
231 43 43

This is an 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>
Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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:

BSSCommerceB2B_0-1718353352550.png

 

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! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Bramm
Explorer
74 0 7

You guys are all amazing, thank you!