Getting familiar with Paper
Paper is a robust and feature-rich Shopify theme designed for large-catalog storefronts.
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 Paper 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 Paper 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.
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.
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.
Popular font pairings
Below are some of our favorite font pairings available on Shopify themes
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
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/edgier visual identity.
Before editing border settings, think about your brand's mission and identity. Ensure any changes align with the visual identity 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.