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 has 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.

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 Select a preset gradient, or use the gradient picker to customize your accent gradient.
Accent 2 Color can be applied to impact buttons and the backgrounds of some sections.
Accent 2 gradient Select a preset gradient, or use the gradient picker to customize your accent gradient.
Background 1 Color can be applied to impact buttons and the backgrounds of some sections.
Background 1 gradient Select a preset gradient, or use the gradient picker to customize your background gradient.
Background 2 Color can be applied to impact buttons and the backgrounds of some sections.
Background 2 gradient Select a preset gradient, or use the gradient picker to customize your background 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 a color scheme also allow you to use gradients. For example, in Dawn, you can set up gradients of your brand's colors and use them in place of the standard accent and background color options.

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.

Gradients

You can set up a gradient of colors in Dawn for visually interesting background options. The color_background setting is used to customize the CSS background property.

The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient. The options selected in the gradient picker are previewed in real time in the theme editor. You can also create a gradient background using CSS code, which includes a validation checker.

Set up gradients

  1. Click Theme settings.
  2. Click Colors.
  3. Select one of the gradient options.

    If you haven't previously set up a gradient, then several preset options are displayed for you to choose from. Select any preset gradient to open the options panel.

    If you've already set up a gradient, then clicking a gradient option opens the options panel directly.

  4. Select your gradient options:

  • You can choose between a linear or radial gradient. Use the buttons to select your preferred gradient style.
  • The angle of your gradient can be set with the up and down arrows. Clicking the up or down symbol increases or decreases the angle percentage by 5.
  • Use the slider to select the position of your gradient, or enter a numeric value in the field.
  • You can enter a specific color hex code, or use the color slider to choose a hue. Recently selected colors are displayed at the bottom of the gradient options panel.
  • If you would like your gradient to be opaque, then use the slider on the right to select the transparency of your gradient. You can also enter a percentage in the field next to the hex color code.
  1. Click Save.

Gradient picker in the theme editor

Use CSS to set 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) 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.

Steps:

  1. Click Theme settings.
  2. Click Colors.
  3. Click the gradient you want to edit.
  4. Click the arrow next to Gradient and select CSS.
  5. In the CSS code field, type or paste your gradient code. The theme editor preview displays your gradient in the appropriate location.
  6. Click Save.
    Gradient CSS Code field in the theme editor

Remove a gradient

To reset or remove a gradient:

  1. Click Theme settings.
  2. Click Colors.
  3. Click the gradient you want to edit.
  4. Click Remove gradient
  5. Click Save.

Ready to start selling with Shopify?

Try it free