Thursday 19 June 2014

5 Steps to Design a Custom Responsive Shopify eCommerce Theme

Shopify is a popular eCommerce platform widely used in India. Many companies in India run dedicated shopify stores to sell a wide variety of items including fashion accessories, clothing, furniture, electronic gadgets, and much more. While it can be a daunting task to set up a well designed and developed online store, the Shopify eCommerce platform helps you create an appealing store instantly!


For all those who are trying to learn the nitty-gritty of designing a custom responsive Shopify eCommerce theme, this post is worth a read! I have shared the top 5 steps that will help you come up with a great Shopify Theme.
  1. Open an account on Shopify
    Open an account on Shopify by adding necessary personal information asked for. People can choose a free 14 day trial option or else directly choose any of the 4 pricing plans.
  2. Enter your storeOnce you complete the sign up process, Shopify will send you a confirmation email with a link that you need to click to enter your eCommerce store’s admin page. You can log in to your Shopify store by adding your email address and password on the admin page. After you successfully log in, you will get to view the store dashboard.
  3. Select a themeThere are numerous free and paid themes to choose from. Carefully choose a theme that goes best with your company and its products or services. After you select a theme, you will get to learn about the theme features including whether it is responsive or not, etc.
  4. Customize the theme
    It is very easy to generate custom shopify theme by clicking on “Go to your Theme Manager.” You will need to click on the “Theme Settings” icon to do necessary customization. You can change the background color, text color, and font, add images, add your company logo, insert social media buttons, set up product page preferences, etc. After you make the additions, you can preview the page and then save the changes.
  5. Use the Template Editor
    The Template Editor can be used to change HTML, CSS, JavaScript, and liquid code in your theme files as well as upload new images and such other important files to your custom responsive Shopify eCommerce theme. The Template Editor consists of theme files. All themes consist of 5 types of file:
  • Assets - Here all images, JavaScript, and CSS files are stored.
  • Config – In the config folder, HTML settings file is kept that helps Shopify custom theme designers easily modify or change data related to their theme.
  • Layout - It contains the theme.liquid file and is used to keep all common elements of a website, including codes in one place for instant changing of a code as and when required.
  • Snippets – It contains reusable codes.
  • Templates – Here multiple micro templates or codes are found that can easily be inserted into the layout file.
Thus, a Shopify eCommerce theme can be easily customized to enhance the store’s look and offer a memorable, repeat visitor experience.