Shopify Custom Designs 101

Deciding to build your own Shopify custom design takes some guts, especially if you are not a programmer. The process is complicated and can be hard to grasp for beginners. The good news is that with hard work and a commitment to learning, you can do it. Of course, there are simpler options available, like going with a ready made theme or taking help from experts like us to do the customization as well. Having said this, there are around 50-100 free themes available on the Shopify store. You can also go for ready-made premium themes from Shopify online. Do your research and see if any of those fit your requirements. Search for independent developers who might be offering free or paid themes on their websites. You can get a pretty decent one for $100-$200. The best thing about going with such themes is that you have a structure to work with. In fact, almost 70-80% of the structure is already there, and the remaining 20-30% needs tweaking. Add a currency converter, extra fields, layouts, logos, headers, etc. and you are done. You can even turn to a digital agency like ours to help with the customization process.  If you’ve decided to do it by yourself, read on to learn how you can create Shopify custom designs on your own: Learn the Liquid Language Shopify themes are powered by a rather unique language in Liquid. Liquid’s basic job is to translate the content of a Shopify store to a browser’s HTML language, making it readable and accessible to the user. If you want to create Shopify custom designs, you will need to learn the language. It isn’t very hard, but you will have to put in some time to grasp it. Luckily, Shopify offers loads of resources to help. Start off with the introductory video below: https://www.youtube.com/watch?v=tZLTExLukSg Some other resources worth looking into:

•        Shopify Design Tutorial Videos
•        Shopify Liquid References
•        Shopify Liquid Cheat Sheet

Theme Customization Options Every theme comes with a customization panel that allows you to change its various aspects. Things like colors, headers, footers, and other theme-centric elements are customizable from here. This is quite simple and has been built with non-programmers in mind to give you a means to do some basic customization. Unfortunately, most built in features of the theme will not be customizable from here so it may not be enough to create the Shopify custom design you want. Creating a Custom Style Sheet Probably the easiest and most foolproof way to create Shopify custom designs is through changes in the CSS or custom style sheet. Don’t ever make changes to the theme’s original .liquid files. If you do and the theme gets updated, you will lose all the changes. Always create a CSS! There is an element of trial and error involved, so before you make any adjustments to your CSS, remember to build backups of your existing theme files in case anything goes wrong. Remember, you’ll only be turning to a CSS if what you require is not possible from the theme customization panel. To create a CSS, start by first accessing the theme area of your panel and select the “more” option. Next, you want to click on the Edit HTML/CSS button, which will direct you to the theme file manager. In the theme file manager, you need to access the Assets folder. See it? Click on it, and it should expand. Now, “Add” a new asset link and choose the “Create blank file” option. This should create a new CSS for you. Once you’ve done this, name your new CSS. The name is important, so keep it short and identifiable. Then select the .css.liquid extension and add in code to start customizing the CSS. Integrating the CSS Into Your Theme So you’ve put in the code, but your Shopify custom design is not taking shape yet. That’s because you still have to integrate your CSS with your theme. To do this, you will need to find the Layouts folder in the theme file manager. Click on it and select theme.liquid. This is where things get tricky. You will have to find code within all the coding. You can do this through the default search option that is Ctrl + F. Once you’ve found the code; you need to enter a new line just above it. Place your cursor just before the code, and press enter to enter a new line. In this line type in the following code: {{ ‘CSS-NAME.css’ | asset_url | stylesheet_tag }}. The CSS-Name part is the name that you had assigned to your CSS earlier. Shopify themes are built in such a way that your CSS will always overrule any of the original theme’s coding. So whatever changes you’ve made in the CSS will now start appearing in your theme. Understanding the Importance of User Accessibility At the end of the day, the objective of the customizations is to improve user accessibility and enhance user experience. Your customers will only be impressed with your Shopify custom design if it allows them to do what they want efficiently and without any hurdles. So put yourself in their shoes and look at your store with a critical eye. It can sometimes be difficult to be objective about something that you’ve played a part in creating, but you need to do this. Try and pinpoint areas that can be improved. Your effort at injecting flair and creativity to your Shopify theme will only really benefit you when they add something tangible and useful for your customer. Keep checking your store to see how its functionality is being affected by each piece of custom code you include in the CSS. This should be a priority, so make the effort. If you just keep editing the CSS and wait until the end to see how the changes have affected your store’s functionality, identifying and undoing the problematic code will be much harder. Go with a manual test like the keyboard navigation to check the accessibility of your site regularly. The keyboard navigation test is a simple test that requires you to see how the tab, spacebar, and enter buttons are working on your page. Also, use arrow keys to see how fast or slow the page scrolls. Other tests you can try include the screen reader test and HTML_CodeSniffer which both have their benefits. 1 Digital Agency Partners With Shopify to Create Customized Designs for Every Business 1 Digital Agency is a Shopify design partner with a reputation for building quality Shopify custom designs for business owners with all kinds of interests. Our focus is on working with you to understand what you need and addressing those requirements. Our team of Shopify experts is equipped to take on any project, any business and help you meet your business goals in no time. If you are a larger organization, we also have Shopify Plus expertise. With a proven track record and extensive knowledge of Shopify custom designs, you can be sure that every project with 1 Digital Agency will be a success. Call us now on 888.982.8269 or contact us at https://www.1digitalagency.com/contact and let’s get to work.    

Sources: https://help.shopify.com/themes/liquid https://www.shopify.ca/partners/shopify-cheat-sheet https://www.youtube.com/playlist?list=PLlMkWQ65HlcEJMRRdnqxpbGImqBkIOctd

The post How to Create Shopify Custom Designs for Your eCommerce Store appeared first on 1Digital®.