“How do I configure my theme’s colors?”

All of Lorenza’s colors are completely customizable. You can edit and preview your color settings from the Colors panel on your Customize theme page.

Background
Your store’s background color. This will be the most dominant color present in the store. See an example
Text
The color of text store-wide.
Meta
The color of meta text store-wide.

Meta text is the text used throughout the store to help customers buy products. For example, the Log In and Cart text, the price and the Description tab on product pages.

Accent
The color of header text, links, buttons and the navigation menu, as well as the background color used in product sliders (like the Related Products widget on product pages).
Line color
The color used for the thin lines and borders throughout your store.

Background

The background color is the dominant color of your store’s page. In the image below, you can see how changing the background color affects a product page.

Background color change on the product page

Alternate product page

Instead of using your store’s global colors, you can override the heading and body text colors for product pages that use the product.alternate page template.

For more information about product pages and the alternate template, see Product page.

Override default colors
Select this checkbox to enable the alternate product page colors.
Heading font color
The color of the product page’s headings and product information tabs. See an example
Body text
The color of the body text on the product page.

Heading font color

When you change the heading font color for product pages, the Accent color you set in the section is overridden, but only for product information section of a product page that uses the product.alternate template. The accent color still appears in the header and footer of the page.

In the following image, all of the purple text that you see would be overwritten by the Heading font color setting.

Product page colors

Note that before the heading font color and body text overrides are activated, you must select the Override default colors checkbox.

Site border

You can set a site border that creates a boundary around your entire site. It uses your Accent color.

Show border
Select this checkbox to enable the site border. See an example
Width
Set the width of the site border (in pixels). You can create a site border between 5px and 10px wide.

Show border

In the image below, you can see what the site border looks like when it is enabled at 8 pixels wide.

Site border

Note that the site border does not appear on mobile devices. This is to improve the store experience for users who have small screens or screens with low resolution.

Choosing a color palette

If you haven’t already picked a color palette for your store, you may be interested in these resources that could help you pick an effective scheme.