Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
    • Wholesale
      • Wholesale basics
      • Account restrictions
    • Color and option swatches
    • Device specific visibility
    • Discount popups
  • Templates
    • Collection template
    • Product template
    • Blog template
    • Article template
  • Sections
    • Global Sections
      • Header
      • Footer
      • Navigation links
      • Announcement
      • Cart drawer
      • Account drawer
      • Search drawer
      • Menu drawer
    • Media & Promotional
      • Slideshow
      • Video
      • Split banner
      • Marquee
      • Image hotspot
      • Countdown
      • Discount
      • Banner
      • Slider
      • Testimonial slider
      • Search banner
    • Product & Collection Displays
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Content & Marketing
      • Rich text
      • Blog posts grid
      • Testimonial grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
    • Utility & Custom
      • Custom liquid
      • Tool tip
      • Store locater
    • Forms & CTAs
      • Email sign-up
      • Sign-up form
      • Contact form
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
      • Knit
      • Kingpin
      • Kindred
      • Kettle
      • Kaleidoscope
Powered by GitBook
On this page
  • Getting Familiar with Keystone
  • Summary
  • Tips
  • Setting Up Theme Colors
  • Before Starting
  • Getting Started
  • Selecting Default Colors
  • Selecting Primary Colors
  • Selecting Secondary Colors
  • Selecting Tertiary Colors
  • Selecting Extra Colors
  • Color Fading
  • Custom Background Color
  • How Colors Function
  • Color setting description:
  • Setting Up Theme Typography
  • Before Starting
  • Getting Started
  • Editing Font Family
  • Icon Styles
  • Popular Font Pairings
  • Editing Type Settings
  • Setting Up Theme Borders
  • Before Starting
  • Getting Started
  • Editing Border Radius
  • Editing Border Width

Was this helpful?

Edit on GitHub
  1. Getting started

Getting started with your theme

Last updated 1 month ago

Was this helpful?


Getting Familiar with Keystone

Summary

Keystone is a Premium Shopify Theme designed for B2B and Wholesale businesses. It offers a wide range of customization options to help you create a professional and user-friendly online store.


Tips

  • Spend 10-20 minutes exploring the theme settings and previewing different sections when you first start using Keystone. This is also useful after updates to see what’s new or changed.


Setting Up Theme Colors

Before Starting

  • Before diving into color settings, it’s important to have a clear idea of your brand’s color palette. Use tools like Coolors to generate a color palette if you don’t already have one.

  • Resources to guide your color selection:


Getting Started

Selecting Default Colors

  • Background: Choose a light background to enhance readability. This color is used across your site. Ensure the Main Text color has strong contrast.

  • Main Text: Select a dark color for high contrast against the background.

  • Light Text: Used as an alternative for sections like dark banner images.

  • Border: Generates multiple border shades. The default shade matches the chosen color, while darker versions are available in section-specific settings.

Selecting Primary Colors

  • Background: Used as the main accent color (e.g., call-to-action buttons). Recommended to use your primary brand color.

  • Text: Used for text within elements with the "Primary" color scheme.

Selecting Secondary Colors

  • Background: Used for elements with the "Secondary" color scheme (e.g., quick-add buttons).

  • Text: Used for text within elements with the "Secondary" color scheme.

Selecting Tertiary Colors

  • Background: Used for elements with the "Tertiary" color scheme. This is not used by default and must be selected in section settings.

  • Text: Used for text within elements with the "Tertiary" color scheme.

Selecting Extra Colors

  • Mobile Bar: Updates the top bar on mobile devices. Match this with your announcement bar for a cohesive look.

Color Fading

  • Enable "Color Fade" to create smooth transitions between colors in different sections.

Custom Background Color

  • Use the "Custom" scheme to apply any background color to sections.


How Colors Function

  • Body: Base color for body elements.

  • Neutral: A mix of body and primary colors.

  • Accent 1-3: Darker shades of the body color.

  • Shade 1-3: Darker shades of the body color with slight opacity (see-through).

  • Primary/Secondary/Tertiary: Directly from the color settings.

Color setting description:

Setting
Description

Background body color

Controls the main background color for the body of the site. This will also be available in other sections when selecting a color and shown as Body.

Foreground body color

Defines the primary text color used in the body content. It's best to use a color that contrasts well against Background body color.

Foreground body dark color

Alternative darker text color for body content

Background primary color

Sets the background color for primary content areas

Foreground primary color

Defines text color used in primary content sections

Background secondary color

Sets the background color for secondary content areas

Foreground secondary color

Defines text color used in secondary content sections

Background tertiary color

Sets the background color for tertiary content areas

Foreground tertiary color

Defines text color used in tertiary content sections

Bar color

Controls the color of dividing bars or horizontal elements

Background overlay

Sets the gradient overlay effect (default is a black gradient)

Input button style

Determines button appearance with options for standard, lighter, or darker styling


Setting Up Theme Typography

Before Starting

  • Typography plays a crucial role in your website’s visual identity. Choose fonts that align with your brand’s mission and resonate with your customers.

  • Resources:


Getting Started

Editing Font Family

  • Use a maximum of two fonts to avoid performance issues.

  • Body Font: Applied to main body text (e.g., descriptions).

  • Heading Font: Applied to all headings.

  • Navigation Font: Applied to buttons.

  • Base Size: The smallest font size, serving as a reference for other sizes.

  • Scale Ratio: Adjusts heading sizes relative to the body font.

Icon Styles

  • Choose from a variety of icon styles for a fresh look.

Popular Font Pairings

  • Helvetica + Helvetica Black

  • Futura + Basic Commercial

  • Muli + ITC Clearface

  • Monotype Century + Mariposa Sans Black

  • Nunito Sans + Optima Nova Medium

  • Work Sans + Crimson Text

  • Source Sans Pro + Nunito

Editing Type Settings

  • Customize capitalization and font families for further typography adjustments.


Setting Up Theme Borders

Before Starting

  • Border settings (radius and thickness) impact your brand’s image. Rounded borders create a friendly look, while sharp corners suggest a stronger identity.


Getting Started

Editing Border Radius

  • Button Radius: Affects all buttons (e.g., 0px for sharp corners, 50px for fully rounded).

  • Input Radius: Affects form inputs (recommended: 0-10px).

  • Element Border Radius: Affects borders around page elements (recommended: 0-10px).

Editing Border Width

  • Adjust the width of all borders (recommended: 1px). Use 0px for no borders or 2px for thicker borders. ​

Brand Colors: How to Choose the Perfect Palette
Color Psychology: How Color Meanings Affect Your Brand
How to Pick a Font for Your Brand