Dawn Theme: PopUp Without Additional Apps

Store Design
, , ,

Topic summary

Goal: Add a promotional popup in the Shopify Dawn theme without third‑party apps (to avoid Google Fonts/GDPR concerns).

Proposed solution: A custom Section (popup.liquid) is provided via a code snippet. It renders a modal overlay with title, rich text content, a close button, and responsive CSS using :target to toggle visibility. The section schema includes settings for trigger ID, title, and content.

How to implement: Create popup.liquid in Theme > Edit code > Sections, paste the provided code. Then in Admin > Online Store > Themes > Customize, add the new “Popup” section and configure its settings.

User questions addressed: Where to edit the popup after creating the file—answer: in the Theme Editor (Customize) by adding the section and setting its fields.

Unresolved items: No confirmation that the snippet works on Dawn 15.2. No explicit statement that Dawn includes a built‑in popup; the custom code suggests it does not.

Notes: The embedded code snippet is central to the solution. The approach avoids additional apps, aligning with GDPR-related font concerns.

Summarized with AI on December 17. AI used: gpt-5.
1

Hello,
I use for my store the theme “Dawn” I would like to include a popup, for example to advertise a Christmas promotion or similar. But I would like to do without additional apps as far as possible, because they mostly use Google Fonts which is currently quite bad (GDPR).
Does anyone have any ideas, or does Dawn already bring something like this automatically?
Thanks for the help.

3 Likes
2

Create pop-up.liquid file in Theme > Edit code > Sections folder, then past this code into that file

Open Popup

  

    ## {{ section.settings.title }}
    ×
    

      {{ section.settings.content }}
    

  

{% schema %}
  {
    "name": "Popup",
    "settings": [
      {
        "id": "trigger",
        "type": "text",
        "label": "ID",
        "info": "Unique ID for popup trigger"
      },
      {
        "id": "title",
        "type": "text",
        "label": "Title"
      },
      {
        "id": "content",
        "type": "richtext",
        "label": "Content"
      }
    ],
    "presets": [{
      "name": "Popup",
      "category": "Window"
    }]
  }
{% endschema %}

{% stylesheet %}
  .popup__overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0, 0, 0, 0.7);
    transition: opacity 500ms ease-in-out;
    visibility: hidden;
    opacity: 0;
  }

  .popup__overlay:target {
    visibility: visible;
    opacity: 1;
    z-index: 99;
  }

  .popup__box {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    width: 40%;
    position: relative;
  }

  .popup__box h2 {
    color: #333;
    font-size: 2em;
    font-weight: bold;
    font-family: Verdana, sans-serif;
    margin-top: 0;
  }

  .popup__close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms ease-out;
    color: #333;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.25;
    text-decoration: none;
  }

  .popup__close:hover {
    color: #660000;
  }

  .popup__content {
    max-height: 30%;
    overflow: auto;
  }

  @media screen and (max-width: 1280px) {
    .popup__box {
      width: 60%;
    }
  }

  @media screen and (max-width: 720px) {
    .popup__box {
      width: 80%;
    }
  }
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Try it and let me know

1 Like
3

Where do you edit the pop-up post creating the .liquid folder?

4

I did this, but how do I find the pop-up editing page after done this?

5

Just go to the shops admin: On the left: Sales Channels → Online Store → Themes → your theme where you added it → Press the Customize button on the right…

Then Press on a (+) Button to add a section and configure it.

6

Will this work with Dawn 15.2?