Shopify – A step towards e-commerce development

What is Shopify?

Shopify is an ecommerce platform which aid you to build an online store with a great user experience. Now a days, one has not to worry about all the drama that comes with building the website from scratch and pay huge amount to developers for maintenance. However, you should have basic knowledge of HTML and CSS to make store more attractive. Shopify comes along with custom pre-built themes. Those themes can be modified as per need and requirements for the online store.

Shopify..!! Is that free?

Shopify gives you 14 days free trial when you create the account on it with no credit card requirements. Shopify is based on the subscription business model, monthly price after the trial period starts from $29 up to $299 for standard shops. If you have an enterprise business, you can consider using the Shopify Plus package

Which technical languages can help you out ..!!

Shopify has created its own template language “Liquid” which is written in Ruby. You can find open source project on GitHub which is used by many different software projects and companies. Liquid is used along with HTML and CSS to render dynamic data comes from user interface provided from Online store. You can find the docs and working of Liquid from https://help.shopify.com/en/themes/liquid.

Work environment

Developers can start building the theme from the theme section. There is an option to download themes as well under Themes section. The developer can add a new page under Pages section and blogs under Blog post section into the theme. Source code can be seen from online store UI. Most of the time developers can directly access the code from online Shopify editor. However, the developer can create a local environment setup using tools like Homebrew and Shopify theme tools like Shopify theme kit https://shopify.github.io/themekit/.

File Structure

Shopify file structure divides into 6 main folders –

• Layout: Layout contains the main file where all the templates and snippets can be rendered. It mainly contains theme.liquid file in which templates can be included like the main container, header, and footer of the online store design.
• Templates: Templates are nothing but the different pages rendered in the online store. Developer can create new page by creating a file – page.<file-name>.liquid. This custom page can be added under Pages section by selecting the file name from the drop-down.
• Snippets: Snippets are blocks of code which can be recycled in different templates. These snippets can be used by including it in template as below-

  {% include 'snippet-name' %}
  

• Assets: Assets contains all the images and CSS files. These files can be included by using pipe format in the code as follows –

  <img src="{{ 'image_name.png' | asset_url }}">
  

  

• Config: Config folder contains the JSON objects for configuring the theme’s basic requirements such as color codes and static data
• Locales: It contains JSON object if we are using multi languages in our website. The idea is when we are using static data in the website we fetch the data from these objects made for multiple languages.

🔊 Listen