Skip to main content

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.

​
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.
Default logo displayed in standard color schemes
​
logo_inverse
image
Inverse logo for dark backgrounds or color schemes with light text
​
logo_height
range
default:"36"
Desktop logo height in pixels
  • Range: 12-100px
  • Step: 1px
​
logo_height_mobile
range
default:"28"
Mobile logo height in pixels
  • Range: 12-100px
  • Step: 1px
​
favicon
image
Browser tab icon (recommended: 32x32px or 64x64px)

​
Page Layout

Control the overall page width and content container sizing.
​
page_width
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
Example Configuration
{
  "page_width": "narrow",
  "logo_height": 36,
  "logo_height_mobile": 28
}

​
Animations

Enhance user experience with smooth transitions and hover effects.
​
page_transition_enabled
boolean
default:"true"
Enable smooth transitions between pages
​
transition_to_main_product
boolean
default:"true"
Animate transition when navigating to product pages
​
add_to_cart_animation
boolean
default:"true"
Show animation when items are added to cart
​
card_hover_effect
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

​
Badges

Customize product badges for sales, sold out items, and more.
​
badge_position
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
​
badge_corner_radius
range
default:"40"
Badge corner roundness
  • Range: 0-100px
  • Step: 2px
​
badge_sale_color_scheme
color_scheme
default:"scheme-4"
Color scheme for sale badges
​
badge_sold_out_color_scheme
color_scheme
default:"scheme-5"
Color scheme for sold out badges
​
badge_font_family
select
default:"body"
Typography style for badge text
  • body - Body font
  • subheading - Subheading font
  • heading - Heading font
  • accent - Accent font
​
badge_text_transform
select
default:"none"
Text case transformation
  • none - Default case
  • uppercase - ALL CAPS

​
Cart Settings

Configure cart behavior and display options.
​
cart_type
select
default:"page"
Cart display mode
  • page - Full page cart
  • drawer - Slide-out drawer
​
product_title_case
select
default:"default"
Product title text transformation
  • default - As entered
  • uppercase - ALL CAPS
​
cart_price_font
select
default:"subheading"
Font style for prices in cart
  • body - Body font
  • subheading - Subheading font
  • heading - Heading font
  • accent - Accent font
​
auto_open_cart_drawer
boolean
default:"false"
Automatically open cart drawer after adding items (only for drawer cart type)
​
show_cart_note
boolean
default:"false"
Enable order notes field in cart
​
show_add_discount_code
boolean
default:"true"
Show discount code input in cart
​
show_installments
boolean
default:"true"
Display installment payment options if available
​
show_accelerated_checkout_buttons
boolean
default:"true"
Show express checkout buttons (Apple Pay, Google Pay, etc.)
​
empty_cart_button_link
url
default:"/collections/all"
Link destination for “Continue Shopping” button

​
Cart Media Settings

​
cart_thumbnail_border
select
default:"none"
Product image border style
  • none - No border
  • solid - Solid border
​
cart_thumbnail_border_width
range
default:"1"
Border width in pixels (0-10px)
​
cart_thumbnail_border_opacity
range
default:"50"
Border opacity percentage (0-100%)
​
cart_thumbnail_border_radius
range
default:"0"
Image corner roundness (0-100px)

​
Drawers

Style settings for slide-out drawers (cart, menu, search).
​
drawer_color_scheme
color_scheme
default:"scheme-1"
Color scheme applied to all drawers
​
drawer_border
select
default:"none"
Drawer border style
  • none - No border
  • solid - Solid border
​
drawer_border_width
range
default:"1"
Border width in pixels (0-10px)
​
drawer_border_opacity
range
default:"50"
Border opacity percentage (0-100%)
​
drawer_drop_shadow
boolean
default:"false"
Add drop shadow to drawers

​
Icons

​
icon_stroke
select
default:"default"
Icon line weight throughout the theme
  • thin - Thin stroke
  • default - Standard stroke
  • heavy - Heavy stroke

​
Input Fields

Style form inputs consistently across the theme.
​
input_border_width
range
default:"1"
Input field border width (0-4px)
​
inputs_border_radius
range
default:"8"
Input field corner roundness (0-32px)
​
type_preset
select
default:"paragraph"
Typography preset for input text
  • default - Default sizing
  • paragraph - Body text size
  • h1 through h6 - Heading sizes

​
Popovers and Modals

Style overlay elements like quick view and filters.
​
popover_color_scheme
color_scheme
default:"scheme-1"
Color scheme for popovers and modals
​
popover_border_radius
range
default:"8"
Corner roundness (0-16px)
​
popover_border
select
default:"solid"
Border style
  • none - No border
  • solid - Solid border
​
popover_border_width
range
default:"1"
Border width in pixels (0-10px)
​
popover_border_opacity
range
default:"50"
Border opacity percentage (0-100%)
​
popover_drop_shadow
boolean
default:"true"
Add drop shadow effect

​
Prices

Control currency code display across the store.
​
currency_code_enabled_product_pages
boolean
default:"true"
Show currency code on product pages
​
currency_code_enabled_product_cards
boolean
default:"true"
Show currency code on product cards
​
currency_code_enabled_cart_items
boolean
default:"true"
Show currency code for cart items
​
currency_code_enabled_cart_total
boolean
default:"true"
Show currency code in cart total

​
Product Cards

Customize product card behavior and features.
​
quick_add
boolean
default:"true"
Enable quick add to cart button on product cards
​
mobile_quick_add
boolean
default:"false"
Show quick add button on mobile devices
​
quick_add_color_scheme
color_scheme
default:"scheme-1"
Color scheme for quick add button
​
show_second_image_on_hover
boolean
default:"true"
Reveal second product image on hover
​
product_card_carousel
boolean
default:"true"
Enable image carousel on product cards

​
Search

​
empty_state_collection
collection
Collection to display when search has no results
​
product_corner_radius
range
default:"0"
Product image corner roundness in search results (0-32px)
​
card_corner_radius
range
default:"0"
Card corner roundness in search results (0-16px)
​
card_title_case
select
default:"default"
Text transformation for product and card titles
  • default - As entered
  • uppercase - ALL CAPS

​
Swatches

Customize variant color/pattern swatches.
​
show_variant_image
boolean
default:"false"
Show variant-specific images in swatches
​
variant_swatch_width
range
default:"30"
Swatch width in pixels (16-100px)
​
variant_swatch_height
range
default:"30"
Swatch height in pixels (16-100px)
​
variant_swatch_radius
range
default:"100"
Swatch corner roundness (0-100px)
  • Set to 100 for circular swatches
​
variant_swatch_border_style
select
default:"solid"
Swatch border style
  • none - No border
  • solid - Solid border
​
variant_swatch_border_width
range
default:"1"
Border width in pixels (0-10px, 0.5px steps)
​
variant_swatch_border_opacity
range
default:"10"
Border opacity percentage (0-100%)

​
Variant Pickers

Style variant selection buttons.
​
variant_button_border_width
range
default:"1"
Variant button border width (0-4px)
​
variant_button_radius
range
default:"8"
Button corner roundness (0-100px)
​
variant_button_width
select
default:"equal-width-buttons"
Button sizing behavior
  • default-width-buttons - Fit to content
  • equal-width-buttons - Equal width buttons

​
Accessing Settings in Code

{{ settings.page_width }}
{{ settings.logo_height }}
{{ settings.cart_type }}

​
Related Pages

Color Schemes

Customize theme colors and create custom color schemes

Typography

Configure fonts, sizes, and text styles

Buttons

Style primary and secondary buttons