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

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

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 - */

Add the code to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

3

Add Javascript

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Pipeline 4 - If you're working with a draft theme, open this file:

assets/theme.js

Earlier versions of Pipeline, you'll be opening this file:

assets/shop.js.liquid

Code to add:

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

Add the code to the very  bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file.

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.


Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us