Skip to main content

Deprecated settings

The following settings are deprecated and have been replaced. They can exist in some older themes, but they're no longer recommended for new themes.

Anchor to [object Object]color_scheme

The color_scheme setting has been replaced by the color_palette setting. Existing themes that use color_scheme continue to work, but new themes should use color_palette for managing theme colors.

A setting of type color_scheme outputs a picker with all of the available theme color schemes, and a preview of the selected color scheme. Theme color schemes in the picker are defined using the color_scheme_group setting. You can apply a color scheme to sections, blocks, and general theme settings. Color scheme settings aren't supported in app blocks.

For example, the setting below generates the following output:

Setting

{
"type": "color_scheme",
"id": "color_scheme",
"default": "scheme_1",
"label": "Color scheme"
}

Output

color scheme setting

When accessing the value of a color_scheme type setting, Shopify returns the selected color_scheme object from color_scheme_group.

If no value was entered, or the value was invalid, then the default value from color_scheme is returned. If the default value is also invalid, then the first color_scheme from color_scheme_group is returned.

If the theme doesn't have color_scheme_group data in settings_data.json, then nil is returned.

Anchor to [object Object]color_scheme_group

The color_scheme_group setting has been replaced by the color_palette setting. Existing themes that use color_scheme_group continue to work, but new themes should use color_palette for managing theme colors.

A setting of type color_scheme_group outputs a color scheme composed of the following input setting types:

  • header
  • color
  • color_background

Color schemes can be added only in settings_schema.json.

For example, the setting below generates the following output:

Setting

{
"type": "color_scheme_group",
"id": "color_schemes",
"definition": [
{
"type": "color",
"id": "background",
"label": "t:settings_schema.colors.settings.background.label",
"default": "#FFFFFF"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "t:settings_schema.colors.settings.background_gradient.label",
"info": "t:settings_schema.colors.settings.background_gradient.info"
},
{
"type": "color",
"id": "text",
"label": "t:settings_schema.colors.settings.text.label",
"default": "#121212"
},
{
"type": "color",
"id": "button",
"label": "t:settings_schema.colors.settings.button_background.label",
"default": "#121212"
},
{
"type": "color",
"id": "button_label",
"label": "t:settings_schema.colors.settings.button_label.label",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "secondary_button_label",
"label": "t:settings_schema.colors.settings.secondary_button_label.label",
"default": "#121212"
},
{
"type": "color",
"id": "shadow",
"label": "t:settings_schema.colors.settings.shadow.label",
"default": "#121212"
}
],
"role": {
"text": "text",
"background": {
"solid": "background",
"gradient": "background_gradient"
},
"links": "secondary_button_label",
"icons": "text",
"primary_button": "button",
"on_primary_button": "button_label",
"primary_button_border": "button",
"secondary_button": "background",
"on_secondary_button": "secondary_button_label",
"secondary_button_border": "secondary_button_label"
}
}

Output

color_scheme_group setting input

Anchor to [object Object]role

The role field outputs a color scheme preview. The color scheme previews are visible to merchants anywhere in the editor where they might pick a color scheme. You can assign roles to your color scheme definitions to map the color scheme to the previews. For example, you can assign role.background to the Background definition. Role uses the following standardized mapping of the color_scheme_group definition to the color scheme preview:

RoleDescriptionRequired?Gradient?
role.backgroundRenders the background color of the preview.YesOptional
role.textRenders the text color of the preview.YesNo
role.primary_buttonrole.secondary_buttonRender the first and second pills in the preview.YesOptional
role.primary_button_borderrole.secondary_button_borderRender the first and second pills' border in the preview.YesNo
role.on_primary_buttonrole.on_secondary_buttonAren't used in the preview.YesNo
role.linksrole.iconsAren't used in the preview.YesNo

Output

color scheme mapping

Anchor to [object Object]font

The font setting has been replaced by the font_picker setting.

Settings of type font outputs a drop-down menu that's automatically populated with various font selections.

For example, the following setting generates the following output:

Setting

{
"type": "font",
"id": "heading_font",
"label": "Heading font"
}

Output

font setting

Anchor to [object Object]snippet

The snippet setting has been replaced by sections.

Settings of type snippet outputs a drop-down menu that's automatically populated with the names of all snippet files in the theme.

For example, the following setting generates the following output:

Setting

{
"type": "snippet",
"id": "footer_content",
"label": "Footer content"
}

Output

snippet settings
Was this page helpful?