On This Page

TABLE OF CONTENTS


About Theme Code Customization


When dealing with the customization of your store's website, you and your store may want to further customize your site beyond what BinderPOS theme packages give or show. 

Are you able to do this? 


YES!


You absolutely have the freedom and ability to edit and customize the coding for your store's webpage. That being said, this article will focus on a few things you ought to review beforehand:


  • A general warning / notification about editing code
  • Where to go to begin editing theme code
  • Some extra thoughts moving forward


General Warning About Customization

Before you begin to edit and customize your theme code, we strongly suggest that you be fully aware of what you are doing and what the potential consequences of your additions are. When considering whether or not editing your theme code is worthwhile, please review the following:


  1. Theme Updates
  2. Unforeseen Consequences


Theme Updates

One small thing to consider: any edits to the code should be saved after created. Any time a theme is updated, your additions to the theme code will almost certainly be overwritten and erased.


These theme updates will also delete any data / customizations made concerning third-party apps on your website. If you have questions about these apps, you can find a small note at the bottom of this page at Moving Forward. Any other questions or concerns will either need to be brought to Shopify or to the app developer


As was mentioned above: we recommend that you save any unique code you add to your site. The next section will show you where to save this code. To begin, follow these steps:


  1. Open your MyShopify page.
  2. Select Online Store > Theme
  3. Here you will see the Actions button. Please click the drop down arrow and find Edit Code
  4. Along the left side of the Edit Code screen you will notice several folders. Please select Assets > custom.css


Custom.css serves as a single, expanding textbox that you can document and save all of your code edits into. This folder is not overwritten when theme updates are dropped. Because of this, you can easily and readily stash and access custom code and edits that are saved within. Remember to carefully copy and paste your code.


Custom.css is only for styling changes. HTML/JS/LIQUID cannot be places in these files. Please also avoid saving third-party app coding/edits in this folder


Unforeseen Consequences

Because small changes to code can cause a cascading avalanche of repercussions, we want to reiterate: please only make edits if you are confident in your abilities. We cannot guarantee that we can quickly attend to and solve any problems that arise out of faulty or mistaken coding. If you are confident that you can make these edits yourself, then please feel free to do so. We will do our best to aid you if any issues arise, but troubleshooting faulty code can be time-consuming and difficult; please be aware of this.


How to Customize Theme Code


In order to begin making changes to your theme code, please follow these steps:


  1. Open your MyShopify page.
  2. Select Online Store > Theme
  3. Here you will see the Actions button. Please click the drop down arrow and find Edit Code
  4. Make your edits and Go Beyond Plus Ultra (and have fun!)


Moving Forward

As more and more stores begin to update to Shopify 2.0, the vast majority of the above will remain true. The most drastic change surrounding editing and customizing code concerns Third-Party Apps. Under the previous version, updates to Shopify themes would clear third-party app data in the same way that it would clear additions to the theme code. With 2.0, this changes. While general edits to your site's theme code will still be overwritten, that will no longer be the case for any edits made to third-party apps. For this reason, as well as many others, we strongly recommend that you update and switch to Shopify 2.0.