Web >> Development >> Shopify >> Theme >> How to customize the dynamic settings in your theme using theme options

e.g for Supply theme

 

When you Customize your theme, you can select Theme Settings

You can choose from various theme settings type such as Color, Typography etc.

if you select Colors, we get the color settings that you can change.

 

To add a new Color setting named "Theme Container Background", we do the following

 

Customize -> Theme actions ... -> edit code


Since the new option is of theme type color, we find one existing option such as color_body_bg and copy the whole block from opening { to to closing } and including the comma ,

Paste immediately after that and edit accordingly, changing the following

id : "color_theme_container_bg"
label :
  en: "Theme Container background"

if you have the translations for other language labels, edit those as well, in our example we just use english.

 

Save

 

From Customize -> Theme actions ... -> edit code, select settings_data.json

 

Look for value of color_body_bg, make a copy and rename it as color_theme_container_bg
At the all the places that you find that setting.  In this case there was the "current" settings, "Blue" and "Light" preset settings.

  "current": {
    "color_primary": "#528ec1",
    "color_secondary": "#dcdcdc",
    "color_accent": "#dd2525",
    "color_body_bg": "#a0a0a0",
    "color_borders": "#ececec",
    "color_header_background": "#182e49",
    "color_header_text": "#fff",
    "color_header_cart_search": "#0f243d",
    "color_nav_bg": "#182e49",
    "color_nav_text": "#fff",
    "color_body_text": "#585858",
    "color_heading_text": "#000",
    "color_footer_bg": "#f2f2f2",
    "color_footer_text": "#636363",
    "color_footer_social_link": "#bbbbbb",
    "type_base_font": "montserrat_n5",
    "type_base_size": "13px",
    "type_header_font": "montserrat_n7",
    "type_header_transform": true,
    "type_accent_font": "montserrat_n5",
    "type_navigation_size": "14px",
    "type_navigation_transform": true,
    "type_button_size": "14px",
    "type_button_transform": true,
    "cart_notes_enable": false,
    "ajax_cart_method": "modal",
    "social_twitter_link": "",
    "social_facebook_link": "",
    "social_pinterest_link": "",
    "social_google_plus_link": "",
    "social_instagram_link": "",
    "social_snapchat_link": "",
    "social_tumblr_link": "",
    "social_youtube_link": "",
    "social_vimeo_link": "",
    "social_fancy_link": "",
    "social_sharing_style": "is-normal",
    "share_facebook": true,
    "share_twitter": true,
    "share_pinterest": true,
    "superscript_decimals": true,
    "color_theme_container_bg": "#fff",




  "presets": {

    "Blue": {
      "ajax_cart_method": "modal",
      "cart_notes_enable": false,
      "collection_sidebar_filters": "tags",
      "color_accent": "#dd2525",
      "color_body_bg": "#fff",
      "color_theme_container_bg": "#fff",


    "Light": {
      "ajax_cart_method": "modal",
      "cart_notes_enable": false,
      "collection_sidebar_filters": "tags",
      "color_accent": "#545454",
      "color_body_bg": "#f3f3f3",
      "color_theme_container_bg": "#f3f3f3",




 

 

 Save

 

 

 

The next time you do Customize -> Theme Settings -> Colors, you will get a new Color option labelled "Theme Container background" available to customize

 

To use it in your CSS liquid code (e.g. theme.scss.liquid), assign to a variable and then use in the CSS



$colorThemeContainer: {{ settings.color_theme_container_bg }};

div.MyThemeContainer  {
    /*margin-top:0px;
    margin-bottom:0px;*/
    margin: 0px;
    padding: 0px;
    background-color: $colorThemeContainer;
}


or just

 

div.MyThemeContainer  {
    /*margin-top:0px;
    margin-bottom:0px;*/
    margin: 0px;
    padding: 0px;
    background-color: {{ settings.color_theme_container_bg }};
}