The options selected in the gradient picker are previewed in real time in the theme editor. The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient. To learn more about gradients and CSS backgrounds, refer to Mozilla's linear gradient and CSS background documentation. The color_background setting is used to customize the CSS background property. You can set up a gradient of colors in some themes for visually interesting background options. The color scheme picker is available only in certain sections, blocks, and general theme settings. To set the color to transparent, delete the hex code from the text field.Īfter you define your color scheme in your theme settings, you can assign a color scheme using the color scheme picker in your theme's sections and blocks. To set your color, enter a hex color code or choose the color from the color picker.Click the color swatch for the content type color that you want to change.In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.Click the gear icon, and then click Colors.Click Customize next to the theme that you want to customize.From your Shopify admin, go to Online Store > Themes.color names such as red, black, or blue.The color field accepts the following color names and values: For solid colors, use the color picker to select a new color or enter the value of the color in the text field. Your store's color scheme and color options are set within your theme settings. Background gradients replace the background where possible.Ĭolor is applied to the section or block text.Ĭolor is applied to the primary button background.Ĭolor is applied to the primary button text.Ĭolor is applied to the secondary button text and border. SettingĬolor is applied to the background of some sections and to the outline button background.Ī gradient of colors is applied to the background of some sections. You can also preview how your colors are displayed in the scheme's preview.

You can assign different colors to various elements in a cohesive color scheme that can be applied across your theme where a color scheme picker is available. Color schemes are a theme setting that group elements and their respective colors in a visually representative way.

Pantone cream color