# 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:

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Fhkswq3cBjtiEru8pO6c4%2Fimage.png?alt=media&#x26;token=e7f921fa-c6d2-4819-968f-57498b3e36a3" alt=""><figcaption><p>Embed on the product page block</p></figcaption></figure>

{% hint style="info" %}
You can hover an element in the preview to locate the edit option.&#x20;
{% endhint %}

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2Ff07hF9VxiEK0lDgnk8We%2Fimage.png?alt=media&#x26;token=776ce6c5-b8b1-4760-8768-f6aa7254fdc4" alt=""><figcaption></figcaption></figure>

## Layout <a href="#customization-options" id="customization-options"></a>

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.&#x20;

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2FsqC7Kk3WdhYbKdifwViP%2Fimage.png?alt=media&#x26;token=6024a9ae-5374-4995-b1b8-af36e45b9560" alt=""><figcaption><p>Verical</p></figcaption></figure>

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

<figure><img src="https://2782088585-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTxhG4dtLtoZ8LGb73m7%2Fuploads%2FSsjMTHhfPmIh9nWctmGS%2Fimage.png?alt=media&#x26;token=040992ec-e884-4817-b72e-c77346c6ca45" alt=""><figcaption><p>Horizontal</p></figcaption></figure>

## **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&#x20;
  * 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&#x20;
  * 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 <a href="#customization-options" id="customization-options"></a>

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 <a href="#customization-options" id="customization-options"></a>

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

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

## Product image <a href="#customization-options" id="customization-options"></a>

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.&#x20;

## Product item <a href="#customization-options" id="customization-options"></a>

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.&#x20;
* Customize the **font size, weight, and color** of the **Product title**, **"Free" text**, and the **Product price**.&#x20;
* **Item gap:** Personalize the space between texts

## Add button <a href="#customization-options" id="customization-options"></a>

{% hint style="success" %}
This button only displays when you let your **customers choose the gift manually.**&#x20;
{% endhint %}

* **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

{% hint style="warning" %}
This section displays when a customer is eligible to receive the gift.
{% endhint %}

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 <a href="#customization-options" id="customization-options"></a>

> 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.&#x20;

## Confetti Effect <a href="#customization-options" id="customization-options"></a>

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

## Custom CSS <a href="#customization-options" id="customization-options"></a>

* 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.

{% hint style="info" %}
In case you want to change the text of buttons and messages, please go to the [**Translation**](https://document.tek-labs.app/salepify-userguide/user-guides/translation) section or **contact us** for further assistance.
{% endhint %}

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! :heart\_hands: