Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Edit Size Chart Popup & Fix Zoom

Solved

How can I adjust the popup size and remove white space in my size chart?

Ben_10
Tourist
7 0 0

Screenshot 2024-02-13 at 14.04.05.png

 

Hi All,

 

This is my size chart in Motion Theme. I used the editor to insert the image and made the size to the original size but when I save it and have a look at it on my site it seems that it is still too small although in the actual editor it looks much bigger. No matter how much bigger I make the image this just seems to be the max popup size for the chart. I would like to make the popup bigger when people click the size chart, please let me know how I can do so?

Then secondly, the white space between the red boxes, how can I get rid of that so my image stretches out in full?

Accepted Solutions (2)
Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @Ben_10 please add the below css to your theme.css file.

 

tool-tip[data-tool-tip-open=true] .tool-tip__inner {
    max-width: 850px;
    min-height: 350px;
    min-width: 350px;
    padding: 0px;
}
.tool-tip__close {
    padding: 1px;
}

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@Ben_10 please change the max-width to 1250px; refer the below screenshot.

 

Zeelprajapatii_0-1707995285179.png

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me

View solution in original post

Replies 11 (11)

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @Ben_10 Could you please give your website URL? It will make it much easier for me to address your problem.

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Ben_10
Tourist
7 0 0

Hi Zeel-Prajapatii,

 

I just removed the password to make the site live as it is not yet completed, please see link directly to the product page - https://www.grably.art/products/prehistoric-musing-i?variant=47628837126474

Once you click 'MEDIUM DETAILS & SIZE CHART' you will see the size issue plus the white spacing I assume is to do with the popup code.

Zeel-prajapatii
Shopify Partner
138 32 27

Hey @Ben_10 I'm not able to see any size chart image in the popup. could you please upload the image again so i can get the better idea for the size and spacing. https://prnt.sc/f_T9SU2l7-tS 

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Ben_10
Tourist
7 0 0

That is a bit strange as it works on my side. I deleted the image, then saved. Then re-uploaded it now and saved. Working my side, please let me know if you see it now.

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

Hey @Ben_10 please add the below css to your theme.css file.

 

tool-tip[data-tool-tip-open=true] .tool-tip__inner {
    max-width: 850px;
    min-height: 350px;
    min-width: 350px;
    padding: 0px;
}
.tool-tip__close {
    padding: 1px;
}

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Ben_10
Tourist
7 0 0

Wow Zeel-Prajapatii thank you so much, this is great, the white borders are gone! The zoom issue is still there though as I would like the overall popup for the chart to be roughly 50% bigger, can you assist with that? Sorry I see replied in the wrong place at first.

EquiZone
New Member
6 0 0

Hi there, you seem to be the person to contact about this! On our mobile site we cannot zoom in on the size charts, so they are too small for the customer to read, even through they're perfect on the PC website. Is there a way to allow zoom? Here is an example product - https://equizoneonline.com/products/2-5-ring-eggbutt-leather and then click on "Size Guide" for the pop up. 

Ben_10
Tourist
7 0 0

Wow Zeel-Prajapatii thank you so much, this is great, the white borders are gone! The zoom issue is still there though as I would like the overall popup for the chart to be roughly 50% bigger, can you assist with that?

Zeel-prajapatii
Shopify Partner
138 32 27

This is an accepted solution.

@Ben_10 please change the max-width to 1250px; refer the below screenshot.

 

Zeelprajapatii_0-1707995285179.png

 

Thanks

➔ Was I helpful , please don't forget to like and mark solution as an accepted solution , you can PM me.
➔ Software engineer : Having more than 3 years of experience in the related industry with the specialization of Shopify theme development , worked on hundreds of stores.
➔ Want to hire me? Email me
Ben_10
Tourist
7 0 0

Thank you so much! It is perfect now

MRamzan
Shopify Partner
392 3 36

You can try this method:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112