---
description: >-
  Add the section to display the Cart drawer with the recently added products to
  the cart. Use the blocks described in the current section to customize the
  empty Cart drawer.
---

# Cart drawer

{% hint style="success" %}
**Tip:** If a layout does not come with the section, it can be added manually by pressing the **"Add section"** button and choosing it from the proposed list of sections.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FjRkiSUe7n5RNybhdf5ZE%2Fadd_cart%20drawer.png?alt=media&#x26;token=0f4761c9-c975-482f-918d-6c564a4474c4" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Regardless of the [action taken after adding a product to the cart](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/cart#action-after-adding-to-cart), the cart drawer will appear on the right when the cart icon in the Header is clicked, provided the drawer is activated.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8gkrz13p0qMK06l15op1%2Fmini%20cart.png?alt=media&#x26;token=ccd3fb9a-0e61-479d-aa10-dfb74c0d446e" alt=""><figcaption></figcaption></figure>

To decide on the content that should be displayed in the Cart drawer, use the options provided below:

**Show vendor**

Hit the **"Show vendor"** checkbox to display a product brand above a title.

**Show confirmation checkbox**

If your store requires customers to accept the terms of use before proceeding to the Checkout page, click the **"Show confirmation checkbox"** option.

\*The confirmation text can be changed under the "Theme content" page of your admin by pressing the "Sections" tab and scrolling down to the "Cart drawer" block.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FaN1GpkoqjEguERyimF4t%2Fcart%20darwer_edit.png?alt=media&#x26;token=31994706-6198-4e94-b463-953384810c38" alt=""><figcaption></figcaption></figure>

**Show notes**

{% hint style="info" %}
The notes entered into the "Order special instruction" input field will appear in your _Shopify admin -> Orders -> Notes_.
{% endhint %}

Enable the option to display the input field for special instructions to the order in the Cart drawer.

**Open notes by default**

Tick the checkbox to display the notes area in an expanded view by default.

In the following example, you can view the options in the cart drawer described above:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F855JTZDlBEFqhim9ChgT%2Fcart%20darwer_settings.png?alt=media&#x26;token=4b41de66-164d-49b8-8565-caab17c87d88" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** The current section offers two unique blocks, each of which can be added only once to customize the Cart drawer without products added to the Cart. The blocks will be hidden automatically after the first product is added to the Cart.
{% endhint %}

To add each block, hover over the section title and press the plus button.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F0mS4kUUcQKAJBWa1ZnfC%2Fadd%20block_plus%20bttn.png?alt=media&#x26;token=47a962f5-8609-4771-b661-b50ae9ed9aac" alt="" width="352"><figcaption></figcaption></figure>



Then, select the "Image (Empty)" or "Collection slider (Empty)" block. Customization guidelines for these sections are provided below.

***

## Image (Empty)

### Image

In the **"Main image"** selector, press "Select" to upload the necessary animation for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height). Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the **"Link"** source selector. The link redirection will be applied to the image only.

If you need to change the **"Image overlay background"**, select the color from the color picker. By default, the color is set to transparent.

Press **"Image overlay gradient"** to apply the gradient vector. Read details on how to use the option [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).

Adjust the transparency of an image gradient overlay using the **"Image overlay opacity"** scale from 0 to 100%.

### Heading

Use the **"Heading"** field to insert a title. The **"Heading size"** can be changed to "Large", "Medium", or "Small".

If you need to change a title color, use the **"Heading color"** picker. The same color as for the desktop can be applied to the mobile view by enabling the "**Apply color on mobile"** option.

### Text

Use the **"Description"** input field to add some descriptive text strings to the section that will appear under the heading.

Additionally, you can insert a text paragraph in the **"Description"** placeholder and connect a page in the **"Custom HTML"**. Alternatively, just connect a page with the block using the "Custom HTML" selector. Press "Select page" to choose the created page from the list or add a new one by pressing the **"Create page"** button. If you press the **"Create page"** button, you will be redirected to your _Shopify admin -> Online Store -> Pages_. Read details on how to create pages in the following [article](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-create-webpages).

If you need to change the description color, use the **"Text"** picker. The same color as for the desktop can be applied to the mobile view by enabling the **"Apply color on mobile"** option.

### Button/Second button <a href="#button-second-button" id="button-second-button"></a>

Change the internal button text in the **"Label"** field. Leave the field blank to hide the button.

To redirect customers to the desired page, edit the **"Link"**. Use the link from the source selector, or paste the one if you use an external link.

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style, the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

Turn on the **"Apply color on mobile"** option to use the same color on mobile.

### Layout <a href="#text" id="text"></a>

{% hint style="success" %}
**Tip:** Use options in the **"Mobile settings"** sub-section to change the section layout on mobile. Read details [<mark style="color:blue;">here</mark>](#mobile-settings-1).
{% endhint %}

The **"Desktop text position"** option helps to place texts in a desired position: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right". Choose an option using the drop-down that best fits your needs.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the **"Desktop text alignment"** drop-down.

In the **"Text box desktop background"**, you can set the color from the color picker. By default, the color is set to transparent.

Use the **"Text box desktop opacity"** scale to change the text box background opacity from 0 to 100 %, where 0% is an invisible background, and 100% is opaque.

The **"Text box desktop width"** scale allows text width to be set from 30% to 100%.

Use the **"Height"** options to adapt a media to the desired size. There are a few available options that can be selected from the drop-down:

* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"Proportion in %"**. Select the option to adjust a media height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 10% to 210%.

\*The "Proportion in %" option is applied to mobile by default. To modify the height specifically for mobile, activate the "[<mark style="color:blue;">Mobile settings</mark>](#mobile-settings-1)" in the sub-section below.

**"Proportion in %"** indicators:

\*100% = Square image

\*Less than 100% = Landscape

\*More than 100% = Portrait

### Animation

{% hint style="warning" %}
**Note!** The **"Image behavior"** and **"Desktop hover animation"** provide settings for adding image animation. Decide on an image animation effect from one of the drop-downs, as these settings may not work together. Use the "None" option for the unnecessary feature.
{% endhint %}

To add a dynamic image motion to a static image, select the option under the **"Image behavior"** drop-down:

* **"None"**. Disables smooth image motion.
* **"Ambient movement"**. The option adds a slight circular movement to an image.
* **"Zoom in out"**. Creates a smooth zoom-in and then zoom-out effect on the image.
* **"Zoom out in"**. Applies a zoom-out effect followed by image enlargement.
* **"Zoom random"**. Using multiple images in a slideshow, this option will randomly zoom in or out as each image changes.

**Desktop hover animation**

If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the **"Inherit global settings"** option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "**Banner image desktop hover animation**" drop-down. Read the details on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/styles).

The options **"Zoom in"** and **"Zoom out"** place the zooming effect to enlarge or decrease an image on the mouse hover. You can activate the opacity over the image by choosing **"Add overlay opacity"** and selecting a color for the _"Image overlay background"_ or _"Image overlay gradient"_ (read the details [<mark style="color:blue;">above</mark>](#image)). To use this option, make sure that the _"Image overlay opacity"_ is set up to be transparent. The overlay opacity and zooming effect on an image can be achieved with an active **"Zoom in, add overlay opacity"** or **"Zoom out, add overlay opacity"**. The option **"None"** deactivates the animation.

You can read more about the described options on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#animation).

### Mobile settings <a href="#mobile-settings-1" id="mobile-settings-1"></a>

The settings described below can be applied for mobile mode regardless of the desktop settings by activating the **"Enable mobile settings"** option.

**Image (Optional)**

Here you can select an image for mobile individually. Otherwise, the same image as for the desktop will be shown on mobile view. Press on **"Select"** to upload the one you need. The recommended image ratio is two-to-one (width-to-height respectively).

Check the **"Show image overlay"** option to display the color overlay of the image. This option works with the configured settings of the image overlay in the block. Find more details [<mark style="color:blue;">here</mark>](#image).

The **"Height"** of an image can be changed by operating one of the options:

* **"Same as on desktop"**. Choose the option to apply the same settings as on the desktop set in the main section.
* **"Adapt to image"**. Displays the image in its original aspect ratio.
* **"Proportion in %"**. Select the option to adjust the image height as a percentage using the **"Proportion of height"** scale. The parameters can be changed from 10% to 210%.

**"Proportion in %"** indicators:

\*100% = Square image

\*Less than 100% = Landscape

\*More than 100% = Portrait

* **"Fixed in px"**. This option helps to change image size in pixels by setting the parameters on the **"Fixed height"** scale. The height can be adjusted between 100 and 700 pixels.

The **"Text position"** can be placed "Below image", "Over the image, top", "Over the image, middle", or "Over the image, bottom". Select the desired option in the drop-down list.

The heading size on mobile can be set in the corresponding drop-down by selecting one of the options: "Large", "Medium", or "Small". The "Same as on desktop" option saves the changes applied to the desktop.

If you need to align the text to "Left", "Center", or "Right", select one of the options in the **"Text alignment"** drop-down. To clarify the use of parameters, check the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#mobile-settings).



In the following examples, you can view how the section might be displayed on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRxhj7KGqIGmAbSHwfJyh%2Fcart%20drawer_banner.png?alt=media&#x26;token=d1df5cf7-f296-4187-9f6e-1e036c117b78" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Ft52Iz7BQWx4Zo4wU5zs9%2Fcart%20drawer_banner_mobile.png?alt=media&#x26;token=205b4873-791e-46e4-b1cc-51f2a4e985e2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Collection slider (Empty)

Paste the section's title to the **"Title"** field.

### Content

In the **"Collection"**, choose any collection by pressing the **"Select"** button to display products in the section.

Activate the **"Show recently viewed products"** checkbox to replace items from the pre-selected collection with products a customer has viewed.

The number of products per row can be set in the **"Products in row"**. Choose if to display 1, 2, 3, or 4 items in each row.

To control the number of products displayed in the section, use the **"Maximum products to show"** scale. It can be changed from 2 to 12 items.

### Product card <a href="#product-card" id="product-card"></a>

Choose the appropriate aspect ratio of the product images in the **"Image ratio"**. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio you can check [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

Use the **"Information align"** drop-down to decide whether to display the product information below the product card on the "Left", "Center", or "Right" side.

The second image of a product will be displayed on hover over the main image with the ticked **"Show second image on hover"** option.

Turn on the **"Show badges"** box to display badges on product cards. You can find instructions for setting up badges [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/product#badges).

To display a brand for each product, tick the **"Show vendor"** option.

Activate the **"Show price"** option to display the price on product cards below all other content.



Check the following examples of how the block might be displayed on desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FGIpX4DR19nOgAx6g9y16%2Fcart%20drawer_collection.png?alt=media&#x26;token=f9e8ea67-b17f-4d30-908f-947071155b0a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fakm9aGl80EeitK85vHgA%2Fcart%20drawer_collection_mobile.png?alt=media&#x26;token=6a57aded-68ff-4c6a-ac83-6d59ad599a2d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
