Skip to main content

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us