Solved

Adding Metafield Next to Product Price in Collection Image Section

leeroyster
Excursionist
26 1 4

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

Accepted Solution (1)
leeroyster
Excursionist
26 1 4

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

 

View solution in original post

Replies 11 (11)

JHKCreate
Shopify Expert
3571 638 921

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

Learn more about us: jhkcreate.com
leeroyster
Excursionist
26 1 4

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 😞

JHKCreate
Shopify Expert
3571 638 921

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

Learn more about us: jhkcreate.com
leeroyster
Excursionist
26 1 4

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?

 

JHKCreate
Shopify Expert
3571 638 921

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

Learn more about us: jhkcreate.com
leeroyster
Excursionist
26 1 4

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?

leeroyster
Excursionist
26 1 4

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

 

JHKCreate
Shopify Expert
3571 638 921

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

Learn more about us: jhkcreate.com
leeroyster
Excursionist
26 1 4

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! 

leeroyster
Excursionist
26 1 4

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' %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}  </span>
            {{ product.price | money_without_trailing_zeros }}
 {% else %}
           <span class="visually-hidden">{{ 'products.product.regular_price' | t }}  </span>
           {{ 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 

 

 

Daniel_Ward_CC
Shopify Partner
28 0 13

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!