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