How to add a pop-up window with static content

If you'd like to add a pop-up window with custom content to your Pages, Blog posts or Product pages, you can use this customization:

Result:

Note: Product pages in Pipeline 3 hand higher have an option for a size-chart pop-up without any code. 

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

1

Add HTML in your Rich Text Editor

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 for Rich Text Editor:

<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.

2

Add style code

CSS code for modal window pop-up:

/* -- style code for pop-up window -- */
.display__popup {
  position: relative;
  background: #FFFFFF;
  padding: 5rem;
  width:auto;
  max-width: 80%;
  margin: 2rem auto;
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

3

Add Javascript

Code to add:

/* -- code for custom pop-up window -- */
$(document).ready(function() {
  $('.open__popup').magnificPopup({type:'inline',midClick: true});  
});
/* - end - */

Where do I add the Javascript code?

Use this link to learn where exactly to add this code snippet:

Where to add your Javascript code

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

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>

Make sure each additional pop-up has a unique ID (needed in two places for each):

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

Size charts in Pipeline 3 and higher

You can add a pop-up windows with the content of a page, ideal for size charts. This is only for the product pages:

That option is found in the Product page settings.