Skip to main content
All CollectionsSpace
Space: Getting started with your theme
Space: Getting started with your theme
Thomas K avatar
Written by Thomas K
Updated over a week ago

Getting familiar with Space


Space is a feature-rich Shopify theme designed for optimal visual impact. We put together a video outlining the core features in an in-depth walkthrough.

Tips

  • Upload all your produc photos with consistent aspect ratios. For example if you start using square photos for your products you should maintain this consistency for all products.

  • 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 Space 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 Space 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 0px for a sharp-cornered look, 4px for slightly rounded buttons, or 50px for 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.

Did this answer your question?