Custom styles option since version 1.7

Update 1.7 contains Custom Styles option that allows adding your own CSS rules to override default CSS of Foodly theme.  

To add any new CSS rules, first, you need to locate the code that refers to an element you'd like to adjust within code developer tools.

We're going to provide you with a general step-by-step guide how to work with code developer tool and Custom Styles option.

1. In Shopify admin, navigate to Online Store > Themes > Customize theme > General settings > Custom Styles. In the left pane, there is a setting functionality and in the right pane preview of the store.
2. In the right pane, find an element you'd like to change and right-click on it to choose Inspect option. Inspect mode allows locate code that refers to the element you'd like to adjust. Now, in the bottom of the browser window, there is an active developer tool panel.
3. In the developer tool, locate code that refers to your element and excerpts a class name. For example, site-logo (class name is what is written inside quotes class="class name") and this class name is also a selector for custom CSS field. 
4. Now, go back to the left pane, and type CSS rule into first text area labeled as "Your CSS styles here 👇". Please, follow the syntax shown below, where xx and yy your custom values of CSS properties. 
   .class-name { property: XXpx; property: YYpx; }
5. Now, press Save button in the bottom of the left pane.