Embedded Gift type

Last updated 1 month ago

Was this helpful?

Embedded Gift type

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

Device View: See how the block will appear to your customeron both PC and mobile devices.
Gift Eligibility: Check the block's appearance for customers who are either eligible or not eligible to receive a gift (not claimed/all gifts claimed).

Here is an example of how the embedded block looks on your storefront:

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

Layout

Decide how free gift items are displayed in the Embedded Gift block:

Vertical: Gifts are displayed in a row, side by side. Using the arrow button to view the later gifts.

Horizontal: Gifts are arranged in a column, one below the other.

Container

Customize the appearance of the container by adjusting the following settings:

Border color – Set the color of the container's border.
Border radius – Adjust the roundness of the container's corners.
Border width – Define the thickness of the container's border.
Background color – Choose the container’s background color.
Customize the spacing inside the container by adjusting the padding for each side:
- Padding Styling.styleAttribute.top: Top
- Styling.styleAttribute.bottom: Bottom
- Styling.styleAttribute.right: Right
- Styling.styleAttribute.left: Left

Product block

Customize the appearance of the block containing the gift products (in the container) by adjusting the following settings:

Border color – Set the color of the container's border.
Border radius – Adjust the roundness of the container's corners.
Border width – Define the thickness of the container's border.
Background color – Choose the container’s background color.
Customize the spacing inside the container by adjusting the padding for each side:
- Padding Styling.styleAttribute.top: Top
- Styling.styleAttribute.bottom: Bottom
- Styling.styleAttribute.right: Right
- Styling.styleAttribute.left: Left
Gap between product blocks: Adjust the slider to increase or reduce the spacing between the blocks

Header

Adjust the header's style:

Header size – Set the font size of the header text.
Font – Choose the font style for the header.
Padding – Adjust the spacing around the header.
Header color – Select the text color of the header.
Header background – Set the background color of the header section.

Divider

Tailer the divider line between the header and the gifts block:

Show divider: Decide to display or hide the divider on the block.
Width: Adjust the slider to increase the thickness of the divider.
Divider color: Select the color for the divider.

Product image

Change the way the product image shows up:

Image border radius: Adjust the slider to change the roundness of the product image.
Image size: Adjust the slider to make the product image look bigger.

Product item

Modify the item color to align with your store’s design and branding for a cohesive appearance.

Choose the font for all texts inside the product block.
Customize the font size, weight, and color of the Product title, "Free" text, and the Product price.
Item gap: Personalize the space between texts

Add button

This button only displays when you let your customers choose the gift manually.

Button size – Adjust the overall size of the button.
Button weight – Set the thickness of the button's text.
Font – Choose the font style for the button text.
Button text – Define the text displayed on the button.
Button background – Select the button’s background color.

Claim button

This section displays when a customer is eligible to receive the gift.

Here are some elements of a claim button that you can modify:

Text size: Adjust the overall size of the button
Text weight: Set the thickness of the button's text.
Font: Choose the font style for the button text.
Text color: Set the preffered color for the button.
Background color: Select the button’s background color.
Padding: Adjust the spacing around the button.

Warning toast message

This button will appear when an error occurs, such as when customers do not select the required number of gifts specified in the offer.
For example, if the offer allows adding three gifts to the cart but the customer selects only one, the button will be displayed as a notification.

Change the message style by using either of:

Text color: Set the preferred color for the message.
Background color: Select the message’s background color.

Confetti Effect

Decide to show the confetti effect of not when your customers meet the free gift condition.

Custom CSS

This section allows you to customize the embedded block with CSS code, giving you full control over its appearance and layout, thereby ensuring the embedded block 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.

Last updated 1 month ago

Was this helpful?

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

Device View: See how the block will appear to your customeron both PC and mobile devices.
Gift Eligibility: Check the block's appearance for customers who are either eligible or not eligible to receive a gift (not claimed/all gifts claimed).

Here is an example of how the embedded block looks on your storefront:

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

Layout

Decide how free gift items are displayed in the Embedded Gift block:

Vertical: Gifts are displayed in a row, side by side. Using the arrow button to view the later gifts.

Horizontal: Gifts are arranged in a column, one below the other.

Container

Customize the appearance of the container by adjusting the following settings:

Border color – Set the color of the container's border.
Border radius – Adjust the roundness of the container's corners.
Border width – Define the thickness of the container's border.
Background color – Choose the container’s background color.
Customize the spacing inside the container by adjusting the padding for each side:
- Padding Styling.styleAttribute.top: Top
- Styling.styleAttribute.bottom: Bottom
- Styling.styleAttribute.right: Right
- Styling.styleAttribute.left: Left

Product block

Customize the appearance of the block containing the gift products (in the container) by adjusting the following settings:

Border color – Set the color of the container's border.
Border radius – Adjust the roundness of the container's corners.
Border width – Define the thickness of the container's border.
Background color – Choose the container’s background color.
Customize the spacing inside the container by adjusting the padding for each side:
- Padding Styling.styleAttribute.top: Top
- Styling.styleAttribute.bottom: Bottom
- Styling.styleAttribute.right: Right
- Styling.styleAttribute.left: Left
Gap between product blocks: Adjust the slider to increase or reduce the spacing between the blocks

Header

Adjust the header's style:

Header size – Set the font size of the header text.
Font – Choose the font style for the header.
Padding – Adjust the spacing around the header.
Header color – Select the text color of the header.
Header background – Set the background color of the header section.

Divider

Tailer the divider line between the header and the gifts block:

Show divider: Decide to display or hide the divider on the block.
Width: Adjust the slider to increase the thickness of the divider.
Divider color: Select the color for the divider.

Product image

Change the way the product image shows up:

Image border radius: Adjust the slider to change the roundness of the product image.
Image size: Adjust the slider to make the product image look bigger.

Product item

Modify the item color to align with your store’s design and branding for a cohesive appearance.

Choose the font for all texts inside the product block.
Customize the font size, weight, and color of the Product title, "Free" text, and the Product price.
Item gap: Personalize the space between texts

Add button

This button only displays when you let your customers choose the gift manually.

Button size – Adjust the overall size of the button.
Button weight – Set the thickness of the button's text.
Font – Choose the font style for the button text.
Button text – Define the text displayed on the button.
Button background – Select the button’s background color.

Claim button

This section displays when a customer is eligible to receive the gift.

Here are some elements of a claim button that you can modify:

Text size: Adjust the overall size of the button
Text weight: Set the thickness of the button's text.
Font: Choose the font style for the button text.
Text color: Set the preffered color for the button.
Background color: Select the button’s background color.
Padding: Adjust the spacing around the button.

Warning toast message

This button will appear when an error occurs, such as when customers do not select the required number of gifts specified in the offer.
For example, if the offer allows adding three gifts to the cart but the customer selects only one, the button will be displayed as a notification.

Change the message style by using either of:

Text color: Set the preferred color for the message.
Background color: Select the message’s background color.

Confetti Effect

Decide to show the confetti effect of not when your customers meet the free gift condition.

Custom CSS

This section allows you to customize the embedded block with CSS code, giving you full control over its appearance and layout, thereby ensuring the embedded block 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!