How can I create a popup on the Dawn theme?

Enrico_Maggiolo
Shopify Partner
8 0 2

Hi Everyone,

I'm customizing Down theme for my shop.
I created an "image with text" section on homepage and I'm trying to open the link that I added as a popup.
How can I do that?

Thank's so much.

Replies 14 (14)

KetanKumar
Shopify Partner
36855 3637 11981

@Enrico_Maggiolo 

yes you have easy just check this example 

https://codepen.io/imprakash/pen/GgNMXO 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Enrico_Maggiolo
Shopify Partner
8 0 2

Thank's @KetanKumar,
but how can I integrate this code on text element on the theme?
I can add just a link, not classes or html code... 😉

KetanKumar
Shopify Partner
36855 3637 11981

@Enrico_Maggiolo 

yes its reuired to change html,liduie code and css 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Jsilvermist
Shopify Partner
5 0 1

Here is an example, though you might need to adjust the styles based on your current theme:

 

Sections/popup.liquid

<div id="{{ section.settings.trigger }}" class="popup__overlay">
  <div class="popup__box">
    <h2>{{ section.settings.title }}</h2>
    <a class="popup__close" href="#">&times;</a>
    <div class="popup__content">
      {{ section.settings.content }}
    </div>
  </div>
</div>

{% 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 %}

Now you just link to the id, eg:
<a href="#popup-id">Open Popup</a>

DavidR2D2
Excursionist
13 0 12

This doesn't work as it is. I copied the code you posted and added it to the file popup.liquid into Sections, then created a Custom Liquid section in my Theme Customization, with the HTML link popup, and it never works. 

Jsilvermist
Shopify Partner
5 0 1

Hello David,

 

I tested the exact code copy/pasted into an example site here:

https://sl-popup-example.myshopify.com/
Pass: popup

 

You can see that it's working fine, but due to some Shopify weirdness, you may want to try editing the {% stylesheet %} area by maybe adding a new line, saving, and then removing the new line, and saving again. Sometimes I've noticed you can get some cached weirdness and some updates get ignored. You can also move styles into a separate file if you'd like.

 

Screenshot 2022-04-02 162240.png

SKRASTS
Excursionist
27 0 4

Would you be able to provide more detail? I created the section with your code (thank you). I created a page where I've added the section and it looks like this:

 

SKRASTS_0-1651727156054.png

Is this page the actual popup and does that look right? So on the page that I want the popup, I link to it with the ID? If so, this doesn't seem to work for me. 

Jsilvermist
Shopify Partner
5 0 1

Looking at your popup, this part is exactly what I was mentioning about some Shopify weirdness with the CSS generation/caching:

Jsilvermist_0-1652221832998.png

This will normally be hidden, the fact that you're seeing it means the CSS wasn't applied properly. To fix this you can just add a new line within the {% stylesheet %} section, and save the file, then delete the newline then save again. This seems to force the stylesheet to regenerate and display properly.

 

As for your other question, the popup section should be added on the same page it's meant to be displayed on, which would be the same page if you use a link like `#popup-id` or a specific page if linked to like `/other-page#popup-id`.

Smiley1311
Shopify Partner
47 0 15

I am learning how to code so I apologize for such a stupid question....   Where does the   <a href="#popup-id">Open Popup</a>   go?    I am using Dawn 5.0.  Do I put it in the theme.liquid layout file at the bottom?

 

Thank you.

Jsilvermist
Shopify Partner
5 0 1

Hello Smiley,

 

That was me demonstrating a hyperlink since that's how it's done in HTML, but you can link to it from anywhere in the Shopify theme CMS that lets you add a link, by adding the ID you use for the pop-up. ie. Typing #WHAT_YOU_CHOSE in the link area in the CMS textbox, and clicking the little pop-up above the link field to save your entry.

ErSanjay
Shopify Partner
307 20 44

@Jsilvermist  thanks for your code but now the latest version Dawn theme has a popup why not use that.

Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.
Jsilvermist
Shopify Partner
5 0 1

I'm not sure what you're referring to, could you clarify?

made4Uo
Shopify Partner
3829 716 1159

Add a pop up modal with a timer

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

MRamzan
Shopify Partner
165 2 23
You can try below code. It works for me. Just paste this code wherever you want to display popup and it will show you a click button link. Once you will click then it will show you a popup with table. You can update values in the table or you can remove that table and add text. Let me know if you still have any issues. Thanks.
 
<style>
      .sizeguide-box {
        width: 40%;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.2);
        padding: 35px;
        border: 2px solid #fff;
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
      }

 

      .sizeguide-box .button {
        font-size: 1em;
        padding: 10px;
        color: #333;
        border: 2px solid #06d85f;
        border-radius: 20px/50px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-out;
      }
      .sizeguide-box .button:hover {
        background: #06d85f;
      }

 

      #sizepopup.overlay {
        position: fixed;
        z-index: 9;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        transition: opacity 500ms;
        visibility: hidden;
        opacity: 0;
      }
      #sizepopup.overlay:target {
        visibility: visible;
        opacity: 1;
      }

 

      #sizepopup .popup {
        margin: 70px auto;
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        width: 20%;
        position: relative;
        transition: all 5s ease-in-out;
      }

 

      #sizepopup .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
      }
      #sizepopup .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
      }
      #sizepopup .popup .close:hover {
        color: #06d85f;
      }
      #sizepopup .popup .content {
        max-height: 30%;
        overflow: auto;
      }
      #sizepopup table {
        width: -webkit-fill-available;
      }
      #sizepopup table,
      #sizepopup tr,
      #sizepopup th,
      #sizepopup td {
        border: 1px solid;
        border-collapse: collapse;
      }
      #sizepopup tr,
      #sizepopup th,
      #sizepopup td {
        padding: 10px 20px;
      }
      @media screen and (max-width: 700px) {
        #sizepopup .popup {
          width: 93%;
        }
      }
      
    </style>
    <a class="button sizeguide-box" href="#sizepopup">➤ Size guide</a>

 

    <div id="sizepopup" class="overlay">
      <div class="popup">
        <h2>Size Guide</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
          <table>
            <tr>
              <th>SIZE</th>
              <th>CHEST</th>
              <th>WAIST</th>
            </tr>
            <tr>
              <td>80 cm</td>
              <td>80 cm</td>
              <td>80 cm</td>
            </tr>
            <tr>
              <td>80 cm</td>
              <td>80 cm</td>
              <td>80 cm</td>
            </tr>
            <tr>
              <td>80 cm</td>
              <td>80 cm</td>
              <td>80 cm</td>
            </tr>
            <tr>
              <td>80 cm</td>
              <td>80 cm</td>
              <td>80 cm</td>
            </tr>
            <tr>
              <td>80 cm</td>
              <td>80 cm</td>
              <td>80 cm</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112