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

Solved
Highlighted
Shopify Partner
400 30 51

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

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted

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
Highlighted
Shopify Partner
400 30 51

@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

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted

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
Highlighted
Shopify Partner
400 30 51

@ankur-verma 

ok let me try

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Shopify Partner
400 30 51

@ankur-verma 

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

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Shopify Partner
400 30 51

@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]);

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
1 Like
Highlighted

That's cool.!!

1 Like
Highlighted
Shopify Partner
400 30 51

@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...

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted

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