Solved

How to add ingredients to shopify products?

AlekD
Shopify Partner
8 0 2

So I am trying to add ingredients to my products and I thought I found out how to, but unfortunatly it was for everything. So if I added the ingredients for one product it would do it for all of them. (Below I have a picture of skittles with the ingredients for oreo cookies because I added the ingredients on the oreos, but it saved to everything)Screenshot 2022-08-09 211050.png

Accepted Solution (1)

AvadaCommerce
Shopify Partner
3879 839 968

This is an accepted solution.

Hi @AlekD,

 

In order to have different Ingredients for each product, you first need to create metafield and then connect it with your theme setting to display metafield on your product pages:

 

  • Create Metafield by going to Setting > Metafields > Products > Add definition > fill out the required info.
  • Go to Products > Within each product page, scroll down to the bottom and you'll see the metafield you've created before, then fill out the specific content for each.
  • Navigate to Online Store > Theme > Customize 
  • Select Products then Default Product from the page selector at the top
  • Within the sidebar menu, click on the Ingredients section > Row content >  click on the Insert Dynamic Source as the photo attached below > Select the associated metafiled

 

AvadaCommerce_0-1660099979311.png

 

  • Finally, hit Save

 

I hope this helps.

banned

View solution in original post

Replies 3 (3)

ThePrecisionist
Shopify Partner
33 3 13

Hello Alekd, Hope this helps!

 

You can do that now natively using metafield definitions , quick tutorial below, some old ways may also be valid for some use cases and I mention them at the end.

 

Learn about metafield definitions here https://help.shopify.com/en/manual/metafields/metafield-definitions

 

Merchants wanting to buy this setup and theme customizations may contact me.

 

For a simple list you can use metafield definitions, aka mf-defs,  in this example i'm setting the namespace to ingredients and the key to multiline_text just to hint to myself that i've set the type to 'Multi-line text' and can add more than a single line of text. But you could just as easily set the key to "list" if that will make more sense day to day.

 

Create metafield definitions here shopify.com/admin/metafields 

 

Example screenshot of setting up a mf-def for an ingredients namespace with multiline_text key and multi-line text type:

ThePrecisionist_0-1660097449864.png

 

When saved a new input will appear in each products admin under the Search engine listing preview 

 

In the screenshot in a products admin metafields UI for this mf-def I've entered some text for 3 items in html <li> tags.

 

ThePrecisionist_1-1660097449814.png

 

To display it in your your theme you'd add following line of code, for this example,  to your themes product templates where you want to display the metafield definition( or use a dynamic source for OS2 themes that support that feature)

 

Always backup your themes before making changes

 

<div>{{ product.metafields.ingredients.multiline_text.value }}</div>
Copy

 

*if you modify things change the namespace(ingredients) and key(multiline_text) to match your changes.

 

Some other methods:

Just adding this to each products description(using CSV if you needed to do it in bulk), placing ingredients in tags(which allow for tag based organization or navigation or filtering), or use pages that match the product handle to hold that content and reference it in product templates:

 

<div>{{ pages[product.handle].content }}</div>
Copy

 

 

Need further assistance? Reply to this message or send a private message. I will be glad to assist you

 

kindly accept solution if this solved your challenge

 

Cheers,

Tosin

Please Like and Accept Solution. Free shopify website audit to grow your business Chat on WhatsApp | Email: the.ideal.precisionist@gmail.com | | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO| Digital Marketing

AvadaCommerce
Shopify Partner
3879 839 968

This is an accepted solution.

Hi @AlekD,

 

In order to have different Ingredients for each product, you first need to create metafield and then connect it with your theme setting to display metafield on your product pages:

 

  • Create Metafield by going to Setting > Metafields > Products > Add definition > fill out the required info.
  • Go to Products > Within each product page, scroll down to the bottom and you'll see the metafield you've created before, then fill out the specific content for each.
  • Navigate to Online Store > Theme > Customize 
  • Select Products then Default Product from the page selector at the top
  • Within the sidebar menu, click on the Ingredients section > Row content >  click on the Insert Dynamic Source as the photo attached below > Select the associated metafiled

 

AvadaCommerce_0-1660099979311.png

 

  • Finally, hit Save

 

I hope this helps.

banned
AndrewKuhl
Visitor
1 0 0

Hello, I am also having a similar issue with trying to add nutritional info which is either taken from an excel file or use a .png image. I have set up the metafield as a file type but when I try to insert the dynamic source it doesn't show any of the metafields created that are this file types. Any answers on how to fix this?