Add size chart button that opens a pop up with image(diffrent image for each product)

[Web_Dev_]

I'm seeking assistance on implementing a size chart button that triggers a pop-up with a distinct image for each product. I need guidance on the technical steps to achieve this feature. Any suggestions or tips would be greatly appreciated! Thanks in advance for your help!

Currently, I know how to create the button, but it displays the same image for all products. I understand that I could use a product template if I had two product categories, but I want a different image for each individual product that I currently have and those I'll have in the future.

One approach I'm considering is adding a unique identifier (such as a number tag) to every product. Then, I could upload a corresponding image file with this identifier as its filename. Finally, I'd like to match them with some code to ensure the correct image is displayed when the size chart button is clicked for a particular product.

Any guidance or advice on how to achieve this functionality would be greatly appreciated!

[sahilsharma9515 · Accepted solution]

Hi @Web_Dev_ The better approach to go in this situation is to use the metafields and that way you don't have to create different template for different product, and you can easily show different images for different products.

You can go with tag approach as well, but it's little complex and you need to add extra custom code as compared to the metafields approach.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Web_Dev_]

Thank you for your response. Could you guide me through the metafields solution you suggested?

[sahilsharma9515]

Hi @Web_Dev_ You can follow this and get all the information about metafields and how you can use them.

https://help.shopify.com/en/manual/custom-data/metafields

Also if you search the term metafield in youtube there also you will lots of video regarding the same.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[Web_Dev_]

I did it, and I found a lot. I created the field I need, and I found how I can add images. However, the popup option only seems to work with pages and not images. How can I insert the metafield in a page description to add this page in a popup button and apply it on the product page?

[sahilsharma9515]

Hi @Web_Dev_ You need to call the metafield in the description <div> so that it will show the metafield in your description.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil