Shopify Theme Development - A guide to designing a Shopify theme from scratch.

Shopify Theme Development - A guide to designing a Shopify theme from scratch.

23 Mar 2021
0 Comments
Shopify Theme Development - A guide to designing a Shopify theme from scratch.

Getting started on designing and developing my first Shopify theme, from scratch, was a remarkably new and inspiring experience for me. At the initial stage, building a Shopify theme was a challenging task. Becoming familiar with a new platform is never easy. While Shopify is one of the most reliable and easy platforms to use for building an eCommerce website, working on the platform or building a custom Shopify theme, for the very first time can be a daunting responsibility to handle. While this was a learning curve for me, I wanted to concentrate on every aspect and feature to deliver the best output. Spending time on learning liquid and reading multiple course articles and tutorials related to custom Shopify theme development was very helpful for me.

Tips and tricks from the following link of Shopify Docs on theme development helped me to understand the features of the theme. Source: https://shopify.dev/docs/themes

 

Technology Used:

  • FrontEnd: HTML, CSS, JavaScript, Liquid
  • Theme Settings: JSON (JavaScript Object Notation)

 

Shopify Theme Sections and Settings:

  1. Header
  2. Footer
  3. Image with text overlay
  4. Featured Collection
  5. Image with Text
  6. Video
  7. Testimonials
  8. Newsletters
  9. Theme supports internationalization
  10. Supports variant images.

 

Challenges faced:

The challenging part was to set up a theme development environment on the local machine so that whenever any changes are published in the live theme during development, those changes can be reflected in the Shopify store.

 

Solving Approach:

To overcome this problem, I used "workshop-advanced-gulp". An advanced, gulp-based workflow, it provides Shopify theme structure and Version controlling to view live changes made on the Shopify store.

Step 1: Install this to get theme structure on the local machine using "workshop-advanced-gulp" commands.

Step 2: Zip the files to upload the theme into the Shopify store.

Step 3: Run the "yarn build" command to compile all the changes into the dist folder. This also creates a dist folder.

Step 4: Deploy to perform a fresh build of the theme and replace any existing file with the new set of theme files on the server.

 

Watch for the changes in theme files. Upload and replace the file when it is changed in the live store.

(Reference from Shopify debut theme).

 

Coding:

[

{

"name": "theme_info",

"theme_name": "Debut",

"theme_author": "Shopify",

"theme_version": "17.7.0",

"theme_documentation_url": "https:\/\/help.shopify.com\/manual\/using-themes\/themes- by-shopify\/debut",

"theme_support_url": "https:\/\/support.shopify.com\/"

}

]




Leave a comment: