-
Etsy and Target Inspired Circular Collection Image Links
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. Code: https://github.com/ndrishinski/blogs/commit/dc454beba90e09606185a6eb83507398761e70e1 Crate our new section file The first…
-
Creating a Photo Grid Section in Shopify inspired by Nike
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. In this blog post, we will explore how to create a stunning photo grid in Shopify using Liquid, HTML, and CSS. By following the steps outlined in the code snippet provided, you can easily…
-
Creating a Video Banner in Shopify
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…
-
Creating a Multi-Image Banner with Transitions
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. Code: https://github.com/ndrishinski/blogs/commit/bdc7c13667d8edb8a4dc967071b9b6c92ed5850a…
-
Adding a Quick View Modal | Collections Page Add to Cart
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…
-
Learn Shopify Sections & Schema with Examples
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…
-
Add a Custom Badge on Collection Page in Shopify
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…
-
Add a Variant Selector to Collections Page on Shopify
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…
-
Copy / Paste Discount Code Badge – Shopify Theme Blocks
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…
-
Product Recommendations API – Building a Cart Theme Block
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.…
