# Drawers

## **Custom Styling Settings** 

Within the theme editor, you can apply custom styles to our wishlist drawers via our '**Wishlist**' app embed settings.

<div data-full-width="false"><figure><img src="https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2FTXSSYzSCwUswoznuNYVv%2FScreen%20Shot%202024-11-09%20at%2011.13.26%20pm.png?alt=media&#x26;token=c16171f7-e46d-465b-9cc6-8ee263403396" alt="" width="183"><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="General" %}
**Primary text colour:** Set colour code for the primary text colour which will apply in our wishlist drawers.

**Secondary text colour:** Set colour code for the secondary text colour which will apply in our wishlist drawers.

**Tertiary text colour:** Set colour code for the tertiary text colour which will apply in our wishlist drawers.

**Drawer background colour:** Set colour code for the background colour which will apply to our wishlist drawers.
{% endtab %}

{% tab title="Card" %}
**Border:** Available dropdown options:&#x20;

* No border - no border is shown around the card. &#x20;
* Border - full border is shown around each card
* Bottom border only - bottom border is shown below each card

*Note - borders are only show when multiple wishlists enabled*

**Border colour:** Set colour code for the border that will display around each wishlist card in our wishlist drawer.&#x20;

**Border radius:** Set radius of the borders shown around each wishlist card

**Background:** Set colour code for the background colour which will apply to each wishlist card.
{% endtab %}

{% tab title="Buttons" %}
**Button font size:** Controls font size of text within buttons

**Vertical padding:** Controls top/bottom padding within buttons&#x20;

**Horizontal padding:** Controls left/right padding within buttons

**Border radius:** Controls border radius of buttons
{% endtab %}

{% tab title="Button Primary" %}
**Font colour:**&#x20;

**Background:**

**Border colour:**

**Font colour hover:**&#x20;

**Background colour hover:**

**Border colour hover:**
{% endtab %}

{% tab title="Button Secondary" %}
Font colour:

Background:

Border colour:

Font colour hover:&#x20;

Background colour hover:

Border colour hover:
{% endtab %}
{% endtabs %}

## **Custom CSS**

Within each section you can add Additional CSS to tweak the appearance of your wishlist functionality.

<figure><img src="https://1134778209-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMp2ekCAtVgFUnsQlGWfX%2Fuploads%2FUElf0QgSkIcDKQHrQuaC%2Fimage.png?alt=media&#x26;token=96622fb4-8be3-40ff-9511-3a26ec960780" alt="" width="299"><figcaption><p>Edit the CSS for any of your Wishlist features</p></figcaption></figure>