Dawn color schemes

Different sections across the theme, such as Rich text, Image banner, and Collection list, let you select a color scheme to apply to that section from the colors you set in your theme settings. Your theme will have a default color scheme applied, which can be changed at any time in the theme editor. Adding your brand colors ensures a cohesive application of your color palette across your online store.

Manage your color scheme

Your store's color scheme is set within your theme settings.

  1. Click Theme Settings at the bottom of your sidebar.
  2. Click Colors.
  3. To change a color in your theme, click the color and use the color picker or enter the value of the new color in the text field.
  4. Click Save.

For solid colors, use the color picker to select a new color or enter the value of the color in the text field. The field accepts color names (for example, red, black, blue), RGB, or hexadecimal color values.

For color gradients, click the color box and then type or paste your Gradient CSS Code into the field (for example, linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green)). The theme editor will display an error message if your Gradient CSS Code contains special characters, images, or URLs. If your CSS code is valid, then the theme editor preview will display the selected gradient in the appropriate location.

Gradient CSS Code field in the theme editor

Color settings

The background of images and image padding can be set in your theme editor. Use the drop-down menu to choose between Accent 1, Accent 1 gradient, Accent 2, Accent 2 gradient, Background 1, Background 1 gradient, Background 2, Background 2 gradient, or Inverse. You can preview selected color schemes in your theme editor's preview panel.

Setting Description
Text Color can be applied to section or block text.
Accent 1 Color can be applied to impact buttons and the backgrounds of some sections.
Accent 1 gradient Enter the Gradient CSS Code to generate your gradient.
Accent 2 Color can be applied to impact buttons and the backgrounds of some sections.
Accent 2 gradient Enter the Gradient CSS Code to generate your gradient.
Background 1 Color can be applied to impact buttons and the backgrounds of some sections.
Background 1 gradient Enter the Gradient CSS Code to generate your gradient.
Background 2 Color can be applied to impact buttons and the backgrounds of some sections.
Background 2 gradient Enter the Gradient CSS Code to generate your gradient.
Inverse Color can be applied to impact buttons and the backgrounds of some sections. Uses Background 1 as the text color, and the text color as the background color

Some of the settings that allow you to choose the color scheme used also allow you to use gradients. For example, in Dawn, Shopify's first free Online Store 2.0 theme, you can set up gradients of your brand's colors and use them in place of the standard accent and background color options.

Set up gradients

Dawn uses the color_background setting to customize the CSS background property, allowing you to create visually interesting background options, such as gradients.

Most CSS background property values can be used to set a background color. You can use this field for solid colors (for example, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%), and hsla(0, 0%, 0%, 1) will all produce a solid black background), or for gradients (for example, linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green)). Gradients can also be repeated.

The background color setting uses CSS code, and includes a validation checker that will show a warning if images, special characters, or URLs are in your CSS code. If the CSS background code is valid, the theme editor will preview your gradient in the preview panel.

Ready to start selling with Shopify?

Try it free