Popup window

Highlighted
New Member
1 0 1

I am looking to have a link added to all product pages that open a popup window that explains all the possible options. Similar to the size-chart popup that I have found here but obviously not a size chart. I can't find any way of doing this. Anbody any ideas?

1 Like
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
132 0 23

Hey there Zhecypher!

Genevieve from Shopify here :) 

You can definitely configure a popup window to display information about your product other than sizes. The easiest way to do this would be to follow the size chart guide and just slightly modify the text and code used: 
https://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/add-siz...

For instance, I used those instructions to create an 'Other info' pop-up box in my test store, that looks like this: 

I just needed to edit the Size Chart code, provided in the above guide, to refer to a page entitled 'Other Info' instead, like so: 

Note that, if you're using the Brooklyn theme, you'll need to use this code instead:
https://gist.github.com/carolineschnapp/288da541ea2b69aedc3b

Hope that helps! 

Genevieve S.

0 Likes
Highlighted
Tourist
29 0 3

is there a way to make a popup for each specific product?...i did the above and it works great but if you have a few different product types for example male tee and a female tee it becomes an issue...is there a way to add a popup for individual products in the Brooklyn theme?

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
132 0 23

Hi Shayne - absolutely!

The above guide has a subsection covering this case, actually :) You can find that subsection, specifically, here:
https://docs.shopify.com/themes/customization/products/add-size-chart#set-up-a-size-chart-specific-t...

To give you the gist, instead of using the Store Wide Size Chart code for your size-chart.liquid snippet, you'll use the Product Type Size Chart or the Vendor Specific Size Chart code. These code snippets then pull a different size chart page depending on the product's type or vendor. 

Hope that helps! 

Genevieve S.

0 Likes
Highlighted
Tourist
29 0 3

thanks for the responce...so last week i already implemented this code https://gist.github.com/carolineschnapp/288da541ea2b69aedc3b so how to i go about changing it to work with individual products?..sorry very novice here.....the thing that i dont understand is the code that goes into the theme.liquid can only pull one size chart so iam stumped...maybe you can hold my hand a little bit?,lol

0 Likes
Highlighted
Tourist
29 0 3

is it done with tags or something on each product?....trying to figure out what i do to each product or what i add to each product to have the size chart code know to display that specific chart

0 Likes
Highlighted
Tourist
29 0 3

so what i have done is this: created a page called Burnout Size Chart and the handle is burnout-size-chart

I created a snippet and called it burnout-size-chart.liquid

Next i pasted the code from here https://gist.github.com/jtgrenz/293d8fb9a8388bac3bd0 into the snippet

Next i added this in the theme.liquid http://prntscr.com/a6ovey  btw i did have both that and the {% include 'size-chart' %} in there but still created the same issue and thats this http://prnt.sc/a6otk7 you can see there is a size chart link but it pushes the 2 text boxesin a wierd way, also when you click on the size chart link it is just a blank popup, like this http://prntscr.com/a6owyz its like its trying to do a full screen popup.........also for the actual product iam trying to have the size chart for i added the product type and vendor as 'burnout' like this http://prntscr.com/a6oxr6     i cant seem to understand how the product page can call the size chart...is there something iam doing wrong with the actual product page naming or something else?

0 Likes
Highlighted
Tourist
29 0 3

i think the main issue i have is how do i asscoaite each actual product page with a specific size chart....how do i connect the product page to the specific size chart?. in this case its called burnout-size-chart

0 Likes
Highlighted
Tourist
29 0 3

in other words, when i click this button http://prntscr.com/a6r874 how does this product know what size chart to open?..............how is it connected individually and not globally?

0 Likes
Highlighted
Tourist
29 0 3

you say depending on your product type or vendor...how do i make my product a certain product type?...iam so lost with this ive tried everything ......in this https://docs.shopify.com/themes/customization/products/add-size-chart it actually says that the brooklyn theme needs this code https://gist.github.com/carolineschnapp/288da541ea2b69aedc3b so how can the respective section you mention work with the other code thats not for the brooklyn theme.....lol the more i get into this the more iam getting confused.

0 Likes