Solved

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

Web_Dev_
Tourist
10 0 1

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!

Accepted Solution (1)

sahilsharma9515
Shopify Partner
976 122 185

This is an 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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 5 (5)

sahilsharma9515
Shopify Partner
976 122 185

This is an 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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Web_Dev_
Tourist
10 0 1

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

sahilsharma9515
Shopify Partner
976 122 185

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Web_Dev_
Tourist
10 0 1

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
Shopify Partner
976 122 185

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️