Skip to main content
All CollectionsKeystone
Keystone: Getting started with your theme
Keystone: Getting started with your theme
Thomas K avatar
Written by Thomas K
Updated over 2 weeks ago

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


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.


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.

Did this answer your question?