This intention of this page is to provide web developers with the information they need to apply custom development to Art Storefronts websites. We will frequently update this page as new information becomes available.
Front-End
CSS
The main way to customize design is with CSS. See this tutorial on How To: Edit Your Design Using Custom Coding. The CSS you enter here will be applied to just before the </head> therefore gives you complete control to override every style on the website.
Javascript
Theme specific Javascript- You can apply theme-specific javascript, in the same place as the above tutorial shows you where to edit CSS. Instead, you add your JS code on the "JS" tab.
Site Wide Javascript- If you want to add javascript that is not specific to the theme but to the website functionality itself (in other words, code that is "theme agnostic"), you will instead want to go to the INFO & SETTINGS tab in your site manager, and then to the SCRIPTS tab, and add the code there. This way, if/when you change themes, the code will still run. For example, Google Analytics code should be implemented here.
Page Specific Javascript- when editing a given web page, you will notice that we also allow you to input javascript for that page only. For example, chat tools like Zopim are commonly used here (note: this could alternatively be used in Site Wide Scripts if you plan to use the chat tool on multiple pages).
Responsive Functionality- We use Foundation 4 to implement this functionality. Please see their docs to understand how to create your own HTML that will behave responsively.
Pre-Installed Plugins/Frameworks/etc. - The list below shows tools that are already installed:
Foundation 4- the most advanced front-end responsive framework in the world. There is so much cool functionality you can add from Foundation, that this is just a must see
Font Awesome- An amazing icon set
Fancybox- Fancy jQuery lightbox alternative
Given that we give you access to both page-specific javascript and site-wide javascript, in both the <head> and <body> sections, you should be able to add your add your own with simplicity.
Back End
If you look at the HTML tab when editing your theme, you will notice variables that are enclosed with two starting brackets and two ending brackets, for example:
##{{ header }}
These are extremely important. They contain blocks of code with specific functionality that we are protecting in this variable, so that we can still provide you with access to modify the HTML code. You can move these variables around as you wish in order to restructure the HTML code on a given web page.