Getting started with your theme
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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:
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.
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.
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.
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.
Mobile Bar: Updates the top bar on mobile devices. Match this with your announcement bar for a cohesive look.
Enable "Color Fade" to create smooth transitions between colors in different sections.
Use the "Custom" scheme to apply any background color to sections.
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.
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
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:
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.
Choose from a variety of icon styles for a fresh look.
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
Customize capitalization and font families for further typography adjustments.
Border settings (radius and thickness) impact your brand’s image. Rounded borders create a friendly look, while sharp corners suggest a stronger identity.
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).
Adjust the width of all borders (recommended: 1px). Use 0px for no borders or 2px for thicker borders.