Getting familiar with Keystone
Keystone is a Keystone is a Premium Shopify Theme Made for B2B and Wholesale.
Tips
When you first start using a theme spend 10-20 minutes clicking through theme settings and previewing different sections. It's good to do this after an update as well to see what's new and what may have changed.
Setting up theme colors
You can adjust all colors in Keystone using the global color settings. To achieve better results and improve design implementation, it's important to understand how and where each setting applies colors differently.
Before starting
Although it's possible to jump into Keystone and start picking colors, we recommend doing a bit of prep work beforehand. This ensures you have a solid idea of the direction of your brand and the colors you want to use.
If you don't already have a set color palette for your brand, it's useful to spend some time deciding on this direction. You can use free color palette generators, such as Coolors, to help with this process.
There are a handful of great resources online that can help guide your color selection process, including
Getting started
Selecting default colors
Background: Choose a light background to enhance readability. This default background color will be used across your site. If changed, adjust the Main text color for a strong contrast.
Main text: Select a color with high contrast against the Background color. For a light background, opt for a dark text color.
Light text: The Light text color serves as an alternative for specific sections, such as dark banner images. This additional setting provides alternative text color options throughout the theme.
Border: Several border shades are generated from this color. The default and lightest shade will exactly match the chosen color. Section-specific settings offer the option to use a darker version.
Selecting primary colors
Background: This color serves as a background for elements with the "Primary" color scheme. The primary background color is used as the main accent color throughout the theme, often applied to call-to-action buttons. We recommend using your primary brand color.
Text: This color is used for text within elements featuring the "Primary" color scheme.
Selecting secondary colors
Background: This color serves as a background for elements with the "Secondary" color scheme. The secondary color scheme is used sparingly throughout your theme. For example you’ll see this applied to the quick-add buttons.
Text: This color is used for text within elements featuring the "Secondary" color scheme.
Selecting tertiary colors
Background: This color serves as a background for elements with the "Tertiary" color scheme. The secondary color scheme is used not used by default in your theme. The tertiary colors will only be seen if it’s selected from section settings.
Text: This color is used for text within elements featuring the "Tertiary" color scheme.
Selecting extra colors
Mobile bar: The Mobile bar color updates the user's top bar above the website. This is used to create a more finished look. This is currently only supported on some mobile devices. We recommend matching your announcement bar to the Mobile bar color.
Color fading throughout sections
Multiple sections can now fade into each other if “Enable color fade” is checked.
A smooth and seamless transition between colors throughout your themes different sections.
Custom background color
Sections can now use any background color if you set scheme to "Custom".
Setting up theme typography
Text plays a significant role on your website. Both the content and the typography you use are crucial for building a strong visual identity that resonates with customers.
Before starting
Typography greatly influences your website's visual identity. Choosing the right font helps customers connect with your brand.
Before adjusting typography settings, consider your brand's mission and identity. Make sure any changes support the visual identity that resonates with your customers.
Getting started
Editing font family
We suggest using a maximum of two different fonts to avoid impacting your website's performance. Consider using the same font for two settings.
System fonts are recommended if you prioritize speed over visual consistency.
Body font: Applied to main body text across your site, such as description text and other content.
Heading font: Applied to all headings on your site.
Navigation font: Applied to all buttons.
Base size: The smallest font size, serving as a reference for all other font sizes, including headings.
Scale ratio: Sets the size of headings. For example, if your scale ratio is 100% then your headings will be the same size as body font. If your scale ratio is 108% then each heading will be 8% larger.
Icon styles: A larger variety of icon styles with a fresh look and feel.
Popular font pairings for Space
Below are some of our favorite font pairings available on Shopify themes for Space
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
Type settings can be used to further customize which fonts are used throughout your theme. These settings can be used to change capitalization and font families.
Setting up theme borders
Border settings control border radius and thickness. Knowing how this works is important as it can affect your brand's image.
Before starting
Adjusting border-radius and thickness can impact your brand's image. Round borders often create a friendly, inviting look, while hard corners suggest a stronger visual identity.
Before editing border settings, think about your brand's mission and identity. Ensure any changes align with the image that resonates with your customers.
Getting started
Editing border radius
Button radius: This setting affects all button elements. Popular radius options include
0pxfor a sharp-cornered look,4pxfor slightly rounded buttons, or50pxfor fully-rounded buttons.Input radius: This setting affects all form inputs. We recommend using a radius between 0 and 10px.
Element border radius: This setting applies to borders around page elements. We recommend staying within a 0 to 10px radius.
Editing border width
Border width: This setting adjusts the width of all borders. We recommend using 1px. In some cases, you may prefer 0px for no borders or 2px for a thicker border.