How to create a modal popup on the homepage in Dawn?

Store Design
1

Hi there - I need assistance creating a modal popup on my client’s homepage.

We currently have the modal popup working on the product pages (view size chart) but we’d like this option available on the homepage too.

I’ve found where the modal code is in the product page, but just cannot workout how to make this work on the homepage. We want the image with the yellow arrows to be able to be clicked and enlarged into a modal popup. Thank you!

Link to site here: https://ld2s3mtw005620gs-62832181464.shopifypreview.com

1 Like
2

@kirsten11123

It’s a customization work,
For that you have to hire a developer or expert, if you are not able to customize it.

Thank you.

3

Thanks for your reply @Mr_RaviRaj

Am I wrong in thinking I can add this modal code as a new section?

4

@kirsten11123

yes, You are right to create it in the new section.

But you have to Build your logic, if you need to try to Achieve this for your Client.

5

In the preview url ,when I click the size image inside the sizing-guide accordion all it does is open the image in a new browser tab.

It does not put it in a modal similar to how the main product photograph behaves when clicked.

Really though your question is verry broooad and isn’t clear where the issue is.

Until you have a more solid example or narrow down the issue for others to examine you may instead want to just use the newer element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Adam argyle has an great UI video on it https://www.youtube.com/watch?v=GDzzIlRhEzM that can have at least something in place until you figure out a cleaner theme integration.

If you need a full code solution contact me for such a customization.

6

Thanks for your response @PaulNewton

Sorry for the lack of clarity. On the product page, there is a simple text link that opens an image modal of the size chart. It’s different from the size guide accordion tab.

We want this pop up function to be visible either through a link or a button on the homepage.

Does this clarify my question further?

Really appreciate your help with this!

7

@kirsten11123 the preview has expired.

. On the product page, there is a simple text link that opens an image modal of the size chart. It’s different from the size guide accordion tab.

No as I saw no such text links on the homepage at all either no were thier any obvious console errors.

Pointing to the product page alone is just pointing to something that’s working without the more important explanation of what you’ve done when your trying to solve something’s that’s broken on a completely different area of a website.

Use working parts for contrast , not for sole diagnosis alone; others need to see what’s wrong in context on the index template. aka show your work and it’s issue.

If your using a dawn based themes code/block/section try to reference the code~line on the dawns open source repo on github to minimize the digging others have to do in any attempt of a solution.

Goodluck.