Solved

How can I turn my size chart into a pop-up window?

Qke
Tourist
13 0 0

Hi,

 

Could you help me in regards to making my size chart into a pop up window instead of taking the customer to another page?

 

The current way is if you click the link it will open a new page instead i want the same page to remain but a small pop up window to open up so they can see the chart

 

URL:https://phurry.myshopify.com/collections/dog-clothing/products/the-dog-face-reflective-windproof-pet...

 

password: chalet123567.jpg789.jpg

Accepted Solutions (2)

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

Hello, I saw it.

Now clicking on that show is opening a pop-up, it doesn't jump to another page! It's just that this popup is a full screen popup!

You could try this code.

 

.js-size-chart-container{
    background-color: rgba(0,0,0,.7) !important;
}
.js-size-chart-container .size-chart-content{
    background-color: #fff;
}

 

try this

Simonsron_0-1673668134594.png

 

banned

View solution in original post

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

I have finished revising it, do you see if you are satisfied?

banned

View solution in original post

Replies 12 (12)

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

Hello, I saw it.

Now clicking on that show is opening a pop-up, it doesn't jump to another page! It's just that this popup is a full screen popup!

You could try this code.

 

.js-size-chart-container{
    background-color: rgba(0,0,0,.7) !important;
}
.js-size-chart-container .size-chart-content{
    background-color: #fff;
}

 

try this

Simonsron_0-1673668134594.png

 

banned
Qke
Tourist
13 0 0

Thank you !, May i ask where this code needs to be put?

Simonsron
Shopify Partner
699 87 122

assets -> style.css  Put it on the bottom.

banned
Qke
Tourist
13 0 0

Thank you so much, that worked perfectly. However now after the popup comes up, it doesnt allow me to get out of the page unless i press back. i cant click out to close the pop up. Could you help me with this please?

Simonsron
Shopify Partner
699 87 122

I can help you out, but this requires writing js. If you would like me to help you, you can send me an email and invite me as your shop partner!

banned
Qke
Tourist
13 0 0

Thank you, i have sent you a request 🙂

Simonsron
Shopify Partner
699 87 122

This is an accepted solution.

I have finished revising it, do you see if you are satisfied?

banned
Simonsron
Shopify Partner
699 87 122

If there is anything else I can do to help you, please email me directly!

banned
Qke
Tourist
13 0 0

Wow that was quick, thank you so much for your help. i sure will keep you in mind !

Simonsron
Shopify Partner
699 87 122

Trust me, I will save you more time to spend on selling your products.

banned

AbulHasib
Explorer
61 5 1

Hi there, you can try out our app “Bevy Design” for this. Our app has a drag and drop pop-up builder which you can use to create pop-ups without any code. I feel like our app’s On Hover-based trigger will be suitable for this application. You can also use our app to create a full-fledged size chart pop-up, which will be more helpful for your customers to see all the sizes in one place. 
You can acquire additional information about our app through our website: https://bevycommerce.com/design/ 
Let me know If you need to book a meeting with me to go over what our app has to offer.

Customer Success Manager | Bevy Commerce Inc.
Have questions or need assistance? Get in touch: 
Email: abul.hasib@bevycommerce.com
Bevy Support: support@bevycommerce.com
Discover more about Bevy Commerce:
Website: https://bevycommerce.com/
Our Apps: https://apps.shopify.com/partners/bevy-commerce

wday222
Visitor
1 0 0

Here's a solution that doesn't require coding. This worked great for me:

https://www.youtube.com/watch?v=VFAxr_v-8n4&t=273s