Blog

Short-form, vertical video has become one of the most effective ways to grab attention online — and now you can bring that same format directly into your Shopify storefront.

In this tutorial, I’ll show you how to:

• Generate a portrait (vertical) video using Google Labs’ Pomelli tool

• Upload that video to Shopify

• Add a custom Portrait Video Hero section to your theme

• Fully customize layout, spacing, and mobile behavior — without installing an app

Long product pages and blogs are common in Shopify stores — but scrolling all the way back to the top can be annoying for customers. A simple solution is to add a Scroll to Top button: a floating action button that appears only after the user scrolls down and returns them smoothly to the top with one click.

Adding subtle scroll animations like this is an easy way to make your Shopify store feel more interactive and engaging. GSAP is lightweight, performant, and gives you precise control over every animation.

If you want to make your Shopify store stand out with motion and polish, an animated hero section is a perfect place to start. In this tutorial, we’ll walk through how to build a GSAP-powered hero section that updates both the background gradient and product image together as you scroll.

Adding smooth, professional animations to your Shopify theme can significantly enhance user experience and make your store stand out from the competition. In this guide, we'll walk through how to implement GSAP (GreenSock Animation Platform) animations in your Shopify theme, specifically focusing on homepage animations.

A before/after image comparison slider is a powerful tool for showcasing product transformations, demonstrating the effectiveness of your products, or highlighting improvements. This interactive element allows customers to drag a slider to compare two images side by side, making it perfect for beauty products, fitness transformations, home improvement items, or any product that shows visible results.

Are you looking to showcase your mobile app, promote app downloads, or create an engaging visual element on your Shopify store? A phone screen section is the perfect way to display mobile content in an attractive, realistic phone mockup. In this guide, we'll walk you through how to add a professional phone screen section to your Shopify store.

Are you looking to enhance your Shopify store's footer with beautiful, interactive sections? In this guide, I'll show you how to copy and paste three different footer sections that will transform your store's bottom area into an engaging, conversion-focused space.

Want to showcase YouTube videos or uploaded video files in a beautiful, flexible grid on your Shopify store? With this custom section, you can easily add a “Vlog” or “Media” grid to any page, letting you mix YouTube embeds and direct video uploads, each with custom thumbnails, titles, and descriptions.

In e-commerce, creating an engaging shopping experience is crucial for converting visitors into customers. One of the most effective ways to do this is through a "Shop the Look" or "Fashion Showcase" section that allows customers to see how products work together in a complete outfit.

Adding a Product Reviews section to your Shopify store is a great way to build social proof and encourage purchases from your visitors. Unfortunately this feature is only available via paid apps, but today I'm going to show you how to add this to your store for FREE.

Providing customers with the right information is crucial for enhancing their shopping experience and reducing return rates. One of the most important pieces of information for apparel and accessory retailers is a sizing chart. A well-designed sizing chart not only helps customers choose the right fit but also builds trust in your brand. In this blog post, we will explore the steps to seamlessly integrate a sizing chart into your Shopify theme, ensuring that your customers have easy access to the information they need to make informed purchasing decisions.

Harness AI-Powered Designs within the Shopify Theme Editor!

By following these steps, you can create a stunning Shopify section that not only showcases your products but also enhances the overall shopping experience with a beautiful color variant animation.

If you're looking to enhance your Shopify store with a visually appealing section that showcases your products, you're in the right place! Inspired by the Crumbl Cookies website, we’ll guide you through adding a stylish product showcase section to your store. This section will feature images, titles, descriptions, and buttons that encourage customers to engage with your products.

A well-designed product showcase can significantly enhance user experience and drive sales. Today, we’ll walk you through creating a visually appealing "New Arrivals" section for your Shopify store using Liquid, CSS, and HTML. This section will feature a captivating hero image alongside a scrollable list of products, making it easy for customers to discover your latest offerings.

Adding a countdown timer to your Shopify store can create a sense of urgency and encourage customers to make a purchase before a sale ends. In this guide, we will walk you through the steps to add a countdown timer section to your Shopify store using Liquid code.

Adding a visually appealing hero banner to your Shopify store can significantly enhance the user experience and draw attention to your products. In this guide, we will walk you through the steps to create a hero banner with an animation that changes the hero image using Liquid, CSS, and JavaScript.

One effective way to gain attention on your store is by incorporating dynamic elements like video carousels into your online store. In this blog post, we will explore how to create a TikTok-inspired video carousel for Shopify stores using Liquid, HTML, CSS, and JavaScript.

Custom Shopify sections allow you to enhance your store’s design and functionality, but coding them from scratch can be time-consuming. Thanks to AI, you can now generate Shopify sections effortlessly using tools like v0 AI. In this guide, I'll show you how to go from a simple screenshot to a fully functional Shopify Liquid section—all with the help of AI.

One effective way to enhance user experience is by allowing customers to easily select product variants and add items to their cart directly from the collection page. In this blog post, we will explore how to create a dynamic "Add to Cart" section for your Shopify store using Liquid, HTML, CSS, and JavaScript.

Visual appeal is crucial for attracting customers and driving sales. One effective way to enhance your online store's aesthetics is by incorporating dynamic product showcases. In this blog post, we will explore how to create a Shopify section that replicates the Adidas website's product card feature, complete with changing images. This section not only looks great but also engages users by showcasing multiple product images in a seamless manner.

In this blog post, we will walk you through the process of creating a visually appealing count animation section for your website, similar to the one featured on the Casper website. This section can be a great way to showcase key statistics or achievements in a dynamic and engaging manner.

Creating engaging animations on your Shopify store can significantly enhance user experience and draw attention to key messages. In this tutorial, we will walk you through the steps to add a heading animation inspired by the Hims website using a custom Liquid section file.

A logo showcase is a powerful tool for brands to display their identity and build trust with potential customers. By following the steps outlined in this blog, you can create a stunning logo slider that not only looks great but also functions seamlessly on your website. With customizable settings and engaging animations, your logo showcase will leave a lasting impression on visitors, ultimately driving brand recognition and loyalty. Start implementing these techniques today and watch your brand's visibility soar!

Getting started with Shopify's Polaris Components can be daunting. In this guide I'll show you how to create a quick Shopify App project where you can utilize a few popular Polaris components to make your interface look cohesive with the Shopify Admin.

Giving customers the best checkout experience is paramount. One effective way to achieve this is by implementing checkout extensions that offer personalized product suggestions. In this blog post, we will explore the process of creating a checkout extension using Shopify's UI Extensions framework. Specifically, we will focus on a feature that suggests a "surprise" or "mystery" product to customers during the checkout process, thereby increasing the likelihood of additional purchases. By leveraging the power of React and Shopify's APIs, we will guide you through the steps to build a seamless and engaging upsell experience.

Creating an eye-catching banner section for your store is a great way to capture the attention of potential customers and enhancing their shopping experience. In this blog post, we will explore how to design a dynamic banner section that features an engaging product image animation. By leveraging CSS animations and Liquid templating, you can create a visually stunning display that not only showcases your products but also adds a touch of interactivity to your online store. Whether you're a seasoned developer or just starting with Shopify, this guide will provide you with the tools and techniques needed to elevate your store's aesthetic and drive conversions

The provided code defines a Shopify section that creates an engaging banner featuring a typewriter animation. This section is designed to enhance the visual appeal of a website by displaying dynamic text that simulates the effect of typing. The banner includes customizable settings for background images, text colors, button styles, and typing speed, allowing store owners to tailor the appearance to match their brand identity. The use of CSS for styling and JavaScript for the typewriter effect ensures a smooth and interactive user experience.

I am always trying to showcase my blogs and videos via my website and other mediums. One effective way to achieve this is by creating a reusable section for featured blog posts on your Shopify store. This approach not only highlights your most valuable articles but also enhances the overall aesthetic of your site. In this post, we will explore how to implement a stylish and functional featured blogs section using Liquid, a templating language used in Shopify. By the end of this guide, you'll have a clear understanding of how to set up this section, making it easy to keep your audience informed about your latest and greatest content.

While surveying two of the largest e-commerce companies in the world, Etsy and Target, I discovered a small but meaningful feature that they both share: a horizontally aligned section with rounded images linking to various collections. This design is not only simple but also elegantly utilizes space, occupying approximately 180 pixels in height while providing a satisfying horizontal scrolling experience. In this tutorial, I will guide you through the process of adding this visually appealing section to your Shopify store.

One of the ways I get ideas for great features in e-commerce stores is browsing some of the most successful and popular brands. I found a photo grid on Nike's website that I really liked and decided to build.

Capturing the attention of potential customers is paramount. One of the most effective ways to achieve this is by incorporating dynamic visual elements into your online store. A video banner section can transform the look and feel of your Shopify site, providing an engaging and immersive experience for visitors. In this blog post, we will guide you through the process of creating a stunning video banner section in Shopify, highlighting the key steps and best practices to ensure your banner not only looks great but also enhances your brand's message.

In the world of web design, creating visually appealing and functional components is essential for engaging users and enhancing their experience. One such component is the multi-image banner section, which allows for the display of multiple images in a dynamic and interactive format. This blog post will delve into a specific implementation of a multi-image banner using Liquid, a templating language commonly used in Shopify themes. We will explore the code that defines the structure, styling, and functionality of this banner, highlighting how it can be customized to fit various design needs while ensuring a responsive layout that adapts to different screen sizes.

Enhancing the shopping experience is at the heart of successful e-commerce design, and a quick view popup modal is a perfect way to achieve this. By letting customers preview product details and select variants without leaving the collection page, you streamline their journey and keep them engaged. In this blog, we’ll walk you through creating a quick view popup modal for your Shopify store. Utilizing the power of the Section Rendering API, we’ll enable functionality to dynamically load product details, allow variant selection, and provide a seamless "Add to Cart" experience—all within a sleek modal interface.

When building a highly customized and visually engaging Shopify storefront, understanding the power of section schema and schema settings is crucial. Shopify’s schema provides a flexible, developer-friendly way to define sections and settings that allow merchants to personalize their store without any coding. By configuring schema in your theme code, you can create customizable sections with options for text, colors, images, and more, giving merchants the control to update content as their brand evolves. In this blog, we'll explore the fundamentals of Shopify's schema and schema settings, breaking down how they work and sharing tips to make the most of this feature in your store's theme.

Product badges can be a powerful way to catch your customers' attention and highlight special items on your store's collection pages. Whether it's a "New Arrival," "Best Seller," or "Limited Edition" tag, custom badges add a visual cue that encourages shoppers to explore and engage with specific products. In this blog, we’ll guide you through the steps to create and display custom product badges on your Shopify collection pages, helping your products stand out and drive more clicks.

Providing customers with the ability to select product variants directly from the collection page is a great way to enhance the shopping experience and streamline their journey. Rather than navigating to individual product pages to view options like size or color, a variant selector allows customers to quickly browse and choose the exact product variant they want right from the collection view. In this blog, we'll walk you through how to add a variant selector to your Shopify store's collection page, making it easier for shoppers to find and select the products they love in less time.

Creating a customized checkout experience is essential for providing a seamless and branded journey for your customers. With Shopify's Checkout Extensions, you can tailor the checkout process to better align with your store's needs, whether that means adding custom messages, upsells, or additional fields for order information. In this blog, we'll walk you through the process of building a Shopify Checkout Extension, from setup to implementation, making it easier than ever to create a unique checkout flow that can boost conversions and enhance customer satisfaction.

Offering discounts is a great way to incentivize customers to make a purchase, and making those discounts easily accessible can enhance the shopping experience even further. In this guide, we’ll show you how to create a simple, user-friendly discount code widget for your Shopify product page. With just a few lines of code, you can allow customers to easily copy a discount code and apply it at checkout, driving sales and improving customer satisfaction.

Learn how to use the product recommendations API building a practical in cart upsell. Cart upsells are an effective way to boost your average order value by offering similar products. Luckily Shopify provides us with an AJAX endpoint that will return a list of similar products. Note this tutorial is working in the Dawn theme.

In the competitive world of e-commerce, social proof can be a powerful tool to drive sales. One effective way to leverage this is by displaying the number of orders for a product, showcasing its popularity and potentially influencing purchasing decisions. In this tutorial, we'll walk you through the process of building a Shopify app that displays the order count on product pages. By the end, you'll have a functional app that not only enhances the shopping experience but also potentially boosts your conversion rates.

Looking to highlight your most popular products and give them the attention they deserve? Adding a "Best Seller" badge to your Shopify product page is a quick and effective way to capture customer interest and increase sales. In just 5 minutes, you can implement this eye-catching badge to help your top-performing products stand out and give your store a dynamic, professional look. Follow this step-by-step tutorial to easily add a "Best Seller" badge to your Shopify store and start driving more conversions today! Note in this tutorial, I will be working from the Dawn theme.

Customer reviews and ratings can make all the difference in building trust and boosting sales. Shoppers rely on the experiences of others to make informed purchasing decisions, and a well-integrated review system can significantly enhance your store’s credibility. In this quick guide, I’ll show you how to add a custom product rating and review feature to your Shopify store in just 5 minutes. With this simple addition, you'll empower your customers to share their feedback and help others shop with confidence.

I’ve always been a big fan of micro-animations in the apps and websites I interact with. These small touches can significantly enhance the user experience, making interactions more engaging and delightful. In this tutorial, we’ll explore how to add an animation to the 'Add to Cart' button on your product page. This animation will provide users with immediate visual feedback, ensuring they know their action was successful and adding a touch of personality to your store.

The "Add to Cart" button is the most crucial call to action in any e-commerce store. It's essential to strategically place this button in multiple locations to maximize sales opportunities. In this guide, I'll show you how to integrate an "Add to Cart" button on the collection page of the Dawn theme, making it easier for customers to shop directly from your collections.

Shopify's cart object has a few places that allow us to customize customer orders with custom text. These include the cart 'attributes', 'notes', and individual line item 'properties'.

Enhancing your e-commerce store with visually appealing elements can significantly boost its uniqueness and appeal. One effective way to achieve this is by adding images to your header's navigation menu. In the world of e-commerce, engaging visuals are key to attracting and retaining customers. In this guide, I'll walk you through the process of creating a custom header dropdown that showcases your collections with selected collection images. Let's dive in!

An increasingly popular feature in e-commerce today is adding an 'Add to Cart' button or bar that stays fixed to the bottom of the screen while the user scrolls away from the top of the page. This makes a lot of sense, because there is typically only one Add to Cart button on a PDP at the top. Today I'm going to show you how to add this bar to your product page so you can increase conversions on your product pages.

Dynamic Theme Blocks in Shopify revolutionize the way merchants and developers enhance their storefronts by offering a flexible and customizable approach to website design. These blocks allow for seamless integration of content and functionality, providing users with the ability to dynamically add, remove, and configure elements within across their entire theme. Let's get started creating our first Dynamic Theme Block!

Today we are taking the standard sign in/sign up page for customers who create an account, and customizing it to have a more modern style and animation!

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 given you use the same sections and snippets that may have different file names.

Shopify app extensions are a unique way to create an app that is hosted on Shopify itself! Follow along to create your first app extension in just a few minutes. Just make sure you have the Shopify CLI installed and a Shopify partner account created.

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 set of variant images on each given variant option.

An announcement banner is a great way to alert your customers to sales or exciting promotional offers. Today I'm going to show you how to create your own with a simple animation to improve the visibility and style. From here you can add images, countdowns to deal expiration or any other custom behavior you would like.

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.

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 with an email capture on Shopify. Special thanks to Parth Shah for his codepen we are utilizing.

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

Sometimes merchants have products that they do not keep in inventory locally or require purchases in bulk. Whatever the merchant reason, we can easily embed a contact form within your product page and show a simple form rather than the add to cart button. While this is on the product page, it is generally the same principle no matter where you add this form on your store. We will also distinguish when to show the form based on a product tag that matches 'invoice'. In this tutorial we are using the Dawn theme, but it should be a straightforward copy/paste for most themes on your product liquid file

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 normal price and show what the discounted price is. We will accomplish this by adding settings to the theme's global settings and showing you how to bulk add/remove tags in the Shopify dashboard. Note that in this blog I am referencing Dawn theme

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.

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 how the Dawn theme updates the cart in real-time. Join me as we uncover the inner workings of the Shopify Dawn theme, showcasing its commitment to efficiency and user-centric design, and gain the skills to build out a custom rendering in our next blog!

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 playful carousel style section banner.

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 also apply this to non predictive search themes on the search results page.

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.

Today, we're diving into the realm of Shopify’s cart slideout and harnessing web components to seamlessly integrate a dynamic free shipping notice into your Shopify store's slideout cart.

In this blog, we'll dive into the nuances of the Shopify image_tag filter, exploring how to strike the perfect balance between image quality and web page performance.

In the fast-paced world of online shopping, grabbing the attention of visitors is key to success. Keeping your store visually appealing and up-to-date with seasonal promotions and styles is a powerful way to engage customers. In this tutorial, we'll guide you through the process of turning a section background into a captivating winter wonderland, complete with falling snow and a charming Santa hat adorning your call-to-action button.

Creating a unique and informative section for each collection page on your Shopify store can significantly enhance the user experience. In this guide, we'll walk through the process of building a custom section called 'custom-collection-info' that will dynamically showcase essential information at the bottom of every collection page.

Have you ever been frustrated with the dull and uninteresting 404 pages that appear when links go dead or users type in an invalid URL? Today, we're going to transform that experience by adding a unique and charming 404 page to your Shopify store. More often than not, dead links are an unavoidable reality, and our goal is to make the 404 page stand out compared to the default, simple text provided by most themes.