FROM CACHE - en_header

Add a second size guide modal

Shopify Partner
3 0 1

I'm modifying someone else's code.


It started with one modal size chart that opens onClick to a Size Guide (I don't even think it's a button, but a link positioned in a table) button on the Product Pages. It's really just a table with data in it. It's a template called page.sizing.json, the snippet is called size-guide-modal.liquid. In the Section, the product-size-guide.liquid code is rendered.


Well, I've created another page template for a different product, so created another page template called page.sizing2.json, a snipped called size-guide-modal2.liquid and changed the product-size-guide.liquid code to match.


The new modal (title only) is displaying over the first modal (see screenshot attached).


Can some wonderfully knowledgeable person tell me what I'm missing?




Screen Shot 2022-08-05 at 7.24.09 PM.png


Replies 4 (4)
Shopify Partner
23 1 3

To simply bring the old one behind the new one try setting its z-index lower than the new one in css. Also you may not have changed all of the values properly within the product-size-guide.liquid . Also I'm not too sure about the numbers in the file name best practice is to spell them out with something like modal-two.liquid try that as well. Hopefully this could help if not I can help trouble shoot further. 


If you're looking for help with Shopify development, please feel free to contact me at I'm a Certified Shopify developer and I'd be happy to help you with your project.
Shopify Partner
1959 345 474

Hi @JanAlexander,


Do you mind sharing your website so we can take a look? 

Just be reminded that we are volunteering to help.



 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

Keep your stuffs private. Refrain from giving unnecessary access to your store.
Shopify Partner
3 0 1

Sorry, if it were my site (still with the developer) I'd give you access. Are there any liquid files I can cut and paste to a doc you think might be the culprit?


Shopify Partner
3 0 1

I guess I'm adding a new modal to the existing structure. The developer created one page (dress sizes) and I'm trying to add another page I've created (vest sizes). So, on the dresses product pages when you click on Size Guide, the dress size modal pops up; on the vest product pages, the vest size modal should pop up. As you can see, when the Size Guide is clicked it brings up both pages, the popUpTitle (only) for the vests OVER the entire dress size guide. I want them to be two separate modals activated when dresses or vests are chosen. So, z-index isn't a factor here.

 As I mentioned in my first post, in order to create another modal similar to the first, I've duplicated the code by:

  • creating a new page -- renamed it sizing-two
  • that created a template -- page.sizing-two.json
  • in snippets -- duplicated size-guide-modal.liquid to size-guide-modal-two.liquid
  • in snippets -- product-size-guide.liquid -- duplicated the render line {% render 'size-guide-modal.liquid', sizeGuideType: 'xxxx' %} and changed it to modal-two.

I found pop-up-modal.liquid which called headings popUpTitle and popUpSubTitle -- do you think I should duplicate that for modal-two?

Both pages are being called when the Size Guide button (not a button) is clicked.

Thanks for your time,