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.

image

Default logo displayed in standard color schemes

image

Inverse logo for dark backgrounds or color schemes with light text

range

default:"36"

Desktop logo height in pixels

Range: 12-100px
Step: 1px

range

default:"28"

Mobile logo height in pixels

Range: 12-100px
Step: 1px

image

Browser tab icon (recommended: 32x32px or 64x64px)

Page Layout

Control the overall page width and content container sizing.

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.

boolean

default:"true"

Enable smooth transitions between pages

boolean

default:"true"

Animate transition when navigating to product pages

boolean

default:"true"

Show animation when items are added to cart

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.

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

range

default:"40"

Badge corner roundness

Range: 0-100px
Step: 2px

color_scheme

default:"scheme-4"

Color scheme for sale badges

color_scheme

default:"scheme-5"

Color scheme for sold out badges

select

default:"body"

Typography style for badge text

body - Body font
subheading - Subheading font
heading - Heading font
accent - Accent font

select

default:"none"

Text case transformation

none - Default case
uppercase - ALL CAPS

Cart Settings

Configure cart behavior and display options.

select

default:"page"

Cart display mode

page - Full page cart
drawer - Slide-out drawer

select

default:"default"

Product title text transformation

default - As entered
uppercase - ALL CAPS

select

default:"subheading"

Font style for prices in cart

body - Body font
subheading - Subheading font
heading - Heading font
accent - Accent font

boolean

default:"false"

Automatically open cart drawer after adding items (only for drawer cart type)

boolean

default:"false"

Enable order notes field in cart

boolean

default:"true"

Show discount code input in cart

boolean

default:"true"

Display installment payment options if available

boolean

default:"true"

Show express checkout buttons (Apple Pay, Google Pay, etc.)

url

default:"/collections/all"

Link destination for “Continue Shopping” button

Cart Media Settings

select

default:"none"

Product image border style

none - No border
solid - Solid border

range

default:"1"

Border width in pixels (0-10px)

range

default:"50"

Border opacity percentage (0-100%)

range

default:"0"

Image corner roundness (0-100px)

Drawers

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

color_scheme

default:"scheme-1"

Color scheme applied to all drawers

select

default:"none"

Drawer border style

none - No border
solid - Solid border

range

default:"1"

Border width in pixels (0-10px)

range

default:"50"

Border opacity percentage (0-100%)

boolean

default:"false"

Add drop shadow to drawers

Icons

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.

range

default:"1"

Input field border width (0-4px)

range

default:"8"

Input field corner roundness (0-32px)

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.

Color scheme for popovers and modals

Corner roundness (0-16px)

Border style

none - No border
solid - Solid border

Border width in pixels (0-10px)

Border opacity percentage (0-100%)

boolean

default:"true"

Add drop shadow effect

Prices

Control currency code display across the store.

boolean

default:"true"

Show currency code on product pages

boolean

default:"true"

Show currency code on product cards

boolean

default:"true"

Show currency code for cart items

boolean

default:"true"

Show currency code in cart total

Product Cards

Customize product card behavior and features.

boolean

default:"true"

Enable quick add to cart button on product cards

boolean

default:"false"

Show quick add button on mobile devices

color_scheme

default:"scheme-1"

Color scheme for quick add button

boolean

default:"true"

Reveal second product image on hover

boolean

default:"true"

Enable image carousel on product cards

Search

collection

Collection to display when search has no results

range

default:"0"

Product image corner roundness in search results (0-32px)

range

default:"0"

Card corner roundness in search results (0-16px)

select

default:"default"

Text transformation for product and card titles

default - As entered
uppercase - ALL CAPS

Swatches

Customize variant color/pattern swatches.

boolean

default:"false"

Show variant-specific images in swatches

range

default:"30"

Swatch width in pixels (16-100px)

range

default:"30"

Swatch height in pixels (16-100px)

range

default:"100"

Swatch corner roundness (0-100px)

Set to 100 for circular swatches

select

default:"solid"

Swatch border style

none - No border
solid - Solid border

range

default:"1"

Border width in pixels (0-10px, 0.5px steps)

range

default:"10"

Border opacity percentage (0-100%)

Variant Pickers

Style variant selection buttons.

range

default:"1"

Variant button border width (0-4px)

range

default:"8"

Button corner roundness (0-100px)

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 }}

<script>
const cartType = {{ settings.cart_type | json }};
const enableAnimations = {{ settings.page_transition_enabled }};
</script>

Color Schemes

Customize theme colors and create custom color schemes

Typography

Configure fonts, sizes, and text styles

Buttons

Style primary and secondary buttons

Overview

Core Concepts

Development

Customization

Features

Overview

Logo and Favicon

Page Layout

Animations

Badges

Cart Settings

Cart Media Settings

Drawers

Icons

Input Fields

Popovers and Modals

Prices

Product Cards

Search

Swatches

Variant Pickers

Accessing Settings in Code

Color Schemes

Typography

Buttons

​Overview

​Logo and Favicon

​Page Layout

​Animations

​Badges

​Cart Settings

​Cart Media Settings

​Drawers

​Icons

​Input Fields

​Popovers and Modals

​Prices

​Product Cards

​Search

​Swatches

​Variant Pickers

​Accessing Settings in Code

​Related Pages

Color Schemes

Typography

Buttons

Overview

Logo and Favicon

Page Layout

Animations

Badges

Cart Settings

Cart Media Settings

Drawers

Icons

Input Fields

Popovers and Modals

Prices

Product Cards

Search

Swatches

Variant Pickers

Accessing Settings in Code

Related Pages