Add custom solution to shopify customize panel?

Solution:

What you are looking for is information on "Theme Settings". Shopify sometimes refers to this as the Storefront Editor (https://help.shopify.com/themes/development/storefront-editor)

A tutorial is here: http://www.tetchi.ca/shopify-theme-from-scratch-part-14/ (http://www.tetchi.ca/shopify-theme-from-scratch-part-14/)

You're going to have to understand some of that and try some things before we can be of much further help

Solution:

Found the solution on how to add this based on your tutorial links, now that I see it looks pretty simple...but in case someone get stuck on a similar problem.

I have achieved this with following 3 steps:

1: First adding unique ID to every button based on the product page, in file that is generating every product page:

id="atc_single_product-{{ product.id }}" 
Copy code

2: For generating option in Customize Panel, added following inside Config file "settings_schema.json":

  {
    "type": "color",
    "id": "atc_single_product-7214350529",
    "label": "Montreal #9",
    "default": "#333333"
  },
Copy code

3. Added some basic HTML for hover effect that will call to action and combine both step 1 and 2 and once hovered :

   #atc_single_product-7214350529:hover, input#atc_single_product-7214350529[type="submit"]:hover, input#atc_single_product-7214350529[type="button"]:hover 
       {
         background: {{ settings.atc_single_product-7214350529 }};
         border-color: {{ settings.atc_single_product-7214350529 }};
         outline: none;
       }
   Copy code

End Result: http://i.stack.imgur.com/M2RiG.png (http://i.stack.imgur.com/M2RiG.png)

Maybe it doesn't look pretty, but it hey it works. Thanks!