While I was working with settings panel for the theme of my Shopify store I discovered a bug.

I am using Sketch on the Mac to create graphics for my sample store. I have also been using it to select colors for the store. The app shows colors in hexadecimal form which makes it easy to copy and paste the color into a stylesheet, or in this case, into the input field in the settings panel. The color value is shown without the leading # that is standard for hexadecimal numbers in CSS.

I copied and pasted the color into the "Button background color" field in the settings panel.

As soon as I clicked away from the field the # symbol was added to the color and everything looked fine.

When I previewed the page in Chrome the button displayed with a background behind it.

Until I previewed the page on the iPad I didn't notice that there was something wrong. In Safari on both mobile and desktop platforms the button had completely disappeared.

After using the inspector in Safari I eventually discovered the problem: even though the settings panel was showing the # in front of the color value, it was not present in the stylesheet.

If you check the settings_data.json file you can see that even though the settings panel shows the color as #ac3930, the json file and the value inserted into the stylesheet was the value that was pasted into the input field. When Chrome encountered the incorrectly formatted color it seemed to display correctly anyway, but Safari ignored the incorrectly formatted color value and left the button background white so it essentially disappeared.

If you go into settings panel and remove and then type in the # symbol, the json file and the generated stylesheet have the correctly formatted color value of #ac3930. After fixing the problem the button displays as expected.

The problem also occurs when a color is typed manually without the leading # symbol.

In order to prevent the problem from occurring in the future, the settings panel should not reformat and display the color value differently then it is actually output in the code so that errors can be seen in the panel. It does seem appropriate to add the # symbol to both the settings panel value and the resulting output as it is required for the color to display correctly.