Pop-up

The pop-up is a box that opens over the page. Chisel uses it for three jobs: a newsletter sign-up, a short announcement with a button, and an age check. It opens in front of the page, the rest of the page is dimmed, and the shopper can close it with the Close button or the Escape key. The age check is the only one that stays until the shopper confirms.

Before you begin

• Decide which job the pop-up does. Use one pop-up for one message. A second pop-up on the same store competes with the first.
• Set up the newsletter form in your store first, if you plan to use the newsletter type. The pop-up uses the same sign-up form as the footer.
• Pick a clear image if you want one. Use a landscape or square photo of your products or your shop. It appears in a 4:3 frame.

1. Add the pop-up to the footer

The pop-up lives in the footer section group, so it appears on every page of the store.

1. In the Shopify admin, go to Online Store > Themes. Select Customize on the Chisel theme.
2. In the left panel, select the footer section group at the bottom of the sections list.
3. Select Add section, then choose Pop-up.
4. Select Save.

The pop-up is closed while you edit it, so you will not see it in the preview unless you turn on Always show while customising (see step 5).

2. Choose the type

Open the pop-up settings and choose a Type.

• Newsletter sign-up shows a heading, a text, and the newsletter form. Use it to collect email addresses.
• Announcement shows a heading, rich text, and one button with a label and a link. Use it for a sale, a delivery notice or a new range.
• Age check shows a heading, a text, and two buttons: I am 18 or over and Leave. The shopper must confirm before they can use the store. Escape does not close this type.

3. Write the text

1. Enter the Heading. Keep it short, such as "Join the trade list".
2. Enter the Text for the newsletter type or the age check.
3. For the announcement type, enter the Text in the rich text box. Add bold text or a link if you need them.
4. For the announcement type, enter the Button label and the Button link. Leave the link empty to send the shopper to the home page.
5. For the age check, enter the Leave link if the shopper should go somewhere else. Leave it empty and Leave takes the shopper back one page.

4. Add an image

Choose an Image. On screens 750 px wide and wider, the image sits beside the text in a 4:3 frame. On phones it sits above the text. Leave the image empty to show the text only.

5. Set when it shows

• Delay before showing sets how many seconds to wait after the page loads. It can be 0 to 30 seconds. The age check always shows at once.
• How often to show controls how often a shopper sees the pop-up:
• Every visit shows it each time the shopper opens the store.
• Once a day and Once a week remember the time the pop-up was shown, in the shopper's browser.
• Once only shows it one time in that browser.
• Show on phones turns the pop-up on or off for phones. Turn it off if the pop-up covers too much of the screen for your offer.
• Always show while customising opens the pop-up while you edit the theme and have the pop-up selected. Turn it off when you finish, so you can see the normal behaviour.

For the age check, the choice is remembered when the shopper confirms. For the other types, it is remembered when the pop-up opens.

6. Check the pop-up

1. Open the store in a new browser window, so the shopper's settings are fresh.
2. Wait for the delay, or use the setting Every visit while you test.
3. Close the pop-up with the Close button and with the Escape key. Check that the page returns to where you were.
4. Submit the newsletter form in a test. The pop-up opens once more and shows the thank-you message.
5. Turn Always show while customising off when you are done.

Things to know

• The pop-up does not open on the cart page or the password page. It also stays closed for that visit if another box, such as the compare list or the cart drawer, is already open when it is due to show.
• After a newsletter sign-up, the pop-up opens once with the thank-you message. It does not open again on the next page view when the shopper has already seen it under your chosen frequency.
• Without JavaScript the pop-up does not appear. This is expected: shoppers who block scripts see the page without the pop-up.
• Keep the age check to the legal age in your country. The check is a notice. It does not verify a shopper's age.
• The pop-up follows the theme's text direction, so it works for right-to-left languages.