I need help to display variant title on popup on product page

Solved
Highlighted
Shopify Partner
189 13 24

Can anybody help me with this I need to display the variant title on Product page and Collection page Add to cart confirmation popup

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes

Hi Akshay

Can you let me know how you want to display the title on product page or collection page.
And if there are variation due to more than 1 option then how you want to handle it.
Just like the example I am showing you.
14k Bloom Earrings – jewellerystones.png

Please provide your input it will help us to understand your exact problem.

0 Likes
Shopify Partner
189 13 24

@ankur-verma 

I want to display the selected variant title on the popup when the customer clicks on Add to cart button. I want that functionality on both the collection page and Product page. Now you can show there is one popup opens after clicking on Add to cart button. See Cart page there is selected variant title display below the product name same thing I want on the popup.

Preview Link: https://yxlxenqmsaa8s03a-22472327242.shopifypreview.com
Cart page: https://yxlxenqmsaa8s03a-22472327242.shopifypreview.com/cart

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes

Hi Akshay

Got your point. You can do it easily if you knew how to edit the shop.js file of your theme assets.
Then open shop.js file here you will find the function

doAjaxAddToCart: function(n, r, a, p, amt) {

Inside this function you will see the line of code 

e(".ajax-success-modal").find(".ajax-product-title").text(p);

 Just change this line of the code with below line. You will get title with option of selected variant.

e(".ajax-success-modal").find(".ajax-product-title").text(n.title);

This will work for both pages. Collection and product page.
Try it and let me know if it works for you.

1 Like
Shopify Partner
189 13 24

@ankur-verma 

ok let me try

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes
Shopify Partner
189 13 24

@ankur-verma 

I have tried this but it shows me product name - variant title. But I want only variant title there.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes
Shopify Partner
189 13 24

@ankur-verma 

Done, I have got the solution. Thanks for helping me.

Solution is:  e(".ajax-success-modal").find(".ajax_variant").text(n.title.split('-')[1]);

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
1 Like

That's cool.!!

1 Like
Shopify Partner
189 13 24

@ankur-verma 

https://yxlxenqmsaa8s03a-22472327242.shopifypreview.com/products/loreal-visible-lift-blur-concealer

I want your help to change variant based on variant Image.

Reference Site: https://demo.shoptimized.net/collections/showcase-1/products/personalized-t-shirt?variant=4029677474...

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes

Hi Akshay

I checked your product. Seems it's already working what you want.
Otherwise may I did not get you properly.

Please verify it.

0 Likes