Forem: Quratulaiinn

How to Get Started with Shopify Theme Development (For Beginners)

Quratulaiinn — Mon, 09 Sep 2024 12:23:24 +0000

So, one day you heard about Shopify and thought to learn Shopify development!

You’re excited, you open your laptop, and... nothing. No solid resources, no clear starting point—just a lot of confusing guides or outdated tutorials. Sounds very frustrating, I totally get it, been there.

Well, don't worry, this guide has got your back! If you're new to Shopify and serious about learning Shopify development, this is the perfect place to start.

Shopify Development: Two Main Paths

There are two main areas in Shopify development:

1) Shopify App Development
2) Shopify Theme Development/Customization

While you can learn both over time, it's better to start with one. This guide is all about Shopify Theme Development, but don’t worry I’ll try to cover Shopify App Development in a future post.

What is Shopify Theme Development?

Shopify theme development is essentially about creating custom solutions for Shopify merchants. You can build your own theme and even sell it, but at the core of it most of the domain and the work revolves around customizing existing themes and that is what I would recommend you to go for.

Why is Theme Customization Important?

Theme customization is essential because every Shopify store has unique needs that go beyond the standard features of pre-made themes.

While Shopify offers a wide range of free and premium themes, they often require customization to truly reflect a brand's identity, meet specific business goals, or offer a better user experience.

Customizing a theme allows store owners to tailor the look and functionality to match their branding, add features that improve customer engagement, or integrate unique workflows without paying for costly third-party apps.

Whether it’s creating a more intuitive navigation, enhancing product pages, or improving mobile responsiveness, theme customization helps businesses stand out in a competitive eCommerce landscape, driving higher conversions and customer satisfaction.

From Where to Start Theme Customization Journey

I specialize in theme customization, so if you're just starting, here’s how I would suggest you to begin your journey:

Step 1: Master the Basics (HTML, CSS, and JavaScript)

Shopify theme development is a lot like front-end web development. So, if you're already comfortable with HTML, CSS, and JavaScript, you're halfway there. If not, take some time to learn these skills before diving into Shopify. Trust me, they’re essential!

Step 2: Learn Liquid - the Core of Shopify Themes

Liquid is Shopify’s templating language, and it's the backbone of any Shopify theme. If you don’t understand Liquid, you won’t be able to build or customize themes effectively. Shopify theme development revolves around Liquid, CSS, and JavaScript—each playing a crucial role.

Finding up-to-date tutorials on Liquid can be tough, so I recommend going straight to the source: Shopify's official documentation as well as liquid documentation. It's a little dry but the most reliable place to learn. If you ever get stuck, don’t hesitate to jump into the Shopify forums for help or feel free to leave a comment below, and I’ll do my best to assist.

How Long Should You Spend on Step 1 and Step 2?

Great question! When starting with Shopify theme development, it’s crucial to have a solid foundation in HTML, CSS, and JavaScript (Step 1) before diving into Liquid programming (Step 2).

You don’t need to rush this process. Spend a few weeks getting comfortable with HTML, CSS, and JavaScript and aim to build a few sample projects to get the hang of things. This hands-on practice will make your Shopify development journey much smoother.

Once you feel confident with the basics, dive into Liquid. This might take a bit longer, as Liquid has its nuances. Plan on spending several weeks learning Liquid thoroughly. Focus on understanding how it integrates with Shopify and how you can use it to create custom solutions.

The key here is to take your time and really grasp each step before moving on. It’s better to build a strong foundation now than to rush and struggle later on. In my next blog, I will share more about what comes after mastering these basics.

Until then happy coding..

Don't forget to follow me on LinkedIn for theme customization related work inspiration and sample projects.

LinkedIn: Quratulain Shoro

JavaScript Object Properties: Dot Notation or Bracket Notation?

Quratulaiinn — Wed, 01 Nov 2023 10:34:15 +0000

When working with objects in JavaScript will you choose Dot Notation or Bracket Notation?

screams destructuring

Ikr, but lets understand the basics first.

Introduction

Objects are a fundamental concept in JavaScript, serving as containers for organizing and managing data. Object properties, on the other hand, are the key-value pairs that make up these objects.

In this blog, we will learn about:

Objects and object properties
How to add, update, and delete object properties
The differences between dot notation and bracket notation

Understanding Objects

Think of an object like a container, and its properties as items inside the container. For example, consider the entire book library as an object, and each book in the library is like a property of that object.

So, objects hold things (properties), just like containers hold stuff.



const library = {
  book1: {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
  book2: {
    title: "To Kill a Mockingbird",
    author: "Harper Lee",
  },
  // More books...
};

Here, library is our object, and each book1, book2, and so on, are properties of the library object.
Each book has its own set of properties, like title and author.

Adding Properties to Objects

Dot Notation

Dot notation is ideal for adding properties with fixed names. It is similar to placing a known book on a designated shelf within the library. For instance:



library.book3 = {

  title: "Harry Potter and the Sorcerer's Stone",

  author: "J.K. Rowling",

};

Bracket Notation

Bracket notation is more dynamic and adaptable. It allows you to add properties with dynamic names, like adding a book to the library with a customizable label:



const newBookNumber = "book4";

library[newBookNumber] = {

  title: "The Hobbit",

  author: "J.R.R. Tolkien",

};

Updating Properties

Both dot and bracket notations can be used to update properties. Dot notation is suitable for known properties, while bracket notation excels for dynamic properties.

For example changing the details of a book/updating the information on a library's catalog. Here's how you can update properties:

Dot Notation



library.book1.title = "The Great American Novel";

Bracket Notation



const bookToUpdate = "book2";

library[bookToUpdate].author = "Nelle Harper Lee";

Deleting Properties

Deleting properties is like removing a book from your library's catalog. For deleting properties, both notations serve the same purpose. Use the delete keyword with dot or bracket notation to remove properties from the object.

Dot Notation



delete library.book3;

Bracket Notation



const bookToDelete = "book4";

delete library[bookToDelete];

Key Differences between Dot and Bracket Notation

1. Dynamic vs. Static

Dot Notation (Static)

With dot notation, accessing properties requires prior knowledge of the property's name.
Imagine you have a car with fixed properties like "make" and "model." You know these properties in advance and access them using dot notation: car.make and car.model.

Bracket Notation (Dynamic)

Bracket notation allows dynamic access to properties, making it possible to use a variable to specify the property you want to access.
Now, think of a scenario where you have a car, but you want to access a property based on user input, like "make" or "model." Bracket notation allows you to do this dynamically by using a variable to specify the property you want to access: car[userInput].

2. Handling Special Characters

Dot Notation (Limited)

Dot notation struggles with property names containing spaces or special characters.
For instance, consider a person's name with a special character like "O'Reilly".
Accessing person.O'Reilly using dot notation could result in an error.

Bracket Notation (Versatile)

Bracket notation, on the other hand, handles properties with spaces, special characters, or numbers with ease.
You can easily access person["O'Reilly"] without any issues.

3. Adding and Updating Properties

Dot Notation (Static)

Use dot notation when dealing with a fixed set of properties. For instance: student.grade = "A" or student.age = 23.

Bracket Notation (Dynamic)

When dealing with dynamically generated data, bracket notation is more flexible. Use it to add or update properties based on the data received from an external source. For example: student[propertyName] = propertyValue.

Conclusion

Whether you're crafting a web application, handling user input, or working with unconventional property names, a firm grasp of object properties and notations in JavaScript can significantly enhance your development experience.

For more such content feel free to connect with me.

LinkedIn: https://www.linkedin.com/in/quratulain

GitHub: https://github.com/QuratAin

Shopify And GitHub Integration

Quratulaiinn — Tue, 31 Oct 2023 05:00:15 +0000

Have you ever found yourself tangled in the complexities of Shopify theme management and version control?

Are you looking for a solution to effortlessly synchronize your Shopify store with GitHub?

Look no further. In this third installment of my Shopify development series, delve along with me into the intricate yet powerful process of Shopify and GitHub Integration, providing you with the key insights and step-by-step guidance to optimize your development workflow.

Why Should You Integrate Shopify With GitHub?

Shopify Theme Kit can help us in making theme development easier, why should we go for this Approach?

Shopify Theme Kit definitely was a big step in making things easier for developers to work in local environment but one of the biggest drawback it brought was in case a merchant or fellow developer intentionally or unintentionally made any changes to the theme code using theme editor, those changes wouldn't be reflected in our local environment, inviting conflicts and several bugs.

And that's when Shopify CLI and Shopify GitHub Integration was introduced which ensures that changes made in the Shopify theme editor are reflected in the local environment and vice versa.

Lets sum up the advantages in a better way:

1. Smooth Syncing: When you make changes to your theme via your local development environment, the Shopify GitHub setup automatically makes sure the changes show up in your Shopify admin i.e. your online store's theme. This keeps everything looking and working the same on both ends.

2. Two-Way Changes: Any tweaks you make in the Shopify admin get sent back to your original setup, so your progress is always up to date, no matter where you're working.

3. Keeping Track of Versions: With Shopify GitHub, you can handle different versions of your theme by connecting them to different stages. This way, you can always go back to an earlier version if you need to.

4. Better Teamwork: This setup makes it easy for everyone on the team to work together smoothly. You can see what everyone's doing, and everyone's on the same page with the latest updates, making everything run more smoothly.

Integrate Shopify With GitHub

In previous blog posts, I've walked you through Setting Up A Local Development Environment For Shopify Themes and Shopify Themes Version Controlling Using GitHub.

Now, it's time to tie these threads together and explore the remarkable possibilities of Shopify and GitHub Integration.

Connecting GitHub to Shopify

Step 1:

The first crucial step is to create a connection between your Shopify store and GitHub. Login to your Shopify store and click on the Online Store section from the sidebar on left.

Just below your live theme, you'll find the Add Theme option.

A dropdown menu will appear, and this is where the magic begins.

Select Connect from GitHub.

Step 2:

After you click on Connect from GitHub, on the right side you will find a button to Log in to your GitHub account.

You will be redirected to the page where you can grant the necessary permissions.

💡 This is like handing the keys to a secure vault – it ensures that your Shopify store and GitHub can communicate effortlessly, making updates and collaboration a breeze.

You can choose to allow Shopify access specific repositories only instead of giving access to all of your repositories. Check Only select repositories radio button and then Select the name of repository from dropdown and click Install.

Select Repository and Branch

Step 3:

Once you've connected GitHub to your Shopify store, it's time to get down to business.

Choose your GitHub account
Select the repository you created earlier or the one which contains your Shopify Theme. This repository is your treasure chest of code, where your theme's journey begins.

Step 4:

You'll be asked to choose a branch. Opt for the branch of your choice and click Connect. This is where the beauty of version control shines:

By selecting the main branch, you ensure that the live store doesn’t get affected with untested changes.
By selecting the development branch, you ensure that changes and updates can be meticulously tracked and reviewed before making them live.

💡 You can connect only branches that match the default Shopify theme folder structure. Folders in the repository that don't match this structure are ignored.

Shopify Theme Folder Structure:



.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

At this point, you will notice a newly added theme in your Theme Library:.

Create and Publish Themes

Step 5:

Now, it's time for the creative part. Create two distinct themes by connecting to both branches, one for development and another for the main branch. This dual-theme approach provides a safe haven for experimenting without disrupting your live theme.

Step 6:

But the magic truly happens when you publish the theme created from the main branch. This action takes your development live and showcases your carefully crafted changes to your customers.

Conclusion:

By integrating Shopify and GitHub, you've harnessed the power of version control, collaboration, and streamlined development. Your journey towards a more efficient and error-free Shopify development process has just begun.

For more Shopify tips and tricks, feel free to connect with me.

LinkedIn: https://www.linkedin.com/in/quratulain

GitHub: https://github.com/QuratAin

Why You Should Never Use (==) in JavaScript

Quratulaiinn — Mon, 30 Oct 2023 05:55:35 +0000

While this topic may appear basic and familiar but I think we've all been there, using == when === was the better choice, only to wonder why our code behaves strangely.

So no "ugh you didn't even know this silly, it was so simple" comments please and let's unravel the mysteries of JavaScript's equality operators together.

Loose Equality

The loose equality operator == is designed for type coercion (datatype conversion), allowing JavaScript to convert operands to a common type BEFORE comparison.

While this can be convenient, it can also lead to subtle bugs.

Example 1: String and Number

const a = 10;
const b = '10';
console.log(a == b) // Result: true

Even though a is a number and b is a string, we get true. This is because the type of the variable a is converted to a string before making the comparison.
After the comparison, the value is checked in both the variables. If it's same, we will get true otherwise we will get false.

But that's not a problem, at least the values are same?

Haha, just wait for it..

Example 2: NaN Comparison

NaN == NaN;  // Result: false

Due to the complexities of NaN, using == to compare NaN values will ALWAYS return false.
For NaN checks, use isNaN() or a strict comparison: ===.

Example 3: String and Boolean

const a = true;
const b = 'true';
console.log(a == b)

If you thought the answer is true, unfortunately that's not correct.

Surprised huh?

If either operand is a Boolean, it will be converted to a number (true becomes 1 and false becomes 0).
Now, you know why the answer was true, not false in the above example.
It is because the value of the variable a (true) gets converted to a number before the comparison. So after comparison, we're basically comparing 1 and 'true' hence we get false because the variables contain different values.

Pretty unexpected behavior, I TOLD YOU.

Hence many experienced developers favor strict equality operator === for its strictness, as it reduces ambiguity and encourages explicit type handling.

Strict Equality

The strict equality operator === is, well, very strict. It compares both value and type, making it more predictable and less prone to unexpected results.

Example 1: String and Number

"5" === 5; // Result: false

Since the types are different, the comparison returns false.

Example 2: Boolean and Number

false === 0; // Result: false

In this case, false and 0 have different types, so the comparison is false.

Conclusion

In JavaScript, clarity and predictability are vital. While loose equality operator can be convenient, it introduces potential pitfalls and surprises. The choice between == and === depends on your intent and having knowledge of both of the operators is must but there are reasons you should avoid using == in your code as we discussed above.

Hope it helps!

For more such content feel free to connect with me.

LinkedIn: https://www.linkedin.com/in/quratulain

GitHub: https://github.com/QuratAin

Shopify Theme Version Controlling Using GitHub

Quratulaiinn — Fri, 27 Oct 2023 14:24:22 +0000

Previously we learnt how to successfully Set Up Your Local Environment For Shopify theme development.

Now Lets explore theme version controlling, an essential practice for seamless collaboration and efficient management of your Shopify store's themes.

In this blog, we will discuss the step-by-step process of moving your development theme to GitHub and collaborating with your team members efficiently.

Learning Outcomes

Connect Shopify Development Theme With GitHub
Create A Remote Repository On GitHub
Link Your Local And Remote Repositories
Push Your Changes To GitHub
Create A Development Branch
Merge Development Branch With Default Branch

Lets Connect Shopify Development Theme With GitHub

Version controlling begins with setting up your local repository and linking it to GitHub.

Using a good version control system helps you work together easily and makes sure you don't lose any old versions of your project. It also helps you add new things to your project without any problems.

If you are not familiar with VCS you can read this series which explains everything in easiest possible way.

1. Initialize Your Local Repository

Here local repository basically refers to the project directory having our Shopify theme that we pulled from our store.

Please follow the blog here if you haven't setup your environment yet.

So the first step towards managing your project with Git is to initialize it. Follow these simplified steps:

Step 1: Initialize Git In Your Project Directory

Open your project directory in your preferred code editor and initialize Git by running the following command:



git init

This command initializes a new Git repository in your project folder, enabling Git to start tracking changes in your files.

Step 2: Add Your Files To The Staging Area

To begin tracking changes in your files, you need to add them to the staging area. Run the command:



git add .

This command stages all the files in your project directory for the next commit.

Ensure that you've added all the necessary files and directories before proceeding.

Step 3: Make Your Initial Commit

Once your files are staged, it's time to make your initial commit. Use the following command:



git commit -m "Initial Commit"

By executing this command, you create a snapshot of the current state of your project.

💡 Adding a meaningful commit message is crucial as it helps you and your team members understand the changes made in this particular commit.

2. Create A Remote Repository on GitHub

To ensure that your local changes are saved on GitHub, follow these steps:

Step 1: Create A New Repository

Open GitHub and log in to your account.
Click on the '+' icon in the top right corner and select "New repository".
Choose an appropriate name for your repository in which you will push your development theme and configure other settings as needed.
Finally click on the "Create repository" button to generate your new remote repository on GitHub.

Step 2: Link Local And Remote Repositories

After creating the remote repository on GitHub, you need to connect it to your local repository.

Command 1: Add Remote Repository URL



git remote add origin your-repository-url

Replace your-repository-url with the URL of the remote repository you created on GitHub.

This command establishes a connection between your local and remote repositories.

Command 2: Push Your Changes To GitHub



git push -u origin default-branch-name

Don't forget to replace default-branch-name with the actual name of your branch. In my case its master.

This command sends the initial commit from your local repository to the remote repository on GitHub.

The -u flag sets the upstream branch, enabling you to use git push for future pushes without specifying the remote repository's path or branch name.

At this point if you will refresh your GitHub repository you will see all of your theme files are now available on GitHub.

💡 It's important to ensure that the local and remote branches have the same name to prevent any confusion during synchronization.

Implement A Development Branch Workflow

To ensure a seamless and error-free development process, it's highly recommended to adopt a development branch workflow.

This approach helps making changes in a dedicated development branch before merging them into the default branch.

💡 An additional benefit of this workflow is when you want to integrate Shopify with your GitHub account, it allows you to maintain the development branch as your unpublished theme and continually apply changes to it, while the default branch remains as your live theme. Once you've tested the development branch changes on your online store, you can merge them with the main branch.

Here are remaining steps to implement this workflow:

3. Create A Development Branch

Execute following command to create a new branch called development:



git checkout -b development

This command creates a new branch named "development" and switches to it, enabling you to work on new features and modifications without affecting the stable version.

4. Make Changes In Development Branch

In case you have made any changes in your development branch, lets say added a new feature, fixed a bug, or made any other modification, you can commit those changes by using the commands below:



git add .
git commit -m "Add feature XYZ"

5. Merge Development Branch With Default Branch

Once the changes are thoroughly tested and verified, merge the development branch with the default branch which in my case is master.



git checkout default-branch-name
git merge development

This process integrates the tested changes into the stable version, ensuring that your default branch always reflects the latest error-free version of your theme.

Conclusion

In conclusion, integrating version control practices into your theme development process significantly enhances collaboration, minimizes errors, and facilitates efficient management of your Shopify themes.

Take advantage of the tools and best practices outlined in this guide to elevate your theme development process within the comfort of your local environment as well to foster a productive and collaborative environment for your team members by making your theme available on GitHub.

For more Shopify tips and tricks, feel free to connect with me.

LinkedIn: https://www.linkedin.com/in/quratulain

GitHub: https://github.com/QuratAin

Setting Up A Local Environment For Shopify Theme Development

Quratulaiinn — Thu, 26 Oct 2023 14:10:15 +0000

A local development environment acts as a secure workspace for developers to fine-tune their Shopify themes without the worry of affecting the live store. In this tutorial, we'll explore Shopify CLI, which allows us to effortlessly extract any theme from our Shopify store.

Follow along to learn to customize Shopify themes within the comfort of your local setup.

What You'll Learn

Setup Your Local Development Environment
Clone Shopify Store’s Theme
Preview Changes Made To Your Local Code

Prerequisites

Before you get started, make sure you have the following:

1. Shopify Partner Account And Shopify Store: If you want to use a development store to work on a theme, then create or log in to a Shopify Partner account, and then create a development store if you don’t already have one.
If you want to work on an already setup store, make sure you either have a have a collaborator account or staff account with the Manage themes permission or Themes permission for that store, or you're the store owner.

2. Node.js: Install the latest version of Node.js, as it is essential for running the necessary tools for Shopify theme development.

3. Git: Install Git to manage version control and easily collaborate with other developers.

4. Shopify CLI: Ensure that you have Shopify CLI installed on your system along with everything mentioned in Shopify CLI docs. If you haven't installed it yet, please first refer to the Shopify CLI documentation for instructions on installation and then you can use the command given below.



npm install -g @shopify/cli @shopify/theme

Why Local Environment Setup?

Here are some compelling reasons why setting up a local environment is crucial for Shopify theme development:

Enhanced Workflow Efficiency: Working on a local environment enables faster development cycles and facilitates more efficient collaboration among team members. Developers can swiftly test and implement changes without the delays associated with live deployments.
Minimized Risks And Errors: Local environments offer a controlled setting for developers to experiment with new features and designs. This reduces the possibility of introducing errors or bugs directly into the live store, ultimately enhancing the overall stability of the platform.
Optimized Theme Customization: A local development environment empowers developers to customize themes with greater flexibility and precision. It allows for detailed testing of various design elements and functionalities, ensuring an exceptional end-user experience on the live store.

Setup Your Local Development Environment

Now, let's delve into the step-by-step process of setting up your local development environment for Shopify theme development using Shopify CLI.

Step 1: Create A Project Folder

Establish a dedicated folder for your project and navigate to it:



mkdir your-folder-name
cd your-folder-name

Step 2: Pull Your Store's Theme

Fetch your store's theme to your local system using the following command:



shopify theme pull --store=your-store-name.myshopify.com

If its your first time running the above command, you will be prompted to log in to Shopify.
If you have already logged in to your store at least once, you will be directly asked to choose the theme.
Select the theme of your choice and hit enter so the download can begin.

Once the theme is downloaded, proceed to the subsequent steps.

Step 3: Open Your Code Editor

Launch your preferred code editor and load the project folder you created earlier.

You can see all the files that were present in your store’s theme are now available in your local folder.

Step 4: Initialize Theme Development

Execute the subsequent command in your code editor's terminal (ensure you're in your project directory):



shopify theme dev

💡 This command will create a development theme, enabling you to make modifications locally without impacting your live store.

Step 5: Preview Development Theme In Local Environment

After you run shopify theme dev , you can interact with your theme in browser. Shopify CLI uploads the theme as a development theme on the store.

The command returns a URL that hot reloads local changes allowing you to preview changes in real time using the store's data.

You can navigate to http://127.0.0.1:9292 to open the theme preview in your browser.

Step 6: Preview Changes Made In Your Local Code

Feel free to modify the code of your development theme and preview the changes in real-time. Lets say, you might want to adjust the text displayed in your store's announcement bar.

As shown in the image below, I've updated the text in the announcement bar within my local environment, while my live theme remains unaffected.

💡 Now you can make changes, preview them and when you're satisfied with your changes, you can seamlessly push them to your GitHub repository and subsequently deploy them to your live store.

Conclusion

Setting up a local environment for Shopify theme development lays the foundation for a streamlined and error-free development process. This setup ensures that your customers enjoy an exceptional shopping experience on your Shopify store while allowing you to seamlessly make and review alterations before deploying them live.

For more Shopify tips and tricks, feel free to connect with me.
LinkedIn: https://www.linkedin.com/in/quratulain
GitHub: https://github.com/QuratAin