Adding Metafield Next to Product Price in Collection Image Section

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:

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

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

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 :disappointed_face:

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!

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?

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.

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?

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 :slightly_smiling_face:

Well happy - thanks for the help!

Cheers,
Lee

Fantastic! Amazing perseverance :wink:

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!

Just keeping this thread up to date with progress for the future benefit of others. I’ve successfully managed to exclude any product I want from this rule of having “per m2” show after the price in the collection, simply by writing an IF statement that checks for the particular product tag “nom2”:

{% if product.tags contains 'nom2' %}
            {{ 'products.product.regular_price' | t }}  
            {{ product.price | money_without_trailing_zeros }}
 {% else %}
           {{ 'products.product.regular_price' | t }}  
           {{ product.price | money_without_trailing_zeros }} {{product.metafields.product_unit.unit }}
{% endif %}

So now, if I’m selling something (say a tool, instrument or adhesive etc) that naturally doesn’t come wit this unit of measure, I simply add the tag on the product page of “nom2” and it won’t show in the collection!

Cheers,
Lee

I’m really struggling to get this to work in broadcast theme - can anybody help me?

The Meta field I have is: my_fields.product_summary

Following this thread I have been trying to add {{product.metafields.product_summary}} into the code in a number of places, but cant seem to get the metafield to display.

Thanks for any help!