Shopify Development

Category: Shopify Development

  • Redesign Shopify Collection Product Cards

    A collection page is a staple of every e-commerce store. In this guide, we are going to try and spruce things up a bit from the vanilla, default product card that makes up the collection page. I am working from the Dawn theme, but you should be able to apply this code to any theme…

    Read More

  • Showing Multiple Variant Images with Shopify Metafields

    Unfortunately, Shopify product pages only allow one variant image. It isn’t a great experience because the variant images are grouped together with all the combined variant and product photos, jumbled into one big heap. Today we are going to change this behavior and add variant images using custom metafields. Now we can show only our…

    Read More

  • Creating a Dropdown Navbar in Shopify with HTML/CSS

    Creating a custom navbar in your Shopify theme is easier than you’d think! In this intro I’m going to show you how to create a simple, mobile responsive header for your Shopify theme as a starting point for any custom features you would like to build out. Github Code: https://github.com/ndrishinski/blogs/tree/master/dropdown-navbar Prefer Video? Enjoy, otherwise read…

    Read More

  • Creating a Pre-Launch Shopify Landing Page

    It’s not uncommon to want a landing page setup on a store’s domain before the store is fully flushed out and ready to launch. Maybe you’re waiting on theme development or the product isn’t ready to ship. Whatever the reason may be, today I’ll show you a “hacky” way to show a single landing page…

    Read More

  • 2 Ways to Add Custom Fonts to Shopify Theme

    Custom fonts are a great way to add character and customization to your Shopify theme. Adding a custom font is also easier than you think. In this example, we are going to use a Google Font here. Prefer Video? Enjoy otherwise read on! Option 1: Adding Font Using an External CDN Choose a Font: First,…

    Read More

  • Add a Form to Product Page in Shopify

    I have received a request more than once to show a form instead of an add to cart button on a product page. You may wonder why someone would do this! Sometimes merchants have products that they do not keep in inventory locally or require purchases in bulk. Whatever the merchant reason, we can easily…

    Read More

  • Custom Promo Code Text on Collection Lists

    Today we are making it easy to show promo code discounts on all of the collection pages around a theme. We want to make an easy interface in the theme customizer for non-technical merchants to update which products and collections should show the promo code. We also want this announcement text to cross out the…

    Read More

  • Build a Product Modal Using the Shopify Section Rendering API

    Loading the Elevenlabs Text to Speech AudioNative Player… Continuing our exploration of Shopify’s Section Rendering API (see previous blog here), today we are building a simple popup modal that shows product details utilizing this API. This simple example is a starting point for building some great, dynamic content utilizing this technology. Let’s get started. Check…

    Read More

  • How Dawn Theme Uses Section Rendering API for Cart Refresh

    If a Shopify Theme developer ever wonders how to approach an API or feature build out, the Dawn theme is the best place to start. One standout aspect is its adept utilization of the section rendering API to streamline the cart-refreshing process. With a breakdown of this mechanism, we delve into the intricate workings of…

    Read More

  • Shopify Section Banner Animations with GSAP

    Ever wondered how you can make a custom section eye popping with custom animations? Enter GSAP (GreenSock Animation Platform), a JavaScript library renowned for its simplicity in creating captivating animations. Harnessing GSAP’s power, Shopify merchants can transform mundane banners into dynamic showcases of creativity. In this example, we use it to create a fun and…

    Read More