Forem: Saad Saif

I created shareable wishlist in Shopify without using any app

Saad Saif — Sun, 29 Mar 2026 18:46:06 +0000

Shopify Wishlist Without App (Step-by-Step)

Want to add a wishlist feature to your Shopify store without using any app or paying monthly fees?

In this tutorial, I show how to build a fully functional and shareable wishlist using custom code in Shopify (Dawn theme).

Watch the full tutorial

What you’ll learn

Create wishlist section & snippet
Handle logic with JavaScript
Add custom styling
Manage translations
Integrate into theme.liquid

This approach keeps your store fast and gives you full control without relying on apps.

If you need help implementing this, feel free to reach out.

Custom Shopify Bundle Builder (No App Needed)

Saad Saif — Fri, 27 Mar 2026 04:09:20 +0000

I built a custom bundle builder in Shopify that lets customers create their own product packs without using any third-party apps.

This helps store owners save monthly app costs, improve site speed, and keep everything fully controlled inside Shopify using metaobjects and metafields.

Customers can easily pick products, choose variants, and see their bundle update instantly, which makes the buying experience smoother and increases conversion chances.

The result is a faster, cleaner, and more scalable solution that works perfectly on both desktop and mobile without relying on heavy apps.

You can watch full video here:

Master Shopify Theme Development with JavaScript: Build Real Features Step-by-Step

Saad Saif — Mon, 17 Nov 2025 13:00:41 +0000

🚀 Master Shopify Theme Development with JavaScript: Build Real Features Step-by-Step

If you're a Shopify theme developer looking to upgrade your JavaScript skills, this hands-on course is made just for you. Instead of learning theory, you’ll build real Shopify features using JavaScript, Liquid, Shopify CLI, AJAX API, Web Components, and the Section Rendering API — the exact tools modern Shopify brands rely on.

Whether you're a beginner learning Shopify development or an experienced freelancer wanting to sharpen your workflow, this course helps you build fast, dynamic, app-free functionality used by high-performing Shopify stores.

🎯 What This Course Covers

By the end of this course, you’ll know how to build clean, optimized, and fully functional Shopify features from scratch — no heavy apps needed.

🌐 Set Up Your Local Development Environment

✔ Work with Shopify CLI
✔ Connect your local theme to a development store
✔ Use real-time hot reload for fast development

📦 Build Advanced Shopify Features Using JavaScript

This course walks you through creating powerful, real-world features:

Free Shipping Progress Bar
Fixing & Debugging Theme Issues
Product Upsells Inside the Cart Drawer
Sticky Add to Cart Bar
Variant Handling for Sticky Add to Cart
Gift Wrapping Feature (with auto-remove logic)
Importing Test Products for Faster Development
Image Swatches on Product Pages
Variant Image Swatches on Collection Pages (Using Web Components)
Dynamically Updating Product Info on Variant Change (Section Rendering API)

Every feature is explained step-by-step so you can apply the concepts to your future projects.

🧠 Who This Course Is For

This course is perfect for:

Shopify theme developers
Freelancers building Shopify stores
Agency developers working with custom themes
Beginners learning Liquid + JavaScript
Anyone who wants to build custom features without relying on apps

If you're working with Shopify themes, this course gives you tools that clients actually ask for.

🧩 Code Snippets Included

All the implementations are available in public GitHub Gists:

Free Shipping Progress Bar

https://gist.github.com/saadsaif97/4040a3ad7d95fb2d031a02b936a9b46f
Upsells in Cart Drawer

https://gist.github.com/saadsaif97/773f4fa9f043e326361ef892243b376e
Sticky Add to Cart

https://gist.github.com/saadsaif97/d38070c840f785b8590bc99b2974d92d
Gift Wrapping Feature

https://gist.github.com/saadsaif97/20132aaa47d2c1745fa8a8c9bd0bcce1
Image Swatches on PDP

https://gist.github.com/saadsaif97/8d32397a7e02ead925d254387685d266
Variant Image Swatches on Collection Page

https://gist.github.com/saadsaif97/a824966a52d0cf1f5b85b525080c9bac
Update Product Information on Variant Change

https://gist.github.com/saadsaif97/d4f24975166743e0fad1eddf22bc29a6

📁 Test Products Download

Use these sample products in your test store:

👉 https://drive.google.com/file/d/1PSfOaGPw2Yn-nb-fMmWRdTlK66kgJVFw/view

Note: Create the required product metafields shown in the video at 1:44:14 to ensure proper import.

🎓 Course Outcome: Build Shopify Stores Developers Get Hired For

By completing this course, you'll gain:

Real-world Shopify JS development experience
The ability to build custom UI/UX features
A strong understanding of Shopify APIs
Confidence to deliver advanced theme functionality
Skills that reduce dependency on Shopify apps

Whether you're building for clients, launching a freelance career, or leveling up your theme development workflow — this course gives you the technical foundation to create high-performance, modern Shopify stores.

🛠 Notes

The features in this course are for educational purposes.

Please test and optimize them before using in live production stores.

Start watching now 👇

🎥 Watch the Full Course on YouTube →

Best Shopify theme development course URDU/Hindi

Saad Saif — Wed, 22 Oct 2025 19:03:33 +0000

The Shopify Development Course I Wish I Had When I Started

A few days ago, I came across a Reddit post from someone who had just started learning Shopify development.

They said:

“I’ve been studying for 8–10 hours every day, but everything is so scattered. YouTube tutorials are short and disconnected, and Udemy courses just make you follow along without explaining how Shopify actually works.”

That hit home for me.

When I started learning Shopify Theme Development, I faced the same issue — no structured path, no updated content, and no one explaining the why behind Shopify’s architecture.

That’s exactly why I decided to create a complete Shopify Theme Development course — taught in Hindi and Urdu — that covers everything from the basics to advanced customization.

This course is designed for beginners who want to become Shopify developers, as well as freelancers looking to specialize in Shopify.

What you’ll learn:

Deep understanding of Shopify’s Liquid language
Building custom themes using Online Store 2.0 architecture
Using Shopify APIs like the Cart API and Section Rendering API
Creating custom sections, app blocks, and dynamic content
Debugging
Best practices for version control and Shopify CLI

Why this course stands out:

Most tutorials just show how to “make it work.”
This one teaches you how to think like a Shopify developer — so you can build high-performance, scalable themes and confidently handle real client projects.

If you’ve been struggling to find a proper learning path, this course will give you clarity, structure, and practical skills that actually matter in today’s Shopify ecosystem.

Watch FULL COURSE HERE

Complete Shopify Theme Development Course in Hindi & Urdu (Beginner to Advanced)

Saad Saif — Tue, 21 Oct 2025 18:37:17 +0000

Complete Shopify Theme Development Course in Hindi & Urdu (Beginner to Advanced)

Learn Shopify Theme Development from scratch to an advanced level — in Hindi & Urdu.

This step-by-step course takes you through everything you need to become a professional Shopify Theme Developer — from mastering Liquid to building custom themes and integrating Shopify APIs.

Watch the Full Course on YouTube:

What You’ll Learn

By the end of this course, you will be able to:

Build and customize Shopify themes confidently
Understand the Liquid templating language deeply
Work with Shopify’s APIs (Cart API, Section Rendering API, etc.)
Debug and optimize Shopify themes for performance

Prerequisites

Before starting, make sure you have:

Basic knowledge of HTML, CSS, and JavaScript
A basic understanding of Shopify Liquid
A strong willingness to learn and build projects

Module 1: Fundamentals & Liquid Templating

In this module, you'll learn everything about Shopify’s architecture and Liquid language.

You’ll understand how to structure a theme, connect GitHub with Shopify, and work with sections, metafields, and metaobjects.

By the end, you’ll have a strong foundation for building dynamic and scalable Shopify themes.

Module 2: JavaScript & Shopify APIs

This module focuses on adding interactivity and custom functionality to your Shopify themes.

You’ll learn how JavaScript works within Shopify, explore the Cart API, and understand how the Section Rendering API helps update content dynamically.

You’ll also learn about Web Components and how they improve theme modularity and performance.

Module 3: Build a Custom Shopify Theme

Here, you’ll bring everything together and build a complete custom Shopify theme from scratch.

From setting up the homepage and product page to creating a cart drawer, mega menu, and variant selectors — this module is entirely hands-on.

By the end, you’ll have a fully functional and optimized Shopify theme ready for deployment.

Tools & Technologies Used

Shopify CLI
Visual Studio Code
GitHub
Shopify Liquid
JavaScript & DOM Debugging Tools
Shopify Cart API & Section Rendering API

Useful Resources

About the Instructor

Hi, I’m Saad Saif, a Shopify Theme Developer with over 4 years of experience helping brands and agencies build high-performing Shopify stores.

I specialize in:

Shopify theme customization
Custom functionality and performance optimization
Checkout extensibility and metafields/metaobjects
Shopify Plus development

Website: EcomWonk.com

LinkedIn: Saad Saif

YouTube Channel: @saadsaif97

Final Words

This is the most comprehensive Shopify Theme Development course in Hindi and Urdu, designed to help you become confident and job-ready.

If you’re serious about becoming a Shopify Developer, this course gives you a complete roadmap to master theme development and customization.

Start watching now:

Watch the Full Course on YouTube →

Add custom badges on Shopify products without app

Saad Saif — Mon, 06 Oct 2025 08:09:53 +0000

Create Custom Product Labels and Badges in Shopify Without Any App

We will create custom product badges in Shopify without any app using metafield and few lines of code.
I have implemented this solution on the Shopify DAWN theme, but this solution can be implemented on any theme, we can also modify the design according to the need. If you need help, you can message me anytime on my whatsapp.

Steps

Go to store settings → Metafields and metaobjects
Add Products Metafield definition named as Badges
- Select the type as Single line text and List of values
Create a snippet named as: badges.liquid
- Use the following snippet:

{%- assign custom_badges = product.metafields.custom.badges.value -%}
<div style="display: flex; flex-direction: column; gap: 10px; position: absolute; right: 10px; top: 10px;z-index:10;">
    {%- for custom_badge in custom_badges -%}
        {%- assign custom_badge_parts = custom_badge | split: '|' -%}
        {%- assign custom_badge_text = custom_badge_parts[0] -%}
        {%- assign custom_badge_bg = custom_badge_parts[1] -%}
        {%- assign custom_badge_color = custom_badge_parts[2] -%}
        <span style="background-color: {{ custom_badge_bg }}; color: {{ custom_badge_color }}; border-color: {{ custom_badge_color }}" class="custom-badge">{{ custom_badge_text }}</span>
    {%- endfor -%}
</div>

Then go to base.css and paste the following code at the end:

/* custom badge start */
.product-card-wrapper,
.product__media-wrapper {
  position: relative;
}
.custom-badge {
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  word-break: break-word;
}
/* custom badge end */

Then go to card-product.liquid and search for this line <div class="card-wrapper product-card-wrapper underline-links-hover"> and paste the following snippet under that:

{%- render 'badges', product: card_product -%}

Then go to main-product.liquid and search for this line <div class="grid__item product__media-wrapper"> and paste the following snippet under that:

{%- render 'badges', product: product -%}

Video Tutorial

Watch the step-by-step video tutorial here:

How to design custom product labels and badges | Shopify

Saad Saif — Sun, 17 Nov 2024 18:09:15 +0000

WATCH THE VIDEO HERE:

CODE SNIPPET IS HERE:

{%- assign labels = product.metafields.custom.labels.value -%}

<div class="product-labels">
  {%- for label in labels -%}

    {%- assign background_color = label.color -%}
    {%- assign color_string = "" | append: background_color -%}
    {%- assign text_color = color_string | color_lighten: 100 -%}  

    <small class="product-label" style="background-color: {{ background_color }}; color: {{ text_color }};">
      {{ label.title }}
    </small>

  {%- endfor -%}
</div>

NEED HELP?

You can reach me at my email address: saadgfx97@gmail.com

checkout my original post on my blog

I updated the Shopify theme admin panel 😲

Saad Saif — Sat, 16 Nov 2024 18:30:10 +0000

I built a Chrome extension to help Shopify theme developers copy theme IDs and preview the theme in just one click.

Install the extension: https://chromewebstore.google.com/detail/shopify-theme-buttons/gopngflpjaeingidfnpjfkkdenpdekpa

PWA empty fetch callback

Saad Saif — Thu, 18 Mar 2021 14:39:35 +0000

If you have the empty fetch call back in service worker, PWA will no longer be installable from august 2021.

You have to respond with custom response in fetch request, check if request is in cache then send file from cache else proceed with request

self.addEventListener('fetch', (evt) => {
  evt.respondWith(
    caches.match(evt.request).then((cacheRes) => {
      return cacheRes || fetch(evt.request)
    })
  )
})

Type validation in mongoose is not strict

Saad Saif — Wed, 20 Jan 2021 07:26:10 +0000

In this example, a simple type checking for the mongoose model is shown which shows that the type checking in the mongoose is not strict.