> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Settings

> Complete guide to configuring Horizon theme settings

## Overview

The Horizon theme provides extensive customization options through the Shopify theme editor. All settings are configured in `config/settings_schema.json` and can be accessed via **Theme Settings** in your Shopify admin.

## Logo and Favicon

Configure your store's branding and visual identity.

<ParamField path="logo" type="image">
  Default logo displayed in standard color schemes
</ParamField>

<ParamField path="logo_inverse" type="image">
  Inverse logo for dark backgrounds or color schemes with light text
</ParamField>

<ParamField path="logo_height" type="range" default="36">
  Desktop logo height in pixels

  * **Range:** 12-100px
  * **Step:** 1px
</ParamField>

<ParamField path="logo_height_mobile" type="range" default="28">
  Mobile logo height in pixels

  * **Range:** 12-100px
  * **Step:** 1px
</ParamField>

<ParamField path="favicon" type="image">
  Browser tab icon (recommended: 32x32px or 64x64px)
</ParamField>

## Page Layout

Control the overall page width and content container sizing.

<ParamField path="page_width" type="select" default="narrow">
  Maximum width of page content

  * `narrow` - Narrow width for focused reading
  * `normal` - Standard width for balanced layout
  * `wide` - Wide width for expansive content
</ParamField>

```json Example Configuration theme={null}
{
  "page_width": "narrow",
  "logo_height": 36,
  "logo_height_mobile": 28
}
```

## Animations

Enhance user experience with smooth transitions and hover effects.

<ParamField path="page_transition_enabled" type="boolean" default="true">
  Enable smooth transitions between pages
</ParamField>

<ParamField path="transition_to_main_product" type="boolean" default="true">
  Animate transition when navigating to product pages
</ParamField>

<ParamField path="add_to_cart_animation" type="boolean" default="true">
  Show animation when items are added to cart
</ParamField>

<ParamField path="card_hover_effect" type="select" default="lift">
  Product card hover animation style

  * `none` - No hover effect
  * `lift` - Card lifts up slightly
  * `scale` - Card scales up
  * `subtle-zoom` - Image zooms subtly within card
</ParamField>

## Badges

Customize product badges for sales, sold out items, and more.

<ParamField path="badge_position" type="select" default="top-left">
  Position of badges on product images

  * `bottom-left` - Bottom left corner
  * `top-left` - Top left corner
  * `top-right` - Top right corner
</ParamField>

<ParamField path="badge_corner_radius" type="range" default="40">
  Badge corner roundness

  * **Range:** 0-100px
  * **Step:** 2px
</ParamField>

<ParamField path="badge_sale_color_scheme" type="color_scheme" default="scheme-4">
  Color scheme for sale badges
</ParamField>

<ParamField path="badge_sold_out_color_scheme" type="color_scheme" default="scheme-5">
  Color scheme for sold out badges
</ParamField>

<ParamField path="badge_font_family" type="select" default="body">
  Typography style for badge text

  * `body` - Body font
  * `subheading` - Subheading font
  * `heading` - Heading font
  * `accent` - Accent font
</ParamField>

<ParamField path="badge_text_transform" type="select" default="none">
  Text case transformation

  * `none` - Default case
  * `uppercase` - ALL CAPS
</ParamField>

## Cart Settings

Configure cart behavior and display options.

<ParamField path="cart_type" type="select" default="page">
  Cart display mode

  * `page` - Full page cart
  * `drawer` - Slide-out drawer
</ParamField>

<ParamField path="product_title_case" type="select" default="default">
  Product title text transformation

  * `default` - As entered
  * `uppercase` - ALL CAPS
</ParamField>

<ParamField path="cart_price_font" type="select" default="subheading">
  Font style for prices in cart

  * `body` - Body font
  * `subheading` - Subheading font
  * `heading` - Heading font
  * `accent` - Accent font
</ParamField>

<ParamField path="auto_open_cart_drawer" type="boolean" default="false">
  Automatically open cart drawer after adding items (only for drawer cart type)
</ParamField>

<ParamField path="show_cart_note" type="boolean" default="false">
  Enable order notes field in cart
</ParamField>

<ParamField path="show_add_discount_code" type="boolean" default="true">
  Show discount code input in cart
</ParamField>

<ParamField path="show_installments" type="boolean" default="true">
  Display installment payment options if available
</ParamField>

<ParamField path="show_accelerated_checkout_buttons" type="boolean" default="true">
  Show express checkout buttons (Apple Pay, Google Pay, etc.)
</ParamField>

<ParamField path="empty_cart_button_link" type="url" default="/collections/all">
  Link destination for "Continue Shopping" button
</ParamField>

### Cart Media Settings

<ParamField path="cart_thumbnail_border" type="select" default="none">
  Product image border style

  * `none` - No border
  * `solid` - Solid border
</ParamField>

<ParamField path="cart_thumbnail_border_width" type="range" default="1">
  Border width in pixels (0-10px)
</ParamField>

<ParamField path="cart_thumbnail_border_opacity" type="range" default="50">
  Border opacity percentage (0-100%)
</ParamField>

<ParamField path="cart_thumbnail_border_radius" type="range" default="0">
  Image corner roundness (0-100px)
</ParamField>

## Drawers

Style settings for slide-out drawers (cart, menu, search).

<ParamField path="drawer_color_scheme" type="color_scheme" default="scheme-1">
  Color scheme applied to all drawers
</ParamField>

<ParamField path="drawer_border" type="select" default="none">
  Drawer border style

  * `none` - No border
  * `solid` - Solid border
</ParamField>

<ParamField path="drawer_border_width" type="range" default="1">
  Border width in pixels (0-10px)
</ParamField>

<ParamField path="drawer_border_opacity" type="range" default="50">
  Border opacity percentage (0-100%)
</ParamField>

<ParamField path="drawer_drop_shadow" type="boolean" default="false">
  Add drop shadow to drawers
</ParamField>

## Icons

<ParamField path="icon_stroke" type="select" default="default">
  Icon line weight throughout the theme

  * `thin` - Thin stroke
  * `default` - Standard stroke
  * `heavy` - Heavy stroke
</ParamField>

## Input Fields

Style form inputs consistently across the theme.

<ParamField path="input_border_width" type="range" default="1">
  Input field border width (0-4px)
</ParamField>

<ParamField path="inputs_border_radius" type="range" default="8">
  Input field corner roundness (0-32px)
</ParamField>

<ParamField path="type_preset" type="select" default="paragraph">
  Typography preset for input text

  * `default` - Default sizing
  * `paragraph` - Body text size
  * `h1` through `h6` - Heading sizes
</ParamField>

## Popovers and Modals

Style overlay elements like quick view and filters.

<ParamField path="popover_color_scheme" type="color_scheme" default="scheme-1">
  Color scheme for popovers and modals
</ParamField>

<ParamField path="popover_border_radius" type="range" default="8">
  Corner roundness (0-16px)
</ParamField>

<ParamField path="popover_border" type="select" default="solid">
  Border style

  * `none` - No border
  * `solid` - Solid border
</ParamField>

<ParamField path="popover_border_width" type="range" default="1">
  Border width in pixels (0-10px)
</ParamField>

<ParamField path="popover_border_opacity" type="range" default="50">
  Border opacity percentage (0-100%)
</ParamField>

<ParamField path="popover_drop_shadow" type="boolean" default="true">
  Add drop shadow effect
</ParamField>

## Prices

Control currency code display across the store.

<ParamField path="currency_code_enabled_product_pages" type="boolean" default="true">
  Show currency code on product pages
</ParamField>

<ParamField path="currency_code_enabled_product_cards" type="boolean" default="true">
  Show currency code on product cards
</ParamField>

<ParamField path="currency_code_enabled_cart_items" type="boolean" default="true">
  Show currency code for cart items
</ParamField>

<ParamField path="currency_code_enabled_cart_total" type="boolean" default="true">
  Show currency code in cart total
</ParamField>

## Product Cards

Customize product card behavior and features.

<ParamField path="quick_add" type="boolean" default="true">
  Enable quick add to cart button on product cards
</ParamField>

<ParamField path="mobile_quick_add" type="boolean" default="false">
  Show quick add button on mobile devices
</ParamField>

<ParamField path="quick_add_color_scheme" type="color_scheme" default="scheme-1">
  Color scheme for quick add button
</ParamField>

<ParamField path="show_second_image_on_hover" type="boolean" default="true">
  Reveal second product image on hover
</ParamField>

<ParamField path="product_card_carousel" type="boolean" default="true">
  Enable image carousel on product cards
</ParamField>

## Search

<ParamField path="empty_state_collection" type="collection">
  Collection to display when search has no results
</ParamField>

<ParamField path="product_corner_radius" type="range" default="0">
  Product image corner roundness in search results (0-32px)
</ParamField>

<ParamField path="card_corner_radius" type="range" default="0">
  Card corner roundness in search results (0-16px)
</ParamField>

<ParamField path="card_title_case" type="select" default="default">
  Text transformation for product and card titles

  * `default` - As entered
  * `uppercase` - ALL CAPS
</ParamField>

## Swatches

Customize variant color/pattern swatches.

<ParamField path="show_variant_image" type="boolean" default="false">
  Show variant-specific images in swatches
</ParamField>

<ParamField path="variant_swatch_width" type="range" default="30">
  Swatch width in pixels (16-100px)
</ParamField>

<ParamField path="variant_swatch_height" type="range" default="30">
  Swatch height in pixels (16-100px)
</ParamField>

<ParamField path="variant_swatch_radius" type="range" default="100">
  Swatch corner roundness (0-100px)

  * Set to 100 for circular swatches
</ParamField>

<ParamField path="variant_swatch_border_style" type="select" default="solid">
  Swatch border style

  * `none` - No border
  * `solid` - Solid border
</ParamField>

<ParamField path="variant_swatch_border_width" type="range" default="1">
  Border width in pixels (0-10px, 0.5px steps)
</ParamField>

<ParamField path="variant_swatch_border_opacity" type="range" default="10">
  Border opacity percentage (0-100%)
</ParamField>

## Variant Pickers

Style variant selection buttons.

<ParamField path="variant_button_border_width" type="range" default="1">
  Variant button border width (0-4px)
</ParamField>

<ParamField path="variant_button_radius" type="range" default="8">
  Button corner roundness (0-100px)
</ParamField>

<ParamField path="variant_button_width" type="select" default="equal-width-buttons">
  Button sizing behavior

  * `default-width-buttons` - Fit to content
  * `equal-width-buttons` - Equal width buttons
</ParamField>

## Accessing Settings in Code

<CodeGroup>
  ```liquid Liquid theme={null}
  {{ settings.page_width }}
  {{ settings.logo_height }}
  {{ settings.cart_type }}
  ```

  ```javascript JavaScript (via Liquid) theme={null}
  <script>
  const cartType = {{ settings.cart_type | json }};
  const enableAnimations = {{ settings.page_transition_enabled }};
  </script>
  ```
</CodeGroup>

## Related Pages

<CardGroup cols={2}>
  <Card title="Color Schemes" icon="palette" href="/customization/color-schemes">
    Customize theme colors and create custom color schemes
  </Card>

  <Card title="Typography" icon="font" href="/customization/typography">
    Configure fonts, sizes, and text styles
  </Card>

  <Card title="Buttons" icon="rectangle-wide" href="/customization/layouts">
    Style primary and secondary buttons
  </Card>
</CardGroup>