DEV Community: Amaan Mirza

How to Fix Shopify Liquid Errors: A Practical Troubleshooting Guide

Amaan Mirza — Tue, 06 Oct 2026 11:02:40 +0000

Liquid syntax error: Unknown tag 'endif'

Why Browser-Based Online Tools Are Becoming a Better Alternative to Desktop Software

Amaan Mirza — Sun, 27 Sep 2026 18:39:35 +0000

Many everyday tasks still require simple software: converting files, resizing images, creating PDFs, adding watermarks, generating invoices, and preparing images for social media.

However, installing a separate application for every small task isn't always practical.

Browser-based tools provide another approach. Users can open a website, complete the task, and continue working without installing additional software.

What are browser-based tools?

Browser-based tools are web applications that perform a specific task directly from a web browser.

Depending on how they are built, these tools can process files locally in the browser or use a remote server for processing.

Common examples include:

PDF converters
Image converters
Image resizers
PDF mergers
Watermark tools
Invoice generators
QR code generators
Document utilities

The biggest advantage is convenience. There is no application installation or complicated setup.

Why browser-based tools are useful

1. No installation

A user can access a tool from Chrome, Edge, Firefox, Safari, or another modern browser.

This is particularly useful when someone only needs a tool once or occasionally.

2. Works across devices

A web-based application can work across different operating systems without requiring separate Windows, macOS, or Linux versions.

3. Faster access

Instead of downloading software, installing it, and finding the correct feature, users can open a web tool and start working immediately.

4. Useful for small tasks

Not every task requires a large desktop application.

If someone only needs to merge a few PDFs or convert an image format, a focused online utility can be enough.

Privacy is also important

File-processing tools should clearly explain what happens to uploaded files.

For sensitive documents such as invoices, contracts, or personal images, users may prefer tools that can process files directly inside the browser.

Client-side processing can reduce the need to send the original file to a remote server, depending on how the application is implemented.

This is one reason browser APIs such as the File API, Canvas API, and Web Workers are becoming useful for modern web utilities.

Building a collection of useful web tools

Instead of creating a website around one utility, developers can build a collection of small tools that solve different problems.

For example, a single platform can provide:

Text to PDF conversion
Image to PDF conversion
Documents to PDF
PDF merging
PDF to WebP conversion
Image to WebP conversion
Bulk image watermarking
Invoice creation
WhatsApp QR generation
Social media image resizing

A collection like this can be particularly useful for freelancers, students, developers, designers, small businesses, and general internet users.

A practical example

Imagine a freelancer preparing a client presentation.

They might need to:

Resize images
      ↓
Convert images to WebP
      ↓
Create a PDF
      ↓
Merge additional PDF pages
      ↓
Add a watermark

Instead of installing several applications, a collection of focused browser tools can handle each step.

Instant Convert Tools

One example of this approach is Instant Convert Tools, a collection of free browser-based utilities for documents, PDFs, images, and other everyday tasks.

The platform includes tools such as:

Text to PDF
Image to WebP
PDF to WebP
Image to PDF
Docs to PDF
Merge PDF
Bulk Watermark Adder
Invoice Creator
WhatsApp QR Code Generator
Social Media Image Resizer

The idea is simple: open the required tool, complete the task, and download the result without installing desktop software.

What developers can learn from these tools

Browser-based utilities are also a good way for developers to learn modern JavaScript APIs.

Some useful technologies include:

File API
Canvas API
Blob API
Web Workers
Drag and Drop API
Client-side PDF libraries
Browser image processing
Download APIs

These technologies can be combined to create surprisingly capable applications without requiring a large backend.

The future of small web utilities

Not every software problem needs a complex SaaS platform.

Sometimes users simply need a fast tool that solves one problem well.

That makes lightweight browser applications an interesting area for developers. They can be easier to access, easier to experiment with, and in some cases better suited to privacy-conscious workflows.

Final thoughts

Browser-based tools have become a practical alternative for many everyday tasks that previously required desktop software.

For developers, they also provide an opportunity to build useful applications with standard web technologies such as JavaScript, browser APIs, and client-side processing.

For users, the biggest benefit is simple: open the browser, complete the task, and move on.

How to Convert Images to WebP in the Browser Using JavaScript

Amaan Mirza — Sun, 27 Sep 2026 18:36:08 +0000

WebP is a modern image format that can significantly reduce image file sizes while maintaining good visual quality. This makes it useful for websites where image performance and loading speed matter.

In this guide, we'll look at how to convert an image to WebP directly in the browser using JavaScript.

Why use WebP?

WebP supports both lossy and lossless compression and is widely supported by modern browsers.

For websites, converting large JPG or PNG images to WebP can help reduce the amount of data that needs to be downloaded.

The basic browser workflow is:

Select an image.
Load it into an HTML canvas.
Convert the canvas to WebP.
Create a downloadable file.

HTML

<input type="file" id="imageInput" accept="image/*">
<button id="convertBtn">Convert to WebP</button>
<a id="downloadLink" style="display:none;">Download WebP</a>

JavaScript

const input = document.getElementById("imageInput");
const button = document.getElementById("convertBtn");
const downloadLink = document.getElementById("downloadLink");

button.addEventListener("click", () => {
    const file = input.files[0];

    if (!file) {
        alert("Please select an image first.");
        return;
    }

    const reader = new FileReader();

    reader.onload = (event) => {
        const image = new Image();

        image.onload = () => {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            canvas.width = image.width;
            canvas.height = image.height;

            context.drawImage(image, 0, 0);

            canvas.toBlob(
                (blob) => {
                    const url = URL.createObjectURL(blob);

                    downloadLink.href = url;
                    downloadLink.download = "converted-image.webp";
                    downloadLink.textContent = "Download WebP";
                    downloadLink.style.display = "inline-block";
                },
                "image/webp",
                0.85
            );
        };

        image.src = event.target.result;
    };

    reader.readAsDataURL(file);
});

Processing images completely in the browser

One advantage of this approach is that the image can be processed locally in the browser. Depending on how an application is implemented, this can avoid uploading the original image to a remote server.

This can be useful when building privacy-focused image conversion tools.

If you want to convert an image without writing any code, you can also use Instant Convert Tools' Image to WebP Converter.

It supports browser-based image conversion and is designed for quick JPG and PNG to WebP conversion.

Improving the converter

A production-ready image converter can include additional options such as:

WebP quality control
Resize before conversion
Drag and drop upload
Multiple image conversion
File size comparison
Preview before downloading
JPEG, PNG and WebP support

For bulk processing, you can also use browser APIs to process multiple files without requiring a traditional server upload workflow.

Conclusion

The Canvas API provides a simple way to convert images to WebP using JavaScript. For many basic use cases, the entire process can happen directly in the browser.

This approach is especially useful for small web applications, image utilities and privacy-focused tools where users don't necessarily need to upload their original files to a server.

How I Fixed a Slow Shopify Product Page Without Rebuilding the Theme

Amaan Mirza — Thu, 20 Aug 2026 10:58:41 +0000

A Shopify store can look beautiful and still feel slow.

One of the most common situations I've seen is a product page containing large images, multiple sections, third-party scripts, app blocks, and custom JavaScript.

The first reaction is often:

"We need a new theme."

But sometimes you don't need to rebuild the entire Shopify store.

You can get significant improvements by finding the actual bottleneck and fixing it at the theme level.

In this article, I'll walk through a practical example of improving a Shopify product page using Liquid, JavaScript, and better image loading techniques.

If you need help with Shopify theme customization, performance improvements, or custom development, you can also check out my Shopify development service:

Shopify Store Design & Development Service

The Problem

Imagine a Shopify product page like this:

Product Page
│
├── Large Hero Image
├── Product Gallery
├── Product Information
├── Reviews App
├── Recommendation App
├── Recently Viewed App
├── Custom Animation
├── Newsletter Popup
└── Chat Widget

The page looks great.

But on mobile, customers experience:

Slow initial loading
Images appearing late
Layout shifting
Delayed interactions
Slow product gallery
Unnecessary JavaScript execution

The important question is:

Which part is actually causing the problem?

Step 1: Don't Guess — Measure First

Before changing code, check the page using tools such as:

Chrome DevTools
Lighthouse
PageSpeed Insights
Shopify's own analytics/performance information

Look for:

Large image files
Render-blocking resources
Long JavaScript tasks
Third-party scripts
Layout shifts
Slow network requests

For example, if your product hero image is 2500×2500 pixels but the customer is viewing it at 600×600 pixels, you're sending significantly more image data than necessary.

That's an easy place to start.

Step 2: Optimize Shopify Images

Shopify's image CDN can generate appropriately sized images.

Instead of simply outputting:

{{ product.featured_image | image_url }}

you can request an appropriate width:

{{ product.featured_image | image_url: width: 800 }}

Then use it inside an image element:

<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  alt="{{ product.featured_image.alt | escape }}"
  width="800"
  height="800"
>

This gives the browser a more appropriate resource instead of unnecessarily downloading a huge original image.

Step 3: Use Responsive Images

A better approach is to provide multiple image sizes.

<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w
  "
  sizes="(max-width: 749px) 100vw, 800px"
  alt="{{ product.featured_image.alt | escape }}"
  width="1200"
  height="1200"
>

Now the browser can choose an appropriate resource based on the device and available layout size.

This is especially useful for product galleries.

Step 4: Don't Lazy-Load the Main Product Image

Here's an important distinction.

You may want to lazy-load images that are below the fold.

But the main product image is often one of the first important visual elements on the page.

For the primary image, I generally avoid unnecessarily delaying its loading.

For example:

<img
  src="{{ product.featured_image | image_url: width: 1200 }}"
  alt="{{ product.featured_image.alt | escape }}"
  fetchpriority="high"
  width="1200"
  height="1200"
>

For images further down the page, lazy loading can make more sense:

<img
  src="{{ image | image_url: width: 800 }}"
  loading="lazy"
  alt="{{ image.alt | escape }}"
  width="800"
  height="800"
>

The idea isn't:

"Lazy-load everything."

The idea is:

"Load important content early and defer content that isn't immediately needed."

Step 5: Reduce Unnecessary JavaScript

Another common problem is loading JavaScript for functionality that the customer may never use.

For example, imagine a custom animation script:

document.querySelectorAll('.product-card').forEach(card => {
  // animation logic
});

If your page contains hundreds of product elements, this can become unnecessarily expensive.

Instead, initialize functionality only when it's actually needed.

For example:

const products = document.querySelectorAll('.product-card');

if (products.length > 0) {
  products.forEach(card => {
    // Initialize only when product cards exist
  });
}

You can also defer non-critical scripts.

<script src="{{ 'custom.js' | asset_url }}" defer></script>

The defer attribute allows the browser to continue parsing the HTML while the script downloads.

Step 6: Don't Load an App's Assets Everywhere

This is another issue that can appear in heavily customized Shopify stores.

Suppose an app is only needed on the product page.

There is little reason to load its assets across every page if the implementation allows you to control where they are loaded.

A Liquid condition can help:

{% if request.page_type == 'product' %}
  <script src="{{ 'product-feature.js' | asset_url }}" defer></script>
{% endif %}

Now the script is only included when the current page is a product page.

The exact implementation depends on the app and how its assets are injected, but the principle is important:

Don't load functionality where it isn't needed.

Step 7: Prevent Layout Shifts

Another common problem is images without defined dimensions.

For example:

<img src="product.jpg" alt="Product">

The browser doesn't necessarily know how much space the image will occupy before it loads.

This can cause content to move when the image appears.

Instead:

<img
  src="product.jpg"
  alt="Product"
  width="800"
  height="800"
>

Or use CSS with a controlled aspect ratio:

.product-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

This reserves space for the image and can help create a more stable layout.

Step 8: Be Careful With Third-Party Apps

Apps are useful.

But every app can potentially add extra resources to your store.

For example:

Reviews
Chat
Analytics
Popup
Wishlist
Upsell
Tracking
Recommendations

Individually, each one might seem small.

Together, they can create a noticeable performance cost.

Before adding another app, ask:

"Can this functionality be implemented simply in the theme?"

Sometimes a small custom Liquid/JavaScript solution can be cleaner than adding another dependency.

Step 9: A Simple Shopify Product Image Implementation

Putting some of the ideas together, a product image could look like this:

{% assign product_image = product.featured_image %}

{% if product_image %}
  <img
    src="{{ product_image | image_url: width: 1000 }}"
    srcset="
      {{ product_image | image_url: width: 400 }} 400w,
      {{ product_image | image_url: width: 800 }} 800w,
      {{ product_image | image_url: width: 1000 }} 1000w,
      {{ product_image | image_url: width: 1400 }} 1400w
    "
    sizes="(max-width: 749px) 100vw, 50vw"
    alt="{{ product_image.alt | default: product.title | escape }}"
    width="1400"
    height="1400"
    fetchpriority="high"
  >
{% endif %}

This gives you:

Responsive image selection
Appropriate image sizing
Better accessibility
Reserved image space
Priority loading for the main visual

What I Would Check After Making the Changes

After making changes, don't immediately assume the page is faster.

Test it again.

Check:

Before
↓
Lighthouse / PageSpeed
↓
Make one change
↓
Test again
↓
Compare results

Pay attention to:

LCP
CLS
INP
FCP
TTFB
Total page weight
Number of requests

Most importantly, check the experience on an actual mobile device.

A good Lighthouse score is useful, but real users are the final test.

The Bigger Lesson

One of the biggest mistakes in Shopify development is trying to fix performance by rebuilding everything.

Sometimes the real problem is much smaller:

One oversized image.

One unnecessary script.

One third-party app.

One poorly implemented section.

One animation running unnecessarily.

Before rebuilding a Shopify store, find the actual bottleneck.

Then fix the bottleneck.

This approach can save development time while keeping the existing store, products, theme structure, and branding intact.

Need Help With Shopify Development?

If your Shopify store needs theme customization, performance optimization, responsive design fixes, custom Liquid development, or a complete redesign, I provide Shopify development services.

You can check out my Fiverr service here:

Shopify Store Design & Development Service

If you're working with Shopify, I'd love to know:

What's the biggest performance issue you've faced in a Shopify store — images, apps, JavaScript, or something else?

How to Build a Shopify Store That Actually Converts

Amaan Mirza — Thu, 20 Aug 2026 10:50:33 +0000

Building a Shopify store is relatively easy.

Building a Shopify store that looks professional, loads quickly, works smoothly on mobile, and gives customers a reason to buy is a completely different challenge.

A successful e-commerce store isn't just about adding products and choosing a theme. Design, navigation, product pages, mobile experience, performance, and the overall shopping journey all work together.

If you're planning to build or redesign your Shopify store and need professional help with Shopify design, theme customization, responsive improvements, or custom development, you can check out my Shopify service here:

Shopify Store Design & Development Service

Now let's look at the important things that can make a Shopify store better.

1. Start With a Clear Store Structure

Before touching the theme code, define the store structure.

A typical Shopify store should make it easy for visitors to move between:

Homepage
Collections
Product pages
About page
Contact page
Cart
Checkout

Your navigation should answer one simple question:

"Where should the customer go next?"

Avoid putting every collection and page into the main navigation. Keep it simple and group related products logically.

For example:

Home
├── Shop
│   ├── New Arrivals
│   ├── Best Sellers
│   └── Categories
├── About
├── Contact
└── FAQ

A simple structure usually creates a much better shopping experience than a complicated menu.

2. Make the Homepage About the Customer

One common mistake is filling the homepage with information about the company.

Instead, the first section should quickly communicate:

What you sell
Who it is for
Why it is different
What the customer should do next

A strong hero section can be as simple as:

Premium products for your everyday routine.

Then provide a clear call to action such as:

Shop Now

The customer shouldn't have to scroll through five sections before understanding what the store sells.

3. Product Pages Matter More Than Most People Think

A beautiful homepage won't help much if the product page is confusing.

A good product page should make important information easy to find:

Product name
Price
Product images
Variants
Availability
Product description
Benefits
Shipping information
Returns
Reviews
Add to Cart button

The goal is to remove uncertainty.

If a customer has to search for basic information before buying, there is unnecessary friction in the purchasing process.

4. Design for Mobile First

A large percentage of e-commerce traffic comes from mobile devices.

That means a Shopify store should not simply be a desktop design squeezed into a smaller screen.

Check:

Navigation
Font sizes
Buttons
Product images
Product grids
Spacing
Sticky elements
Cart experience
Checkout flow

A button that looks perfect on desktop may be difficult to tap on mobile.

A product grid that displays four products beautifully on desktop may become cramped on a phone.

Responsive design needs to be intentional.

5. Don't Install an App for Everything

Shopify has a huge app ecosystem, which is one of its strengths.

But installing too many apps can create problems.

Every additional app can potentially add:

JavaScript
CSS
Network requests
Third-party dependencies
Extra code

Before installing an app, ask:

"Do I really need this functionality?"

If a small feature can be implemented cleanly in the theme without an unnecessary dependency, custom development may sometimes be the better option.

The goal isn't to have the most apps.

The goal is to have the functionality the store actually needs.

6. Keep the Theme Customization Clean

When customizing Shopify themes, it's tempting to keep adding small changes directly until everything looks right.

Over time, this can create difficult-to-maintain code.

A better approach is to keep customizations organized and reusable.

For example:

{% render 'custom-product-badge' %}

Instead of repeatedly duplicating the same markup throughout the theme.

Good theme development should make future changes easier rather than harder.

7. Don't Ignore Performance

Design and performance need to work together.

Large images, unnecessary scripts, third-party apps, and heavy animations can negatively affect the user experience.

Some useful practices include:

Compressing images
Using appropriate image dimensions
Avoiding unnecessary JavaScript
Removing unused app code where possible
Lazy-loading appropriate images
Keeping animations lightweight
Testing important pages regularly

Performance isn't about chasing a perfect score.

It's about making the store feel fast and responsive for real customers.

8. Build Trust Into the Store

A customer needs to feel comfortable before purchasing.

Trust can come from simple elements such as:

Clear product information
Professional product photography
Customer reviews
Transparent shipping information
Return policies
Secure checkout messaging
Contact information
Consistent branding

These details may seem small individually, but together they make a store feel legitimate and professional.

9. Don't Forget SEO Basics

Shopify stores should also be built with search engines in mind.

Important areas include:

Descriptive page titles
Meta descriptions
Clean URLs
Product descriptions
Image alt text
Internal linking
Collection structure
Proper heading hierarchy
Structured data where appropriate

SEO shouldn't be treated as something you add after the store is finished.

It should be considered during the build.

10. When Should You Redesign a Shopify Store?

You don't necessarily need a completely new store.

Sometimes the existing store has a good foundation but needs improvements.

A redesign can make sense when:

The store looks outdated
The mobile experience is poor
Navigation is confusing
Product pages need improvement
Branding is inconsistent
The homepage doesn't communicate the value clearly
The theme has become difficult to maintain
Performance has degraded over time

In many cases, improving an existing store can be more practical than rebuilding everything from scratch.

Final Thoughts

A successful Shopify store isn't created by adding as many features as possible.

It comes from getting the fundamentals right:

Clear structure + strong design + mobile responsiveness + good performance + trustworthy product pages.

Shopify provides the platform, but the quality of the final store depends heavily on how it is designed, customized, and maintained.

If you're working on a Shopify store and need help with store design, theme customization, redesign, responsive improvements, or custom Shopify development, you can check out my service here:

Shopify Store Design & Development Service

If you're a developer, I'd also be interested to hear:

What is the biggest Shopify theme or performance problem you've encountered in a real project?

I Built a Free Social Media Image Resizer with Live Safe Zone Preview

Amaan Mirza — Fri, 07 Aug 2026 12:59:00 +0000

Stop Cropping Your Text: I Built a Free Social Media Image Resizer with Safe Zone Preview

🚀 Introducing the Free Social Media Image Resizer

👉 https://instantconverttools.com/social-media-image-resizer-safe-zone.php

If you've ever designed an image for Instagram, YouTube, Facebook, or LinkedIn, you've probably faced this problem.

Everything looks perfect in Photoshop, Figma, or Canva…

But after uploading it, your text gets cropped.
Your logo is too close to the edge.
Your face gets hidden behind platform UI.
Important content disappears.

I ran into this problem over and over while creating thumbnails, social posts, and client graphics.

Most online image resizers only change the dimensions.

They don't tell you what will actually remain visible after the platform adds its own interface.

So I decided to build my own tool.

Instead of only resizing your image, the tool also shows a Live Safe Zone Preview.

This means you can instantly see:

✅ Areas that may get cropped
✅ Areas covered by platform UI
✅ Safe zones for text and logos
✅ How your final image will actually appear

Everything happens directly in your browser.

**- No uploads.

No signup.
No waiting.
Supported Platforms**

Currently the tool supports:

**1. Instagram Post

Instagram Reel Cover
YouTube Thumbnail
YouTube Shorts
Facebook Post
LinkedIn Post
X (Twitter)
WhatsApp Display Picture**

Upload your image once and export it in multiple platform sizes.

Features
🎯 Live Safe Zone Preview

Instead of guessing where to place your text…

You instantly see the safe area before downloading.

This helps prevent:

Cropped headlines
Hidden logos
Cut-off faces
UI overlap 📍 Smart Focal Point

Sometimes the subject isn't exactly in the center.

You can simply click on the subject or use Smart Auto-Center, and every crop adjusts around that focal point.

📦 Bulk Export

Need multiple sizes?

Select the platforms you need and download everything together as a ZIP.

No repetitive work.

🔒 Privacy First

Unlike many online tools,

your images are never uploaded to any server.

Everything runs locally inside your browser.

That makes the tool both faster and more private.

Why I Built This

Most image resizers focus only on dimensions.

I wanted something that actually solved the real problem.

When creating content, we don't just need:

"1080 × 1350"

We need to know

"Will my text still be visible?"

That's exactly what this tool helps with.

Who Is This For?

If you create images for social media regularly, this tool can save a surprising amount of time.

Try It

👉 https://instantconverttools.com/social-media-image-resizer-safe-zone.php

I'd genuinely appreciate your feedback.

If you have ideas for new platforms or features, let me know in the comments.

I'm continuously improving Instant Convert Tools, a growing collection of fast, browser-based utilities that help creators and developers get work done faster. 🚀