Posts by Mangit

How to Add a Custom Favicon to Shopify Checkout

Update: To make this process even easier, I’ve created a simple app that lets you upload a custom favicon to your Shopify checkout without any coding. This tool is perfect for store owners who want a quick solution. Check it out here (replace with your app link).


🛒 How to Add a Custom Favicon to Shopify Checkout (Shopify Plus Guide)

A favicon is a small but powerful branding element that appears in the browser tab, reinforcing your store’s identity during the checkout process. For Shopify Plus merchants, customizing the checkout favicon can enhance brand consistency and customer trust. This guide walks you through the process of adding a custom favicon to your Shopify checkout using the GraphQL Admin API.(Shopify, Shopify)


✅ Prerequisites

Before you begin, ensure the following:

  • Your store is on the Shopify Plus plan.
  • You have access to the GraphQL Admin API with the necessary permissions.
  • You’re using API version 2023-10 or higher.
  • You have the read_checkout_branding_settings and write_checkout_branding_settings access scopes.
  • You have the GraphiQL app installed or have created a custom app to interact with the API.(Shopify)

🖼️ Step 1: Upload Your Favicon Image

First, upload your favicon image to Shopify or an external hosting service. If uploading to Shopify, use the stagedUploadsCreate mutation to upload the image and obtain a URL.


📁 Step 2: Create a File Asset in Shopify

Use the fileCreate mutation to create a file asset in Shopify. Provide the URL of your uploaded image as the originalSource. This mutation will return a mediaImageId, which you’ll use in the next step.(Shopify)

mutation fileCreate($files: [FileCreateInput!]!) {
  fileCreate(files: $files) {
    files {
      id
    }
    userErrors {
      field
      message
    }
  }
}

Variables:

{
  "files": [
    {
      "originalSource": "https://your-hosted-image-url.com/favicon.png",
      "contentType": "IMAGE",
      "alt": "Checkout Favicon"
    }
  ]
}

🆔 Step 3: Retrieve Your Checkout Profile ID

Checkout customizations are applied to specific checkout profiles. Retrieve your store’s checkout profile ID using the checkoutProfiles query.(Shopify)

query checkoutProfiles {
  checkoutProfiles(first: 1, query: "is_published:true") {
    edges {
      node {
        id
        name
      }
    }
  }
}

Note the id of the published checkout profile for use in the next step.


🖌️ Step 4: Apply the Favicon to Checkout

Use the checkoutBrandingUpsert mutation to set the favicon for your checkout. Provide the mediaImageId from Step 2 and the checkoutProfileId from Step 3.(Shopify)

mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
    checkoutBranding {
      customizations {
        favicon {
          image {
            id
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

Variables:

{
  "checkoutProfileId": "gid://shopify/CheckoutProfile/your_profile_id",
  "checkoutBrandingInput": {
    "customizations": {
      "favicon": {
        "mediaImageId": "gid://shopify/MediaImage/your_media_image_id"
      }
    }
  }
}

👀 Step 5: Preview the Favicon in Checkout

To view your new favicon:

  1. In your Shopify admin, go to Settings > Checkout.
  2. Click on the button next to your checkout profile.
  3. Select View if your profile is live or Preview if it’s in draft.
  4. Refresh the page to see the updated favicon.(Shopify)

🔄 Resetting to Default

If you need to revert to the default favicon, you can reset the customization by setting the favicon field to null using the checkoutBrandingUpsert mutation.(Shopify)


📚 Additional Resources

By following these steps, you can effectively add a custom favicon to your Shopify checkout, enhancing your store’s branding and providing a consistent experience for your customers.


6 Must-Have Sections for Every Shopify Store

6 Must-Have Sections for Every Shopify Store

Running a Shopify store isn’t just about listing products. To stand out and convert visitors into loyal customers, you need to build trust, offer clarity, and guide users effectively. Below are six essential sections every Shopify site should include—with examples to show you how it’s done.

💡 Good Idea: Review your store while reading this blog. If you’re missing any of these sections, now’s the time to upgrade.


1. User-Generated Content (UGC) or Social Proof

Social proof builds instant trust. You can use customer reviews, photo submissions, and testimonials to show that real people love your product.

What to include:

  • Star ratings under product titles
  • Customer photos and videos
  • Written reviews with names or locations

💡 Good Idea: See how Pura Vida integrates reviews and customer photos beautifully on their product pages.


2. Shipping and Returns on the Product Page

Don’t make customers search for return or shipping policies. Placing this information directly on the product page increases transparency and trust.

What to include:

  • Delivery time estimates
  • Clear return window
  • Free shipping info (if applicable)

💡 Good Idea: Check how Allbirds shows clear shipping and return info just below the “Add to Cart” button.


3. Eye-Catching Hero Banner

The hero banner is the first thing visitors see. Make it count by showcasing your most popular product or a seasonal promotion.

What to include:

  • High-quality visuals
  • Short and clear message
  • A strong call-to-action (e.g. “Shop Now”)

💡 Good Idea: Rothy’s uses a clean hero banner with a powerful call-to-action and smooth scroll-to-shop effect.


4. Collection Descriptions

A collection without a description can feel incomplete. Adding a short paragraph helps with SEO and tells customers what to expect.

What to include:

  • A summary of what’s inside
  • Keywords to improve searchability
  • A tone that reflects your brand voice

💡 Good Idea: See how Gymshark adds brief, effective descriptions to its collection pages.


5. Confidence-Boosting Section

This section reassures customers that buying from you is safe and smart. Include icons or text near your “Add to Cart” button.

What to include:

  • Secure checkout badges
  • Return guarantees
  • Payment options
  • “Satisfaction guaranteed” message

💡 Good Idea: Brooklinen adds “Risk-Free 365-Night Trial” and free return messages right near the purchase section.


6. Email List or Newsletter Signup

Many visitors won’t buy on their first visit—but you can keep them engaged with email marketing.

What to include:

  • A simple sign-up form
  • A discount or gift for joining
  • A message about what they’ll receive (e.g. “Exclusive sales, new arrivals”)

💡 Good Idea: Visit Pura Vida Bracelets and scroll down to see how they capture emails with a clean, branded form and an exclusive discount offer.


Final Thoughts

Each of these sections plays a key role in building a high-converting Shopify store. They help establish trust, improve usability, and bring customers back to your site.

If you’d like help designing or implementing these sections, feel free to contact me at 📧 mangitma@gmail.com. I’d be happy to help customize your Shopify store for better performance and user experience.

💡 Good Idea: Bookmark this post and revisit your store monthly to ensure you’re using all six sections effectively.


Common Mistakes to Avoid as a Shopify Developer

Launching your Shopify store? Don’t let small mistakes sabotage your big dreams. In this guide, we break down the top 10 common missteps new Shopify store owners often make—from using the default `.myshopify.com` domain to skipping mobile optimization. With expert-backed tips and practical solutions, you’ll learn how to create a polished, high-converting store that stands out from the crowd. Let’s help you start strong and sell smarter!

Read More