Theme Fonts and Colors

On the Dashboard on the left menu choose Design and Theme Fonts and Colors.

Fonts

You can use any of the thousands of free fonts available at fonts.google.com. Jot down a few of your favorite fonts and also take note of the available styles for each font. In the font field search for the font and select it from the list.

  • Headings Font - This is the font used for any titles on your site including pages and products.
  • Body Font - This is the font used for descriptions and page content.

Colors

Choose from the color palette selection for each color.  However, you are not limited to these colors and you can use any 6 digit (with hash) hex # for your site. There are hundreds of hex color pickers available, you can even upload your logo or photo to get the exact colors of your brand.

  • Background - The entire background across the site. Use this field with discretion use white (#FFFFFF) if you are unsure. White always looks good.
  • Secondary Background - A rarely used color, white or a light grey works well here.
  • Product Background - The background for your product section.
  • Page Titles - You guessed it... for page titles including product titles.
  • Body Text - Used for page content and product descriptions.
  • Icons - Mainly used for social icons on the products page. This is different than the header icons from the header design section.
  • Borders - we use thin borders every once in a while, you can preview these on the checkout process.
  • Primary - This color is used mainly on buttons. Add to Cart and Checkout buttons.
  • On Primary - This color is used on top of the Primary color. The text on the Add to Cart buttons and main Checkout Buttons.
  • Secondary - This color is used on secondary buttons. An example can be see on the 'Update Cart' button on checkout.
  • On Secondary - The color used on the Secondary color (button text).
  • Price - Product prices wherever they show up.
  • Footer Background - The background of the footer at the bottom of the site.
  • On Footer - The color of text and links on the footer of the site.