Dawn Theme: PopUp Without Additional Apps

Store Design
, , ,
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?