TABLE OF CONTENTS

• I. General Settings
• II. Block Settings
  • 1. Banner
  • 2. HTML
  • 3. Paragraph
  • 4. Form
  • 5. Countdown Timer

Modify the Newsletter Popup

I. General Settings

- Style: choose a style for showing the popup

• Time on page: after a certain time (this can be set in the Delay time below), the popup will appear
• Exit Intent - Triggered popup: when you move the mouse out of the page, the popup will be shown
• Scroll: when you scroll up or down, the popup will be shown

- Tick to Show only on home page (hide the popup on the other pages)

- Delay time: drag to decide how many seconds the popup will appear

- Scroll position: it counts from the top to the number you set (You drag to 500px, so when you open the site and scroll down until it counts to 500px, then the popup will be shown). It applies to the Scroll style

- Expires in hour(s): set the expired time for the popup in hour(s). You can leave it 0 to always show 

 POPUP STYLES

- Popup padding: set the padding for this whole section following the order: Top Right Bottom Left (Eg: 20px 30px 50px 30px). As always, if you want to set the different section paddings for Desktop, Mobile, and Tablet, you just need to add a comma between values. For example, 20px 30px 50px 30px, 10px 30px 50px 20px, 20px 40px 30px 40px - Mobile, Tablet, Desktop (After a comma, the margin will be set for another device)

THEME SETTINGS

- Use Subscription from: choose an option to use the subscription for the popup

• Shopify
• Klaviyo 
• Mailchimp

- Form URL: paste your form URL here (Not use for Shopify type)

• You can take this as a reference on How to get the Klaviyo form URL 
• Also a reference to show you How to insert the Klaviyo form URL to Newsletter section
• More information for the Klaviyo and Mailchimp

- Spacing: add values in pixel to adjust spacing between items (Eg: 20px, 40px - Mobile, Desktop respectively)

II. Block Settings

1. Banner

- Desktop: Select a banner only for desktop

- Mobile: Select a banner

- Select image height style: Choose an option to decide your favorite ratio for the banner

- Manually height: you can set the height for the banner manually if you don't satisfy with the default height. (Eg: 350px,470px,600px - Mobile,Tablet,Desktop respectively)

- Crop position: this is to help you focus on displaying a specific point in the image. You can type the position (right/ left/ center) to adjust 

GENERAL SETTINGS

- Block position: choose an position to place the banner

- Block margin: set the margin for this block following the order: Top Right Bottom Left (Eg: 20px 30px 50px 30px). As always, if you want to set the different block margins for Desktop, Mobile, and Tablet, you just need to add a comma between values. For example, 20px 30px 50px 30px, 10px 30px 50px 20px, 20px 40px 30px 40px - Mobile, Tablet, Desktop (After a comma, the margin will be set for another device)

- Block padding: add values with the same format with the margin

2. HTML

- HTML: insert the HTML code into the box to display 

GENERAL SETTINGS

- Block position: choose an position to place the text

- Block margin

- Block padding

3. Paragraph

FIRST CONTENT and SECOND CONTENT

- Write your content here: insert the text to the box

- Adjust content font size: fill the value to the box to adjust font size (Eg: 20px). Remember to use commas to separate the settings for different devices (Eg: 20px, 20px, 30px - Mobile,Tablet,Desktop respectively)

- Text color

GENERAL SETTINGS

- Block position: choose an position to place the first and second content

- Content alignment: align the text (E.g: center, left)

- Block margin

- Block padding

4. Form

GENERAL SETTINGS

- Button style: click "up or down" to change the button style (you can learn how to create your own button style at the Default Button)

- Block position: choose an position to place the form

- Block margin

- Block padding

5. Countdown Timer

- Date countdown: with the format - DD/MM/YYYY HH:MM

- Show Date label: show the text (days, hours, minutes, seconds) 

- Adjust font size: fill the value to the box to adjust font size (Eg: 20px)

- Adjust font weight: drag to set the font weight as you want

GENERAL SETTINGS

- Block position: choose an position to place the countdown timer

- Content alignment: align the text (E.g: center, left)

- Block margin

- Block padding