Shopify - add cutom field on the sections in the customize page

Shopify - add cutom field on the sections in the customize page

Step0: determind which section you want to modify and inspect the section name
      
Step1: find the template you want to modify and add custom code to the schema 
        (e.g. tempalte -> page-sections-template.liquid)
{
"type": "text-and-image" #section name
"name": "Image with text"
"Settings":[ #adding new section in here
  {
    "type": "text"/"select"/"range"/"image_picker"
    "id": "color_code" #id that use on the liquid template
    "label": "Select Color" # label to display on the front end
  }
  ]
}

Step2: fetch the code in side the section, so you need to modify the section liquid
        (e.g. section -> page-block-rich-text.liquid)
using {{block.settings.id_you_set}}
in the previouse example will be
{{block.settings.color_code}}

Step3: save the changes, and preview on the customize