Popup Gift type
Last updated
Was this helpful?
Last updated
Was this helpful?
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:
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.
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.
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.
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.
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.
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.
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.
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 section or contact us for further assistance.
If you have any questions, just send us a message via Live Chat or email us at support@tek-labs.app. Good luck with your promotion campaign!