Adding Metafield Next to Product Price in Collection Image Section

Solved
leeroyster
Excursionist
15 1 1

Good Afternoon

I've successfully added a new metafield and displayed it on my product page (Venture theme) next to the price by adding the following line of code into the product-template.liquid file:

{{product.metafields.product_unit.unit }}

This works a charm, but now what I'd like to do is add the same piece of data next to the price on the featured collection icons:

leeroyster_0-1619874986942.png

You can see in the image where the price is - this particular section is a feature collection, but I can't figure out what piece of code (or .liquid file) I need to edit in order to display the same metafield - can anyone point me in the right direction? 

Cheers,
Lee

0 Likes
JHKCreate
Shopify Partner
2499 412 595

Hello What theme are you using? You should normally see a product-grid that contains this required info, let me know

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
leeroyster
Excursionist
15 1 1

Hi there, it's the Venture theme. I read about this product-grid file, but this doesn't exist for me.

There is a collection-grid-item file, but no reference to price in there. 

Also, there are two files: featured-product.liquid and featured-products.liquid where I've attempted to add in the metafield, but nothing shows

0 Likes
JHKCreate
Shopify Partner
2499 412 595

I would suggest to get the name of the div related to that grid, paste it in the search box added by this app on Chrome/Edge: Chrome Web Store - Extensions (google.com)

That way it will tell you which files contain that reference and then you can add the metafield. 

PS: You might need to run the search twice for the results to show correctly

Let me know if that helps!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
leeroyster
Excursionist
15 1 1

Wow, that app looks good, will definitely use that, thanks!

What you say makes sense, but I think the core of the issue is finding out what that div is and where is lives, as I assume it only references variables and not static text (such as product name and price), if that makes sense?

 

0 Likes
JHKCreate
Shopify Partner
2499 412 595

Most divs have at least one static class that you can leverage to what you're looking for. Usually the price has a fixed div as a baseline.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
leeroyster
Excursionist
15 1 1

Now to just find it! I did find various references to price across a few files, but couldn't get it to work. I'll try that app and see how I get on.

Am I right in assuming that when I create a product metafield, I can still display it anywhere?

0 Likes
leeroyster
Excursionist
15 1 1

This is an accepted solution.

Managed to figure this out!

The line of text I needed to edit was in the div class: product-card__info within the product-card.liquid file. 

I added the reference to the metafield, and now I have the unit showing in the collection images

leeroyster_0-1619984469662.png

Well happy - thanks for the help!


Cheers,
Lee

 

0 Likes
JHKCreate
Shopify Partner
2499 412 595

Fantastic! Amazing perseverance

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
leeroyster
Excursionist
15 1 1

We got there in the end, now to figure out how to write an IF statement to exclude this feature from certain products (perhaps those tagged with a certain value), but I'll start a new post for that! 

0 Likes