Popup Gift type

At the top of the page, there are viewing modes to help you review your popup layout:

• Device View: See how the popup will appear to your customers on both PC and mobile devices.

• Gift Selection: View how the popup looks when the gift is automatically added versus when customers can manually select their gift.

  • Automatically add gift: Check the popup appearance when the condition is met or not met.

  • Manually choose gift: Check the popup appearance when the

    • Condition not met: Customers are not eligible to receive the gift.

    • Condition met - before claiming: Customers are eligible to receive the gift but have not claimed it.

    • Condition met - after claiming: Customers are eligible to receive the gift and have claimed it.

Here is an example of how the new Free Gift popup looks on your storefront:

Popup Gift

You can hover an element in the preview to locate the edit option.

Background section

Modify background-related elements with the following options:

• Background color – Set the overall background color.

• Close button color – Customize the color of the close button.

Header style

Customize the header's appearance with the following options:

• Header text color – Set the color of the header text.

• Text size – Adjust the font size of the header text.

• Font – Choose the font style for the header.

Main offer section

Customize the key elements in your main offer section to ensure it aligns with your store’s branding and user experience.

• Offer title

  • Text size: Adjust the font size of the offer title.

  • Font: Choose the font style that best matches your store’s theme.

  • Text color: Select the color for the offer title text.

• View more/View less text

  • Text size: Set the size for the “View more” or “View less” text.

  • Font: Pick a font style for the texts.

  • Text color: Choose a color for the text.

• Upsell message block

  • Text size: Adjust the size of the upsell message.

  • Font: Pick a font style for the message.

  • Text color: Choose a color for the upsell message.

  • Background color: Set the background color of the upsell block.

  • Padding: Adjust the padding to add spacing around the upsell message.

  • "Add" button and quantity selector color: Choose a color for the "Add" button.

• Border:

  • Border color: Set the color of the button's border.

  • Border width: Define the thickness of the border around the button.

  • Border radius: Adjust the roundness of the button's corners.

Product Detail Section

Customize the item colors in the product detail section to match your store’s design:

• Free text color: Set the color for the free text displayed in the product detail section.

• Product text color: Choose the color for the required products' names and prices.

• Price text color: Customize the original price color of the gift item.

Manually Choose Gift Section

This section is displayed only when you select the "Customer manually select gift" option in your Free Gift rule setup.

• Selected text color: Customize the color of the text indicating the selected gift.

• Claim Button

  • Text size: Adjust the size of the button text.

  • Text weight: Set the thickness of the text on the button.

  • Font: Choose a font style, or upload a custom offline font to apply it to the popup.

  • Text color: Select the color for the text on the button.

  • Background color: Pick the background color for the Claim button.

  • Padding: Adjust the padding around the button text.

Gift Icon

Customize the appearance of the gift icon in the popup with the following options:

• Position: Set the position of the gift icon within the popup.

• Text color: Choose the color for the text associated with the gift icon.

• Use the default icon or upload an image: Select whether to use the default gift icon or upload a custom image to serve as the gift icon in the popup.

• Border color: Set the color of the border around the gift icon.

• Border radius: Adjust the roundness of the icon’s border corners.

• Border width: Define the thickness of the border around the gift icon.

Animation

• Popup animation: Choose the type of animation you’d like for the popup to appear (e.g., fade-in, slide-in, etc.).

• Confetti effect: Decide whether to display a confetti effect when customers meet the free gift condition or hide it from the frontend.

Custom CSS section

• This section allows you to customize the popup with CSS code, giving you full control over its appearance and layout, thereby ensuring the popup aligns perfectly with your store’s style.

• If you’re unable to do it, don’t worry! Just click the Contact Us button, and our team will assist you right away.

In case you want to change the text of buttons and messages, please go to the Translation section or contact us for further assistance.

If you have any questions, just send us a message via Live Chat or email us at [email protected]. Good luck with your promotion campaign! ❤️