> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/theme-settings/theme-settings.md).

# Theme Settings

Apply any changes to your store using the provided global settings. Press each expandable tab to view the related settings.

{% hint style="success" %}
Go to *Theme settings* by clicking the gear wheel icon <img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQHo1CmkRbMXgtOdRgZ31%2Fimage.png?alt=media&amp;token=59d0436d-0a9a-4543-8d1b-a01b5b1d2167" alt="" data-size="line"> in the upper left corner of the control panel.\
Then select the appropriate global section to apply the configurations.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fw0Dpv4orf4vDAZKmzHt6%2Ftheme%20settings.png?alt=media&amp;token=61ff936f-978d-4428-8221-c2f0a2c77f70" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Logo and favicon</strong></summary>

**Desktop/Mobile**

**Image**\
Upload logo images for desktop and mobile devices.

**Width**\
Adjust the logo size for each device using the available sliders:

* Desktop (100-240 px)
* Mobile (100-140 px)

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F2RTIWV3fqeNndoYOi11a%2Fsettings_logo.png?alt=media&amp;token=e780ada7-8b15-4a43-8d94-581c32b54a1f" alt=""><figcaption></figcaption></figure>

**Favicon**

**Image**\
Upload a favicon (the small icon shown in browser tabs).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fxy56IuA2nmrYceKRDjim%2Fsettings_favicon.png?alt=media&amp;token=93a4a20d-1758-49fe-85ba-9fb5d24f4f0f" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Colors</strong></summary>

**General**

**Base**\
Sets the primary color used across the theme interface, such as Header menu items and icons, sections' headers, product cards details, paragraphs, etc.

**Accent**\
Controls the accent color used for highlights and interactive elements, such as subheadings, product prices in cards, buttons, etc.

**Background**\
Sets the store's main background color.

**Secondary color**\
Controls the secondary background color used in sections and content areas (the tabs in the Header, items added to the cart, icons, unavailable product variants displayed as pills, etc.).\
*Note: Recommended to use a slight contrast compared to the main background color.*

**Line**\
Sets the color of borders, dividers, and separator lines.

***

**Button primary/Button secondary**

Use '**Show background**' and '**Show background on hover**' to control the button style:

* **Enabled** – Displays a solid button.
* **Disabled** – Displays an outline-style button.

Color settings:

* **Background / Background gradient** – Set the button background color.
* **Border** – Add or adjust the border color.
* **Text** – Set the button text color.

***

**Link button**

**Text**\
Controls the default text color of link-style buttons.

**Hover text**\
Changes the text color when hovered.

***

**Inputs**

Controls the appearance of form fields and interactive inputs.

**Background**\
Sets the input field background color.

**Text**\
Controls the input text color.

**Hover background**\
Changes the input background color on hover.

**Hover text**\
Changes the input text color on hover.

**Hover border**\
Sets the border color on hover.

**Hover icon**\
Controls the icon color on hover.

**Checkbox**\
Sets the default checkbox color.

**Checkbox checked**\
Controls the color of selected checkboxes.

**Checkmark**\
Sets the color of the checkmark icon inside checkboxes.

***

**Drawers and popovers**

Controls the primary button colors inside drawers and popovers: Mega menu, Cart drawer, product page pop-ups, password page pop-up, etc.

**Backdrop**\
Sets the overlay color shown behind drawers and popovers.

> **Example:** The '[*<mark style="color:$primary;">Cart drawer</mark>*](/triumph/theme-settings/theme-settings.md#cart)'.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FXhObAxB59LpHtNkxXFJ4%2Fcolors_drawers%20backdrop.png?alt=media&amp;token=4985ecc4-b233-4ca8-a96e-9ec7024449df" alt=""><figcaption></figcaption></figure>

**Base**\
Controls the primary color used inside drawers and popovers.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FhITj8fpXpGCWTY9eDPZt%2Fcolors_drawers%20base.png?alt=media&amp;token=cc0dabb6-90c7-4118-a492-b00739b9e4ef" alt=""><figcaption></figcaption></figure>

**Accent**\
Sets the accent color for interactive elements.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FAUW53qOeXfpLJNlS3zkg%2Fcolors_drawers%20accent.png?alt=media&amp;token=37148070-fcfd-498c-9e00-368cab7149fd" alt=""><figcaption></figcaption></figure>

**Background**\
Controls the background color.

**Secondary color**\
Sets the secondary background color.\
*Note: Recommended to use a slight contrast compared to the main background color.*

**Line**\
Controls divider and border colors.

> **Example:** The '[*<mark style="color:$primary;">Size guide</mark>*](/triumph/pages/product-page/details.md#size-guide)' on product pages.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F9dO553QX37SMTH7cdQcE%2Fcolors_drawers%20line.png?alt=media&amp;token=123fb48a-d7c4-46ca-8fb2-584270df84e3" alt=""><figcaption></figcaption></figure>

**Input background**\
Sets the background color for inputs inside drawers and popovers.

**Input text**\
Controls the input text color.

> **Example:** The '*Question popup*' on product pages with the backdrop, base, background, input background, and input text color settings.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FfvAUfUHy2MuBycWREeR5%2Fcolors_drawers_question%20popup.png?alt=media&amp;token=399c66f6-5ba9-44c9-9417-d42389157c39" alt=""><figcaption></figcaption></figure>

**Input hover background**\
Changes the input background color on hover.

**Input hover text**\
Changes the input text color on hover.

**Input hover border**\
Sets the input border color on hover.

**Input hover icon**\
Controls icon colors on hover.

**Checkbox**\
Sets the default checkbox color.

**Checkbox checked**\
Controls the selected checkbox color.

**Checkmark**\
Sets the checkmark icon color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FJIdaTIHAWplS61gBKLXS%2Fcolors_drawers%20checkbox.png?alt=media&amp;token=4cf5f0c1-d72b-4259-a95d-d52ff814f605" alt=""><figcaption></figcaption></figure>

***

**Drawers and popovers button primary**

Controls the primary button colors inside drawers and popovers.

**Use default button colors**

* **Enabled** - Uses the global button color settings from the theme.
* **Disabled** - Provides a list of options for manually adjusting colors.

**Background**\
Sets the button background color.

**Background gradient**\
Adds a gradient background effect.

**Border**\
Controls the button border color.

**Text**\
Sets the button text color.

**Hover background**\
Changes the background color on hover.

**Hover background gradient**\
Applies a hover gradient effect.

**Hover border**\
Controls the border color on hover.

**Hover text**\
Changes the button text color on hover.

> **Example:** The '[*<mark style="color:$primary;">Password popup</mark>*](/triumph/pages/password-page/password-header.md#password-popup)' on the *Password page*.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FP9cV0cUIeVLW5IKhI9e8%2Fcolors_drawers%20bttn.png?alt=media&amp;token=c6418ab8-4dab-4df5-86b1-66284bd0b476" alt=""><figcaption></figcaption></figure>

***

**Drawers and popovers button secondary**

Controls the secondary button style inside drawers and popovers.

**Use default button colors**

* **Enabled** - Uses the global button color settings from the theme.
* **Disabled** - Provides a list of options for manually adjusting colors.

***

**Blog tags**

Controls the appearance of blog article tags.

**Text**\
Sets the tag text color.

**Background**\
Controls the tag background color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FusZMmL9o4gsVgy5tA61t%2Fcolors_blog%20tags.png?alt=media&amp;token=99b0f416-45df-4d5a-934c-a1bf4c8e6a5a" alt=""><figcaption></figcaption></figure>

**Background list**\
Assign custom colors to specific blog tags.\
*Note: Separate multiple values with commas.*

> **Example:** Clothing:#C2185B, Trends:#00BFA5, Activewear:#3F51B5, Workout:#FFEB3B

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F7gOdiI0OF37nYWZ7Jhub%2Fcolors_blog%20tags_background%20list.png?alt=media&amp;token=a47db273-3de4-4e38-9373-fcaba34169d7" alt=""><figcaption></figcaption></figure>

***

**Other**

**Media placeholder**\
Sets the placeholder color shown before media loads.

**Rating star icon**\
Controls the color of rating stars.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FwuovpWVRLn9lUhZQCL5u%2Fcolors_rating%20star%20icon.png?alt=media&amp;token=c0e3047d-d19b-4e58-b4d7-b966d332722b" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Layout</strong></summary>

**Page width**\
Choose how wide your content appears:

* **Full** – Uses the full width of the screen.
* **Fixed** – Keeps content within a set width.

**Fixed width** *(Fixed only)*\
Set the maximum content width (1000–1800 px).

**Left / right page content spacing**\
Add space on the sides of a screen (35–100 px).

**Top / bottom section spacing**\
Control vertical spacing between sections (10–160 px).

**Mobile top / bottom spacing**\
Adjust vertical spacing on mobile devices (10–60 px).

**Grid column gap**\
Set the horizontal spacing between items like product cards or banners (10–20 px).

**Rounded corners**\
Enables rounded corners instead of sharp edges.

</details>

<details>

<summary><strong>Typography</strong></summary>

Controls the fonts and text styling used throughout the theme.

> The Triump uses the [<mark style="color:$primary;">Shopify font Library</mark>](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#available-fonts).

**Headings**

Controls the appearance of main headings (H1).

**Font**\
Choose the font used for headings.

**Underline heading links on hover**\
Adds an underline effect when hovering over heading links.

**Scale**\
Adjusts the heading font size proportionally (100-130%).

**Uppercase**\
Displays headings in uppercase letters.

***

**Small headings (H4–H6)**

Controls the appearance of smaller headings.

**Font**\
Choose the font used for small headings.

**Scale**\
Adjusts the size of smaller headings (100-130%).

**Uppercase**\
Displays small headings in uppercase letters.

***

**Body**

Controls the appearance of regular text content.

**Font**\
Choose the font used for body text.

**Scale**\
Adjusts the overall body text size (100-130%).

**Bold**\
Applies a bolder text weight to body content (100-900).

***

**Menu first level**

Controls the appearance of top-level navigation menu items.

**Font**\
Choose the font used for main menu links.

**Uppercase**\
Displays first-level menu items in uppercase letters.

**Scale**\
Adjusts the menu text size (100-130%).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FgCIFqhsiCZpXKCsgnOWr%2Ftypography_menu%20first%20level.png?alt=media&amp;token=f8728c5c-ada3-4b66-b4c8-4fcbbafd8a8b" alt=""><figcaption></figcaption></figure>

***

**Menu dropdown**

Controls the appearance of the Mega menu items.

**Uppercase**\
Displays dropdown menu items in uppercase letters.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FtD9FswrrvAEmlW1t5fDH%2Ftypography_menu%20dropdown.png?alt=media&amp;token=21457384-8df1-440d-aaac-4336567b88f6" alt=""><figcaption></figcaption></figure>

***

**Mobile menu**

Controls the text styling for the mobile navigation menu of all levels.

**Uppercase**\
Displays mobile menu items in uppercase letters.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQFsRjPI5dyhgzlZCdh6w%2Ftypography_mobile%20menu.png?alt=media&amp;token=5c854bc5-d079-4806-8ca5-982406f5e141" alt=""><figcaption></figcaption></figure>

***

**Button**

Controls the typography used for buttons.

**Font**\
Choose the font used for buttons.

**Scale**\
Adjusts the button text size.

**Uppercase for buttons**\
Displays button text in uppercase letters.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F2UPXDoNMuN5xnuXajiHA%2Ftypography_button.png?alt=media&amp;token=8a37849e-2268-477b-a386-68f2393eb986" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Animations</strong></summary>

**Reveal sections on scroll**\
Controls how sections appear while scrolling:

* **Enabled** – Sections animate into view from the bottom.
* **Disabled** – Sections appear instantly without animation.

</details>

<details>

<summary><strong>Product card</strong></summary>

{% hint style="success" %}
The following settings apply to all product cards across a store.
{% endhint %}

**Content alignment**\
Choose how product details are aligned: Left or Center.

**Quick view**\
Enables the '*Quick view*' button next to the '*Add to Cart*' button.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FjH6vx5jCPFMHRfGfsXis%2Fsettings_product%20card.png?alt=media&amp;token=f8122981-6aca-4655-987a-2d39dc6960d3" alt=""><figcaption></figcaption></figure>

***

**Media**

**Aspect ratio**\
Choose the image shape:

* **Adapt to first image** – Uses the default proportions of the first image.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).
* **Custom** (set from 50%–150%).

**Size**\
Choose how images fit inside the container:

* **Full background** – Fills the space (may crop the image).
* **Contain** – Shows the full image (may leave empty space).

**Slider**\
Enable showing navigation arrows and allow multiple images.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F0xd5AE5pHPEfDqq3m8mv%2Fsettings_product%20card%20slider.png?alt=media&amp;token=c89a674e-7018-4973-8b82-b7e1719b9f63" alt=""><figcaption></figcaption></figure>

Enable '**Play uploaded videos on hover**' to automatically play a product video when hovering over a product card.

*This works only if a video is added to the product and the 'Show video on hover' option is enabled.*

> The '*Change image on hover*' and '*Show video on hover*' options appear if the '*Slider*' feature remains inactive.

**Change image on hover**\
Shows a second image when hovering over a product card.

**Show video on hover**\
Plays a product video on hover (if available).

***

**Badges**

{% hint style="success" %}
Follow the step-by-step instructions to build [<mark style="color:$primary;">Custom badges</mark>](/triumph/customizable-features/custom-badges.md).
{% endhint %}

**Sale**\
Show a sale badge.

> This option requires adding the comparison price for each product or product variants in *Shopify admin -> Products*.

**Sale badge type**\
Choose how discounts are displayed:

* **Text** - Shows a simple label as the sale text.
* **Discount percent** - Converts text to the discount percentage.
* **Saved amount** - In addition to the text, display additional details, such as the amount.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FkWuSM3ZhO7R1neA9JNtW%2Fsettings_sale%20badge.png?alt=media&amp;token=3c4c1038-518b-439e-9009-19b0575674b2" alt=""><figcaption></figcaption></figure>

**Pre-order**\
Tags products available for pre-order.

> The feature requires additional settings applied in *Shopify admin -> Products*:

**Out of stock**\
Labels unavailable products and disables the '*Add to Cart*' button to prevent orders.

**Highlight products**\
Select products to highlight with a colored animated frame.

**Highlighted products border**\
Set border thickness (1–5 px).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FNw6SVdgV1m3x2YIgXuIn%2Fsettings_product%20card%20highlight.png?alt=media&amp;token=169ddff8-d6b7-469c-b23f-2a1a047bcf07" alt=""><figcaption></figcaption></figure>

***

**Countdown**

**Show**\
Displays a countdown timer on product cards.\
*Note: This feature requires configuring additional settings in the admin. Read the details* [*<mark style="color:$primary;">here</mark>*](/triumph/customizable-features/countdown.md)*.*

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FiQmHhDQbtlRtPcvbVnIx%2Fsettings_product%20card%20countdown.png?alt=media&amp;token=cc2b1b90-b363-49f1-a12f-d99ab14037f8" alt=""><figcaption></figcaption></figure>

***

**Attributes**

Choose which details to show below the product image:

* SKU
* Type
* Vendor

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fy7XjnQXxVMkTjFxRHWlx%2Fsettings_product%20card%20attributes.png?alt=media&amp;token=60c47a8b-a59c-4021-ac8d-fe16a0ffd8b7" alt=""><figcaption></figcaption></figure>

***

**Price**

**Show**\
Display the product price.

**Font size**\
Adjust price size (15–30 px).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FmHlg6V5pq03pjCZbRxqR%2Fsettings_product%20card%20price.png?alt=media&amp;token=1193787a-9377-45cc-857f-de2870da9076" alt=""><figcaption></figcaption></figure>

***

**Rating**

***

**Variant picker**

**Show**\
Choose how variants appear:

* **None** - Deactivates product variants in product cards.
* **Dropdown** - Shows product variants as drop-down lists.
* **Pills** - Displays product swatches.

**Show only on hover**\
Displays variants when hovering over the card.

**Hide unavailable product options**\
Hides or disables out-of-stock variants.

> The following option is available when the '*Pills*' is selected.

**Show only color variants**\
Displays only color options and hides other variant types.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FLoNfmT7TCXXSu0QhsyyY%2Fsettings_product%20card%20variant%20picker.png?alt=media&amp;token=cfa64344-1702-4ad9-8c0a-bcb5b4c91a5e" alt=""><figcaption></figcaption></figure>

***

**Color swatches**

> Available when '*Pills*' is selected.

**Type**\
Choose how swatches appear:

* **Color swatch**

<div align="left"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FeoaeHo04kZ1RJE0aQQsC%2Fimage.png?alt=media&amp;token=8f854392-d34e-49d2-b09c-7d64ff73cb73" alt="" width="159"><figcaption></figcaption></figure></div>

* **Variant image**

<div align="left"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F61i95VEZXmYgGaGaZS0i%2Fimage.png?alt=media&amp;token=226f3eda-b3dc-434a-a8b0-3eecb157ffca" alt="" width="232"><figcaption></figcaption></figure></div>

* **Text**

<div align="left"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FxdNCUNaEGVox5J5TPMfN%2Fimage.png?alt=media&amp;token=bee97caa-21fb-418d-8da6-a36890cca51f" alt="" width="284"><figcaption></figcaption></figure></div>

**Aspect ratio** *(Only 'Varinat image' type)*\
Set the image style:

* **Default**
* **Adapt to first image** – Uses the default proportions of the first image.
* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

***

**Buy button**

**Show**\
Choose when the button appears: None, Always, or Only on desktop.

**Hide button text on mobile**\
Displays only the icon on mobile.

**Show quantity selector**\
Adds a quantity input field (above the button on desktop, before it on mobile).\
Replaces the '*Add to Cart*' text button with the icon on mobile.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F0LtQEKwz77SObIKtNBRW%2Fsettings_product%20card%20buy%20bttn.png?alt=media&amp;token=7bf70ba0-27a9-4440-a273-5f56411fff3d" alt=""><figcaption></figcaption></figure>

***

**Button ‘Add to Cart’ colors / Button ‘Quick view’ colors**

Customize '**Add to Cart**' and '**Quick view**' buttons:

* **Background / Background gradient** – Button background
* **Border** – Button outline
* **Text** – Button text color

Hover state:

* **Hover background / Hover background gradient** - Background color on hover.
* **Hover border** - Border color on hover.
* **Hover text** - Text color on hover.

***

**Badges colors**

Controls the colors of product status badges.

**Sale**\
Sets the background color for sale badges.

**Sale text**\
Controls the sale badge text color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FoV8iil5JdMDJ86IpOTFn%2Fcolors_sale%20badge.png?alt=media&amp;token=d7859615-b4b7-44e4-9855-de2cbf699d15" alt=""><figcaption></figcaption></figure>

**Preorder**\
Sets the preorder badge background color.

**Preorder text**\
Controls the preorder badge text color.

**Sold out**\
Sets the sold-out badge background color.

**Sold out text**\
Controls the sold-out badge text color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fnw4HvhOZaMjYzJNfTuH6%2Fcolors_sold%20out%20badge.png?alt=media&amp;token=602613f6-8d03-4201-b234-274e3b153e4d" alt=""><figcaption></figcaption></figure>

***

**Price colors**\
\
**Price**\
Controls the color of product prices.

**Sale price**\
Controls the color of discounted product prices.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F9Pdemm8JFvhlsbQNv4CH%2Fprice_1.png?alt=media&amp;token=52d8a5d1-598b-454d-b4f1-568e5c13e8a0" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Breadcrumbs</strong></summary>

**Enable breadcrumbs**\
Show navigation breadcrumbs on store pages.

Choose where breadcrumbs should appear by turning options on or off.

* Pages

**Except pages**\
Enter page handles (URLs) where breadcrumbs should not be shown.

> *How to check a page URL handle:*
>
> 1. Go to *Shopify admin -> Online Store -> Pages.*
> 2. Select a corresponding page.
> 3. Press the '*Edit button*' under the '*Search engine listing*' block.
> 4. Copy a page URL handle.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F5BRnLky8KQY1X8UqpjAm%2Fadmin_url%20handle.png?alt=media&amp;token=4466019a-9b23-4048-aaae-70fce1b54a91" alt=""><figcaption></figcaption></figure>

* Blog
* Blog posts
* Collection
* Product
* Search
* Cart
* 404 page
* Customers page

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FPsGJUvnGPGQMH9sD9z3E%2Fsettings_breadcrumbs.png?alt=media&amp;token=64390134-1137-480d-bbe9-a2f1728bef63" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Social media</strong></summary>

Add links to your social media profiles.

**Account 1 – Account 5**\
Enter URLs for your social profiles (e.g., Facebook, Instagram, TikTok, ?????).

**Example:** https//[facebook.com/yourusername](http://facebook.com/yourusername)

</details>

<details>

<summary><strong>Search behavior</strong></summary>

**Search suggestions**\
Enable to show suggested products, collections, or pages as customers type in the search bar.\
Read the '[<mark style="color:$primary;">Requirements and limitations</mark>](https://shopify.dev/docs/api/ajax/reference/predictive-search#requirements-and-limitations)' article to learn how predictive search is supported.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F7lbJPRvWyzn16VRs9snL%2Fsettings_search%20behavior.png?alt=media&amp;token=2a2faf84-9774-4836-ae14-9d0b428ff9d9" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Currency format</strong></summary>

**Currency codes**\
Displays currency codes (e.g., USD, CAD) next to prices on product cards and product pages.\
This option does not interact with the *Drawer cart* and *Cart page*.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F6tc1sAC6yJF9hrpaAiO3%2Fsettings_currency%20format.png?alt=media&amp;token=479886f2-743c-4ca9-bb5a-13b18d4bd41b" alt=""><figcaption></figcaption></figure>

**Currency codes on cart total**\
This setting controls how the total price is displayed in the *Cart drawer* and *Cart page*.

* **Enabled** - The cart total includes a short currency label (e.g., $100 USD, $100 CAD).
* **Disabled** - The cart total shows only the symbol (e.g., $100).

</details>

<details>

<summary><strong>Cart</strong></summary>

**Cart type**\
Specify the cart behaviour after adding a product to the *Cart*:

* **Drawer** – Opens a slide-out cart.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FOpNYRKA4KUSZNMMv379h%2Fcart_drawer.png?alt=media&amp;token=01e23ab6-5386-4193-b4bf-4bff8e591d40" alt=""><figcaption></figcaption></figure>

* **Page** – Redirects visitors to the *Cart page* after pressing the '*Add to Cart*' button.
* **Popup notification** – Shows a small confirmation pop-up.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FlSD371eahYdXVzhpgS7l%2Fcart_popup.png?alt=media&amp;token=08bb10b6-c78a-4c1b-9f37-dc90a2663924" alt=""><figcaption></figcaption></figure>

**Cart icon**\
Choose the icon style:

* Bag
* Basket
* Cart

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FIHEm504At8NhzObs6JnT%2Fcart_icon.png?alt=media&amp;token=74150b9c-6aa4-4f7c-bc15-58bb92c26622" alt=""><figcaption></figcaption></figure>

> The '*Cart note*', '*Show cart discount*', and '*Free shipping* bar' are available when *Drawer* is selected.

**Cart note**\
Allows customers to add notes to their order.

**Show cart discount**\
Displays a field for entering discount codes.

**Free shipping bar**\
Shows a progress bar for free shipping.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FMeihYaKtCzQeRSVJdxIo%2Fcart_options.png?alt=media&amp;token=f2915a52-5c09-41a6-b9fc-f5c6a1f78954" alt=""><figcaption></figcaption></figure>

**Accelerated checkout buttons**\
Displays express payment options (e.g., Shop Pay) below the checkout button.\
Read the '[<mark style="color:$primary;">Accelerated checkout buttons</mark>](https://help.shopify.com/en/manual/online-store/dynamic-checkout)' page for the details.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FhtCpnv0vhkh8rH2ZXPPi%2Fcart_checkout%20bttns.png?alt=media&amp;token=6b7063c0-0b33-4422-9ac2-cb004b045d41" alt=""><figcaption></figcaption></figure>

***

**Cart drawer**

**Collections**\
Select collections to display when the cart is empty.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fwj6YDOpsPjPdHXgaMpFj%2Fcart_cart%20drawer.png?alt=media&amp;token=4ebdac23-e751-4409-90be-f9d6d9f9f259" alt=""><figcaption></figcaption></figure>

***

**Collection card**

**Text alignment**\
Choose how the collection title is aligned:

* Left
* Center

Use the '**Image aspect ratio**' to choose the shape of images:

* **Adapt to first image** – Uses the default proportions of the first image.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

> The following option appears if the '*Squared*', '*Portrait*', or '*Landscape*' option is selected.

**Image fit**\
Choose how the image fits:

* **Full background**
  * Scales the image to fill the whole container.
  * The image may be cropped to maintain its aspect ratio.
  * Behaves like a background image (`cover`).
  * Equivalent to `background-size: cover`

**Image position** *(Full background only)*\
Align an image: Top, Center, Bottom.

* **Contain**
  * Scales the image to fit entirely within the container.
  * Preserves the original aspect ratio.
  * May leave a space around the image.
  * Equivalent to `background-size: contain`

**Show product quantity**\
Displays the number of products in each collection.

**Show 'View all' button**\
Adds a call-to-action button that links to the *Collection list page*.

</details>

<details>

<summary><strong>Drawers and popovers</strong></summary>

**Full-width drawer on mobile**\
Controls how drawers (*Cart*, *Search*, and *Mega menu*) appear on mobile:

* **Enabled** – Displays drawers in full screen.
* **Disabled** – Uses the default width.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FPcrIri3IkhxEnZaBYu1z%2Fsettings_full%20width%20drawer.png?alt=media&amp;token=ca1230a5-6604-4364-bd36-9ce72af7ae2a" alt=""><figcaption></figcaption></figure>

**Backdrop blur**\
Adds a blur effect to the background behind the cart popup notification, Drawer cart, Mega menu, Search drawer on mobile, and popups on Product pages, etc.

**Close button follows cursor**\
Keeps the close button near the cursor for easier access.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F6bpBD0N7puHdnppVFVKH%2Fdrawers%20%26%20popovers.png?alt=media&amp;token=41cb7456-1d96-45e0-86d9-7b1525aa600f" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Free shipping</strong></summary>

Show a cart progress bar that motivates customers to reach one or more rewards. The bar works in the cart drawer, on the cart page and on the product page.

**Goal based on** *(available from version 2.0)*\
Choose what the progress is measured against:

* **Cart total** – progress is based on the amount spent.
* **Number of items** – progress is based on how many items are in the cart.

**Free shipping goal**\
The target customers need to reach (shown when milestones are **off**).

* **Cart total**
  * **Single currency**\
    Enter a number (e.g., `100`).
  * **Multiple currencies**\
    Enter values with currency codes (e.g., USD:1000, EUR:920, GBP:800, PLN: 3600)
* **Number of items** *(available from version 2.0)* — enter how many items are required (e.g., `5`).

<div data-with-frame="true"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FKzxbPXvmanWhKYAbgYnV%2Ffs_1.png?alt=media&amp;token=f123294a-ab7c-445c-99a1-8f8304a4ee19" alt=""><figcaption></figcaption></figure></div>

**Enable multiple milestones** *(available from version 2.0)*\
Turn one goal into a multi-step bar with up to **3 rewards** (e.g., *2 items → Free Shipping, 3 items → 15% Off*). When enabled, the single goal above is replaced by the Milestone blocks below. \
Each milestone shows a marker on the bar, and the bar keeps filling toward the next reward after one is reached.

<div data-with-frame="true"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FaodIylwUZQCyNDRZENEz%2Ffs_2.png?alt=media&amp;token=3329b2e1-ccb5-469a-8fc6-e772d2ea4a52" alt=""><figcaption></figcaption></figure></div>

**Milestone 1 / 2 / 3** *(available from version 2.0)*

* **Icon**\
  The icon shown on the bar for this milestone (Truck, Gift, Discount, etc.).
* **Unlocks at**\
  When the milestone is reached:
  * **Cart total** – an amount (e.g., `100`, or `USD:100, EUR:92, GBP:80` for multiple currencies).
  * **Number of items** – a number of items (e.g., `2`).
* **Reward**\
  The reward name shown under the marker (e.g., `Free Shipping`, `15% Off`).
* **Message before**\
  Text shown while the customer is still progressing toward this milestone. Supports tokens:
  * `{amount}` – amount still remaining *(Cart total mode)*
  * `{count}` – items still remaining *(Number of items mode)*
  * `{reward}` – this milestone's reward
* **Message when unlocked**\
  Text shown once this milestone is reached. Supports `{reward}`.

{% hint style="success" %}
Tip: only fill in the milestones you need. Leave Milestone 3 empty to use fewer steps.
{% endhint %}

<div data-with-frame="true"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fi2J49OHQogBdvcU5Qlnf%2Ffs_3.png?alt=media&amp;token=c3226dd5-e0ac-45fa-a39e-d90a53e30ee9" alt=""><figcaption></figcaption></figure></div>

#### Colors

* **Bar color**\
  The color of the progress bar fill (and the reached milestone markers) while the customer is still progressing.
* **Final bar color**\
  The color of the bar fill and the milestone markers once the final goal is reached.
* **Final message color**\
  The color of the text shown once a goal is reached. Defaults to the final bar color.

<div data-with-frame="true"><figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FfvkWNMYbEavyqHflUyGa%2Ffs_5.png?alt=media&amp;token=3acddec4-91a6-4437-a893-5f070aac9d79" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Scroll to top button</strong></summary>

**Enable**\
Shows a button that lets users quickly return to the top of the page.

**Show progress indicator**\
Controls the button style:

* **Enabled** – Shows scroll progress around the button.
* **Disabled** – Displays a simple arrow button.

**Position**\
Place the button on the left or right side of the screen.

**Bottom spacing /** **Bottom spacing on mobile**\
Set distance from the bottom (10–100 px).

**Right spacing / Right spacing on mobile**\
Set distance from the left or right side (10–30 px).

**Colors**\
Customize:

* Background color
* Icon color
* Progress line color

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FuR3RIu9L9ePcmRSpGmj7%2Fsettings_scroll%20to%20top.png?alt=media&amp;token=830e82e5-0de9-4c7c-9a8c-c5eaa5fdcd29" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Other</strong></summary>

**Continue shopping button link**\
Choose where the '*Continue shopping*' button leads (shown in the empty *Drawer cart* and *Cart page*).

</details>

<details>

<summary><strong>Custom CSS</strong></summary>

Apply custom code to the '**CSS**' input field to customize store elements.\
Read the '[<mark style="color:$primary;">Adding custom CSS to your theme'</mark>](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit-code/add-css) page for the details.

</details>

<details>

<summary><strong>Theme style</strong></summary>

Select one of the Theme Styles provided in the current section to change the look and feel of your store by applying the pre-designed layout.

</details>