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.

The settings schema defines global theme settings accessible through the Shopify theme editor. Horizon’s settings are organized into logical groups for easy customization.

​
Theme Information

PropertyValue
Theme NameHorizon
Version3.4.0
AuthorShopify
DocumentationShopify Theme Docs
SupportShopify Support

​
Settings Groups

Configure your store’s logo and favicon.

​
Settings

SettingTypeDescriptionDefault
logoimage_pickerDefault logo-
logo_inverseimage_pickerInverse/light logo for dark backgrounds-
logo_heightrangeDesktop logo height36px
logo_height_mobilerangeMobile logo height28px
faviconimage_pickerBrowser favicon-

​
Range Values

  • Logo height: 12-100px (step: 1px)
  • Visible only when logo is uploaded
Define color schemes for your theme using a comprehensive color system.

​
Color Scheme Structure

Each color scheme includes:

​
Base Colors

SettingDescriptionDefault
backgroundBackground color#FFFFFF
foreground_headingHeading text color#000000
foregroundBody text color#000000
primaryPrimary/link color#000F9F
primary_hoverPrimary hover state#000000
borderBorder color#E6E6E6
shadowShadow color#000000

​
Primary Button Colors

SettingDescriptionDefault
primary_button_backgroundButton background#000F9F
primary_button_textButton text#FFFFFF
primary_button_borderButton border#000F9F
primary_button_hover_backgroundHover background#000F9F
primary_button_hover_textHover text#FFFFFF
primary_button_hover_borderHover border#000F9F

​
Secondary Button Colors

SettingDescriptionDefault
secondary_button_backgroundButton background#FFFFFF
secondary_button_textButton text#000000
secondary_button_borderButton border#000000
secondary_button_hover_backgroundHover background#FFFFFF
secondary_button_hover_textHover text#000000
secondary_button_hover_borderHover border#000000

​
Input Colors

SettingDescriptionDefault
input_backgroundInput background#FFFFFF
input_text_colorInput text#000000
input_border_colorInput border#000000
input_hover_backgroundHover background#F5F5F5

​
Variant Colors

SettingDescriptionDefault
variant_background_colorVariant background#FFFFFF
variant_text_colorVariant text#000000
variant_border_colorVariant border#E6E6E6
variant_hover_background_colorHover background#F5F5F5
variant_hover_text_colorHover text#000000
variant_hover_border_colorHover border#E6E6E6

​
Selected Variant Colors

SettingDescriptionDefault
selected_variant_background_colorSelected background#000000
selected_variant_text_colorSelected text#FFFFFF
selected_variant_border_colorSelected border#000000
selected_variant_hover_background_colorHover background#1A1A1A
selected_variant_hover_text_colorHover text#FFFFFF
selected_variant_hover_border_colorHover border#1A1A1A
All colors support alpha transparency
Configure fonts and text styling for your theme.

​
Font Selections

SettingDescriptionDefault
type_body_fontBody text fontWork Sans (Regular)
type_subheading_fontSubheading fontWork Sans (Medium)
type_heading_fontHeading fontAnonymous Pro
type_accent_fontAccent fontAnonymous Pro

​
Paragraph Settings

SettingOptionsDefault
type_size_paragraph10px - 18px14px
type_line_height_paragraphTight, Normal, LooseNormal

​
Heading Levels (H1-H6)

Each heading level has these settings:
SettingTypeValues
FontselectHeading, Accent, Subheading, Body
Sizeselect10px - 184px
Line HeightselectTight, Normal, Loose
Letter SpacingselectTight, Normal, Loose
Text CaseselectDefault, Uppercase

​
Default Sizes

  • H1: 72px
  • H2: 48px
  • H3: 32px
  • H4: 24px
  • H5: 18px
  • H6: 16px
Control overall page width and layout.

​
Settings

SettingOptionsDefault
page_widthNarrow, Normal, WideNarrow
Enable or disable various animations and transitions.

​
Settings

SettingTypeDescriptionDefault
page_transition_enabledcheckboxPage transitionstrue
transition_to_main_productcheckboxProduct page transitionstrue
add_to_cart_animationcheckboxAdd to cart animationtrue
card_hover_effectselectCard hover effectLift

​
Card Hover Effects

  • None
  • Lift
  • Scale
  • Subtle Zoom
Customize product badges for sale and sold-out items.

​
Settings

SettingTypeDefault
badge_positionselectTop Left
badge_corner_radiusrange40px
badge_sale_color_schemecolor_schemescheme-4
badge_sold_out_color_schemecolor_schemescheme-5
badge_font_familyselectBody
badge_text_transformselectDefault

​
Position Options

  • Bottom Left
  • Top Left
  • Top Right
Style primary and secondary buttons.

​
Primary Button

SettingTypeRangeDefault
primary_button_border_widthrange0-4px0px
button_border_radius_primaryrange0-100px100px
type_font_button_primaryselectBody/AccentBody
button_text_case_primaryselectDefault/UppercaseDefault

​
Secondary Button

SettingTypeRangeDefault
secondary_button_border_widthrange0-4px1px
button_border_radius_secondaryrange0-100px100px
type_font_button_secondaryselectBody/AccentBody
button_text_case_secondaryselectDefault/UppercaseDefault

​
Pills

SettingDescriptionDefault
pills_border_radiusBorder radius for pill elements40px
Configure cart functionality and appearance.

​
Settings

SettingTypeDescriptionDefault
cart_typeselectPage or DrawerPage
product_title_caseselectTitle case styleDefault
cart_price_fontselectPrice fontSubheading
auto_open_cart_drawercheckboxAuto-open drawer on addfalse

​
Features

SettingDescriptionDefault
show_cart_noteSeller note fieldfalse
cart_note_open_by_defaultNote field open by defaultfalse
show_add_discount_codeDiscount code fieldtrue
show_installmentsShow installment optionstrue
show_accelerated_checkout_buttonsExpress checkout buttonstrue
empty_cart_button_linkEmpty cart CTA link/collections/all

​
Product Media

SettingDescriptionDefault
cart_thumbnail_borderBorder styleNone
cart_thumbnail_border_widthBorder width1px
cart_thumbnail_border_opacityBorder opacity50%
cart_thumbnail_border_radiusCorner radius0px
Style drawer/modal elements.

​
Settings

SettingTypeDefault
drawer_color_schemecolor_schemescheme-1
drawer_borderselectNone
drawer_border_widthrange1px
drawer_border_opacityrange50%
drawer_drop_shadowcheckboxfalse
Configure icon styling.

​
Settings

SettingOptionsDefault
icon_strokeThin, Default, HeavyDefault
Style form inputs.

​
Settings

SettingTypeDefault
input_border_widthrange1px
inputs_border_radiusrange8px
type_presetselectParagraph

​
Type Preset Options

  • Default
  • Paragraph
  • H1 - H6
Configure popup styling.

​
Settings

SettingTypeDefault
popover_color_schemecolor_schemescheme-1
popover_border_radiusrange8px
popover_borderselectNone
popover_border_widthrange1px
popover_border_opacityrange50%
popover_drop_shadowcheckboxfalse

​
Accessing Settings in Code

​
In Liquid Templates

{{ settings.logo_height }}
{{ settings.page_width }}
{{ settings.primary_button_border_radius }}

​
In CSS

.button {
  border-radius: {{ settings.button_border_radius_primary }}px;
  font-family: {{ settings.type_font_button_primary }};
}

​
Conditional Logic

{% if settings.page_transition_enabled %}
  <div class="page-transition"></div>
{% endif %}

​
Best Practices

  • Use color schemes consistently across sections
  • Test typography at various sizes before deployment
  • Keep animations subtle for better UX
  • Provide clear default values for all settings
  • Changing settings doesn’t update content, only styling
  • Some settings may require theme republish to take effect
  • Always test changes in preview before publishing

​
Related Resources

Sections Reference

Sections that use theme settings

Customization Guide

Learn how to customize your theme

Build docs developers (and LLMs) love

Get started for freeTalk to us