-
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…
-
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…
-
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…
-
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…
-
Highlight Search Terms | Liquid Highlight Filter
Today I wanted to show you one of the easiest additions you can make to your theme to improve the customer experience on your store. When a customer types in to your predictive search bar, you can add a Shopify Liquid filter to your results which will bold the exact text they entered. You can…
-
Announcement Banner: Free Shipping Progress Bar
As a part 2 of the previous blog, I thought we could enhance the customer experience further with a progress bar at the top of the store indicating the proximity to the free shipping threshold. Prefer Video? If you prefer following along on video enjoy below, otherwise read on. Creating a global threshold setting To…
-
Learn Shopify Dev: Free Shipping Cart Notice with Web Components
Offering free shipping can be a game-changer for delighting customers and boosting sales. Showing proximity to free shipping can be an effective tool for incentivizing customers to add an extra item or two. Today, we’re diving into the realm of Shopify’s cart slideout and harnessing web components to seamlessly integrate a dynamic free shipping notice…
-
Deep Dive into Shopify Image Tag | No more blurry images
Welcome to the world of Shopify’s dynamic image rendering courtesy of the image_tag. Visual appeal is paramount, and Shopify’s image tag & filters provides a powerful way to more easily implement and optimize your theme images. In this blog, we’ll dive into the nuances of the Shopify image_tag filter, exploring how to strike the perfect…
