How to add a pop-up window with static content

If you're using and older version of the theme, before Pipeline 3.0, you can use this basic customization to add a pop-up window with some text to a product page (will works with Pages and Blogs as well). In Pipeline 3.0, we introduced this feature for Product pages but with more functionality as you can load an entire page as a pop-up window (like a size chart). In Pipeline 3.0 this is also automatically added to all your product pages (if you turn on the feature) whereas the following customization needs to be added manually to each product page individually. One benefit is you can have different content in each pop-up. For Pages and Blogs, this can also be handy if you need a custom message on your page or blog post. 

Result:

Step 1

This is the HTML code you'll need to add to your Product page, Page or Blog post (use the code icon in the toolbar to evoke the code view)

HTML code:

<p><a href="#popup-message" class="open__popup border-bottom-link uppercase">Click to view</a></p>

<div id="popup-message" class="display__popup mfp-hide">

My pop-up content

</div>
  • The first part has the link text "Click to view", you can change that what you like. Keep the rest the same. 
  • The second part is the actual pop-up box content - You can modify the "My pop-up content" portion. Add the required text here that you want displayed in the pop-up box. This content can be wrapped in HTML <p></p> tags.

Step 2

On a new line, add the following code to very bottom of this file:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

Add this code:

.display__popup {
  position: relative;
  background: #FFFFFF;
  padding: 5rem;
  width:auto;
  max-width: 80%;
  margin: 2rem auto;
}

Save the file.

Step 3

On a new line, add the following code to very bottom of this file:

https://myshopify.com/admin/themes/current/?key=assets/shop.js.liquid&line=9999

$(document).ready(function() {
  $('.open__popup').magnificPopup({type:'inline',midClick: true});  
});

Save the file.

Now you can test the pop-up on your site. 

Notes:

If you're on Pipeline 3.0, you can find the feature in the Theme Editor when you edit any Product page (Product page section setting). That drop-down allows you to choose a pre-made page which can be used as the pop-up content (much simpler than this custom code method):


Adding additional static content popups

For additional unique content, you can simply use another unique ID to call the pop-up and place your content within the a DIV that has that ID.

Example,

In (1) use a new ID like "#popup-message-2" and then in the next section (2) reference that ID again and place your unique content within.

Sample code:

<p><a href="#popup-message2" class="open__popup border-bottom-link uppercase">Click to view</a></p>

<div id="popup-message2" class="display__popup mfp-hide">

My content for pop-up box number 2

</div>

Follow the same concept for additional pop-up content windows.

Still need help? Contact Us Contact Us