Dawn theme - put Shopify's contact form into custom link popup?

Store Design
, , , ,

Topic summary

A user is attempting to integrate Shopify’s default contact form into a custom popup modal on their Dawn theme product page. They initially tried embedding the form directly within their popup HTML/CSS code but encountered a Liquid error stating “Cannot render sections inside sections.”

Solution Found:

  • Place the popup trigger link (<a class="pop-button" href="#popup1">) in the product-main section
  • Move the popup container code and contact form snippet ({% section 'contact-form' %}) to the theme.liquid file instead
  • This separation resolved the Liquid rendering error

Remaining Issue:
After implementation, the contact form briefly flashes/appears on page load before disappearing. The user reports this happens on every page refresh, even after clearing cache and cookies. The discussion remains open with this visual glitch unresolved.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello, how can one put shopifys default contact form into my custom link popup? code below…

Contact us

XXXXXXXX

×

-----------ENTER SHOPIFY DEFAULT CONTACT FORM HERE -----------

h2 { text-align: left; font-family: work sans; font-weight:500; color: #000; } .payment { max-width: 200px; } .button { font-family: work sans; font-weight: 500; font-size: 14px; padding: 10px; color: #000; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: all 0.3s ease-out; } .button:hover { text-decoration: none; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; width: 40%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #000; font-family: work sans; } .popup .close { position: absolute; top: 10px; right: 20px; transition: all 200ms; font-size: 30px; font-weight: 500; text-decoration: none; color: #000; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } .secure{font-weight:500;} .free{font-weight:500;}
2

Hi @xnyjyh

You can try to update your code to this and check


Contact us

## XXXXXXXX
×

{% section 'contact-form' %}
3

Hi Dan,

I get this error:

Liquid error (sections/main-product line 297): Cannot render sections inside sections

4

I recommend you put that code in your theme.liuqid file instead of adding code in another section liquid file

5

So should I leave :

Shipping & Returns

and the rest in theme.liquid?

6

Yes, it worked leaving the :

Contact us

…in product-main and rest of code in theme.liquid!

7

Hmmm, i ran into a weird problem! when I refresh any page and after even clearing cache/cookies. the contact form flashes for a quick moment. If you go to my site you will see what I mean when you refresh any page.