Catalog

  • Catalog Shopify Guides for Developers

  • Display Featured Image on Product Page by Editing Theme's JavaScript File for Sectioned Themes

    Today, focusing on customers’ experience while shopping play an important role in winning buyers’ affection. As a results, a lot of online shops would like to display a featured image on the product page. To meet the demand, this tutorial will give you the instruction to display a featured image on the product page by editing theme’s JavaScript file for sectioned themes.

  • Display Customizations in Email Templates

    Email marketing is a powerful way to capture customers’ attention and keep them engaged with your products. However, knowing how to effectively display customizations in email templates within Shopify can be a challenge. Customizing your emails to match your brand and showcase the right information is essential for boosting engagement and driving conversions. This guide will help you understand how to display customizations in email templates on Shopify and make the most of your email marketing efforts.

  • Show a Photo Gallery on your Site

    For every e-commerce site, the photo galleries which showcase your products are undoubtedly necessary to gain customers’ trust and attention. However, adding a nicely-displayed photo gallery in Jekyll can be such a challenge for beginners and inexperienced people. With the purpose of solving the problem for people who have troubles implementing a photo gallery, this instructional writing on how to show a photo gallery on your site will be a great help for your website.

  • Use Collections on your Site

    Using collections is such a great way to not only manage and organize related content but also to make it easier for your audience to quickly keep track and view any particular category of the content. Let’s build more attraction and popularity for your website by enabling collections, a very effective content management system to organize content on your site without complexity and headache. To help you solve the problem, this instructional writing on How to use collections on your site will be a great help for your website.

  • Insert a Layout, Collection and Blog to a Static Site

    To make your website more beautiful and to help you present more detailed information on your products or brand to customers, inserting a layout, collection, and blog to your static site is a must; however, the layout, collection, and blog can be hard to maintain. With the writing on how to insert a layout, collection and blog to a static site which includes the detailed guideline, we hope that you can easily insert a layout, collection, and blog to your static site and easily maintain them.

  • Set a Date in Any Format

    Formatting dates can be challenging, especially when you need a specific format for your data. Whether you’re working on a project or managing data, figuring out how to set a date in any format can save time and avoid errors. In this post, we’ll walk you through the steps to format dates exactly how you need them.

  • Estimate Reading Time of a Post

    The feature estimated reading time of a post is becoming more popular. Reading time is grounded in the average speed of reading of a grown-up (about 265 words per minute). The total word count of a post will be translated into minutes with an adjustment made for photos. There are a lot of elements that could lay effects on reading time, like the type of font, sizes, the viewer’s age, reading material (on paper or a monitor), the total number of paragraphs, links, images in the content, and so many more.

  • Insert an RSS or Atom feed on the Jekyll site

    An RSS or Atom feed is considered very important for most blogs to notify their readers/ viewers of new content on the site. More into details, there are two ways to add an RSS or Atom feed to your Jekyll site: either using a Jekyll plugin or Liquid. We highly recommend the plugin for you because it should be the most effective way for the reason that there are thousands of people have tested the code. Nevertheless, you should also have a look at the RSS using pure Liquid to understand more how it really works.

  • Manage if Liquid loops over the content

    Liquid is known as a safe, flexible language, used in various types of environments. It was created for Shopify stores and Jekyll websites using. There are three popular versions of Liquid, which includes Liquid, Jekyll Liquid, Shopify Liquid.

  • Use Gems, Gemfiles, and the Bundler

    Gem, Gemfile and the Bundler are those terms which are often used in the Ruby community but do you know exactly what they are and how to use them?

  • Save posts by date, tags, and categories

    You are meeting troubles with saving posts by dates, tags, and categories? Don’t be worried because we are here to give you the detailed instruction on how to address your issue with Jekyll Archives. Jekyll Archives allows you to generate pages listing posts by their tags, dates, and categories.

  • Authorize the payment for pre-orders

    What if there are products that are already out of stock? Actually, you can sell them as pre-orders. You can make it work by creating an alternate template of product and adjusting your payment settings. Also, you can use this customization to keep selling products which are on back-order.

  • how to setup pre-orders

    Setting up pre-orders can be confusing, especially if you’re new to the process. Many online sellers face challenges like managing inventory, dealing with customer expectations, and ensuring a smooth checkout experience. But don’t worry, setting up pre-orders doesn’t have to be complicated. In this guide, we’ll walk you through the steps to easily set up pre-orders for your products, helping you boost sales and keep your customers happy. Let’s dive in!

  • Track inventory levels

    Managing inventory can be challenging if you don’t know how to track inventory levels in Shopify. This guide will show you a simple way to monitor your stock and avoid running out of products. Keep your store running smoothly by staying on top of your inventory with these easy steps.

  • Use a static site generator

    Static site generator is becoming a more and more popular keyword nowadays, according to the report of Google Trends on this word, for its power to support you to build a strong e-commerce website.

  • How to add linked options to your theme

    Are you running an online store on Shopify and finding it difficult to manage multiple product variations like size, color, or style? If so, adding linked options to your Shopify theme can help your customers easily select a product variant. This improves the shopping experience by showing only the options that match their first choices, reducing frustration and making shopping more satisfying. In this step-by-step guide, we'll walk you through how to add linked options to your Shopify theme.

  • How to choose product variants by clicking a variant image

    You are running the business of clothes or fashion items and you want to have better competitive advantages than your competitors. Therefore, you would like to edit a theme that customers buy products by clicking on products’ images. The tutorial will give you the instruction to choose product variants by clicking a variant image.

  • How to disable sold-out variants for non-sectioned themes

    Disabling sold-out variants for non-sectioned themes in Shopify can be a bit tricky. Many store owners face the issue of unwanted sold-out options appearing, causing confusion for customers. In this guide, we’ll walk you through a simple solution to remove these sold-out variants, ensuring a smoother shopping experience for your customers and helping you maintain a cleaner product display.

  • Display featured image on product page by editing your theme code

    Showcasing your products effectively is crucial for any Shopify store, especially when using non-sectioned themes. Many store owners struggle to display a featured image on their product pages, missing out on the opportunity to highlight their products’ best features. This guide focuses on how to display a featured image on a product page by editing your theme code in Shopify. Discover how to leverage your theme’s code to boost your Shopify store’s appearance and potentially increase sales.

  • Generate a new Liquid snippet called swatch.liquid

    In the Shopify theme editor, when Swatches are chosen as the item variant style there could be so many options for adjusting and modifying the color of the swatch. There is a fact that you are completely able to set up custom colors in a manual way.

  • Generate a size chart page

    Have you ever had customers return products because they didn’t fit? A survey by Digital Commerce 360 found that 55% of shoppers return items due to size issues. 

  • Include swatch.liquid in product.liquid

    You need to add swatch.liquid to product.liquid in Shopify? This guide will show you exactly how to do it, step by step, to improve your product pages quickly. Let’s get started and make your store stand out!

  • How to insert a quantity selector in Shopify

    Do you know that you can enhance your Shopify store’s user experience and boost sales by seamlessly integrating a quantity selector into your product pages?

  • Insert the size chart to your theme

    Many Shopify store owners face challenges in providing accurate sizing information to their customers, which can lead to confusion and increased returns. Adding a size chart to your theme can address this issue, but the process may seem overwhelming for those who are not familiar with theme customization. This guide will focus on how to insert the size chart into your theme in Shopify, a crucial feature for clothing and accessories stores.

  • Insert a 'Sort by' menu to collection pages

    Having a Sort by menu on collection pages is crucial for any e-commerce store, offering customers a convenient way to browse products. However, many store owners are unsure how to insert a Sort by menu into collection pages in Shopify. This guide will walk you through the simple steps to add this feature, improving your store’s user experience and helping customers find what they need faster.

  • Modify the code for your product images

    As an online store administrator, you are allowed to insert a hover effect to all images of products on either your collection pages or on your home page. The image will be automatically switched to the next one of the same collection to show custom text, product image, or a mix of the two just like this:

  • Delete the additional checkout buttons from your cart page

    Displaying checkout buttons on the checkout page is crucial for both store owners and customers. However, having additional checkout buttons on your cart page in Shopify can lead to confusion and a cluttered user experience. In this article, we will guide you through the steps to remove the extra checkout buttons from your cart page and streamline your checkout process.

  • Generate a code snippet for the gift-wrap option

    Need to add a gift-wrap option to your Shopify store but don’t know how to generate the code snippet? This guide will show you the exact steps to create a code snippet for the gift-wrap option in Shopify, so you can quickly enhance your store’s functionality and offer customers a better shopping experience.

  • How To Create A Contact Page On Shopify: Our Step-by-Step Guide

    Creating an effective contact page on Shopify is more than just providing an email address; it’s about fostering trust and opening communication channels.

  • Insert a checkbox to your cart page in sectioned themes

    Are you looking to add a terms and conditions checkbox to your Shopify cart page? Many store owners struggle with this important legal step. Adding a checkbox ensures customers agree to your terms before checkout, protecting your business. This guide will show you how to insert a checkbox to your cart page in sectioned themes in Shopify.

  • Insert a Continue shopping link to your cart page

    Struggling to figure out how to insert a “Continue Shopping” link to your cart page in Shopify? You’re not alone. Many store owners want to enhance their customers’ shopping experience by adding this convenient link, but don’t know where to start. In this guide, we’ll walk you through the simple steps to add a “Continue Shopping” link to your Shopify cart page, making it easier for your customers to keep browsing and boost your sales. Let’s dive in and solve this common issue once and for all!

  • Insert a form field to your theme code

    If you’re looking to add a form field to your theme code in Shopify, this guide will walk you through the process. By inserting custom form fields, you can easily collect valuable customer information directly on the cart page. Follow these simple steps to improve your store’s functionality and user experience.

  • Add Custom Fields to Contact Form in Shopify

    The Shopify Contact Form is essential for visitor engagement, but it’s often limited to basic fields. However, customization is possible, allowing you to gather more in-depth information from your audience. This guide will walk you through the steps to add custom fields to your Shopify contact form, providing a richer experience for your visitors and valuable insights for your business.

  • Insert custom fields to your theme's customer registration form

    Do you need various fields for your registration form to collect more data when they sign up for an account? Are you wondering about how to do that?

  • Insert the notification form code to your theme

    A notification form is considered very important and necessary for any e-commerse business since customers are able to lett you know whether they want to be notified when an out of stock item becomes back in stock again with it. When an user fill in the form their email address, you will be sent information on the product that interests them. Then, you can let your buyers know when it is available.

  • Modify the theme code to add the shipping calculator

    Shipping rates calculator is able to display your shipping rates on your store’s cart page. When a customer signs in, the calculator will employ that customer’s default shipping address to estimate the shipping rate. The shipping rates calculator does work with manual rates, carrier-calculated rates, or even a mix of the two.

  • Update the collection-template.liquid file

    Managing your Shopify cart’s functionality is crucial for a smooth customer experience, but many store owners struggle with updating item removal links. This guide focuses on how to update links for removing items from the cart in Shopify, a key aspect of cart customization. Learn step-by-step processes for desktop, iPhone, and Android platforms to ensure your cart works seamlessly with custom line properties.

  • Update item quantity fields in the cart

    Many Shopify users face challenges when trying to update item quantity fields in their cart, unsure of how to proceed. If you’re looking for a clear, step-by-step guide, you’re in the right place. Whether you’re using a sectioned or non-sectioned theme, this post will help you easily update item quantities in your Shopify cart, enhancing your store’s functionality and user experience. Let’s get started.

  • Apply a class to your templates

    Sometimes, you might not want every image on your Shopify store to open in a lightbox, especially if they’re hyperlinked or already the desired size. There are two ways to customize this behavior: applying a class to your templates or adding jQuery code. This article will focus on the first method, guiding you through applying a class to specific templates for more control over image display.

  • Edit correct quantities on the cart page silently

    Are you looking for a way to edit correct quantities on the cart page silently in Shopify? Many store owners face challenges with updating cart quantities without disrupting the user experience. In this guide, we’ll walk you through the steps to silently edit quantities on the cart page, ensuring a seamless shopping experience for your customers.

  • Generate a back-to-the-top snippet

    Want to improve your Shopify store’s user experience? Learn how to generate a back-to-the-top snippet in Shopify. This simple feature can make a big difference for customers browsing long pages. In this guide, we’ll show you step-by-step how to add this helpful navigation tool to your store. Whether you’re a beginner or an experienced Shopify user, you’ll find our instructions clear and easy to follow. Let’s dive in and make your store more user-friendly today.

  • Generate and include an age-check snippet

    Need to add an age-check snippet to your Shopify store? Ensuring your site is compliant with age-restriction laws is crucial, especially if you’re selling products like alcohol, tobacco, or other regulated items. In this guide, we’ll walk you through how to generate and include an age-check snippet in Shopify, making it easy to protect your business and customers. Follow these simple steps to set up an effective age verification process.

  • generate the "How did you hear about us" form field

    Gathering valuable customer insights is essential for refining your marketing strategies and understanding your audience better. One effective way to achieve this is by adding a “How did you hear about us” form field in Shopify. In this guide, you’ll learn the steps to generate this field and easily implement it into your store for better customer tracking.

  • Generate your snippet

    Creating and using snippets in Shopify can significantly streamline your theme customization, but many store owners find this process challenging. This guide will show you how to generate your snippet in Shopify, step-by-step.

  • Insert breadcrumb navigation to your store

    Breadcrumb navigation helps improve user experience and boosts your store’s SEO. It may seem tricky to set up, but it’s important for guiding customers through your site and letting them easily return to previous pages. This guide will show you how to add breadcrumb navigation to your Shopify store with clear, step-by-step instructions to solve common problems

  • Insert Disqus to your blog

    Inserting Disqus to your blog in Shopify is a straightforward way to enhance engagement with readers. This guide will walk you through the exact steps to add Disqus to your Shopify blog seamlessly, ensuring you can start building a strong community around your content quickly and efficiently.

  • Insert the security badge code to your theme

    As an online store owner, you are able to insert a security badge which is designed by Shopify to your online store to generate trust with your customers Shopify complies with the highest level of standards of Payment Card Industry (PCI). Additionally, you are allowed to choose to add either a dark (or light) colored Shopify security badge, it depends on the color scheme of your online website.

  • Modify the code for your payment icons

    Are your Shopify payment icons not quite right? Many store owners struggle to customize these important visual elements. This guide focuses on modifying the code for payment icons in Shopify, helping you create a more professional and trustworthy checkout experience. We’ll walk you through the process step-by-step, making it easy to update your payment icons even if you’re not a coding expert.

  • Select which page to show when customers log in to your online store

    Whenever a customer comes to your online store website and signs in with their account, they will see a My Account page, which can display not only their previous orders but also associated shipping and billing addresses. As an online store runner, do you want to redirect your users, the potential customers, to a specific page? If your answer is “Yes”, please keep reading our instructional writing on How to select which page to show when customers log in to your online store to know more deeply about one this topic.

  • Update the product form to support dynamic checkout buttons

    Having trouble figuring out how to update your product form to support dynamic checkout buttons in Shopify? This is a common issue for store owners who want to enhance the checkout experience and increase conversions. This guide will provide clear, step-by-step instructions to help you integrate dynamic checkout buttons into your product form, making it easier for your customers to complete their purchases

  • Liquid paginate: Split into multiple pages

    Dividing products, search results, and blog articles across so many pages is a very important part of theme design when you are restricted to only 50 results a page in any for loop. The paginate tag works with the for tag to divide your content into different pages. It must wrap a for tag block that can loop thru an array as displayed in the example taken below:

  • Liquid Variables: assign, capture, increment, increment

    Seeking to infuse dynamism and flexibility into your Shopify store’s design? Mastering Liquid variables is the key to unlocking a world of customization and personalized user experiences. This comprehensive guide will equip you with the knowledge to harness the power of assign, capture, increment, and decrement tags for creating truly interactive and engaging Shopify themes.

  • Insert the search box on your Jekyll site using lunr.js

    In order for users to be able to find [relevant content] easily, you can actively add search to your store site. It is a relatively small site. Therefore, you are allowed to perform the search entirely client side. In case there were so many blog posts, customers may need to wait for a long time to search the post. Hence, a backend search could be a good choice.

  • Delete the author's name in your theme

    Are you in need of removing the author’s name from blog posts? As always, blog posts are supposed to display the name of its author with other meta-data like category and date. Nonetheless, some owners of blogs just do not want to show the author’s name next to their blog posts. In this article, we are going to show you how to do that job.

  • How to insert some JavaScript to your theme

    Inserting JavaScript into your Shopify theme is a powerful way to enhance your store’s functionality and user experience. Whether you want to add custom features or integrate third-party tools, understanding how to properly insert JavaScript into your theme is crucial. This guide will walk you through the most effective methods for integrating JavaScript into your Shopify store, ensuring a smooth and efficient customization process.

  • How to modify your theme.liquid file

    Filter is an indispensable tool for any website to improve its customer journey. One of the easiest ways to let clients filter your collection is by editing your theme code. After checking your theme, the next thing you should do is to modify your theme.liquid.file. The tutorial will show you steps to change theme on desktop and iPhone/Android.

  • How to add the gift-wrapping snippet in your cart template

    Customers always love bonus gifts when they buy any products at your store. Gifts will make purchasers happier and feel that they are treated better at your shop than the other. Therefore, you might get more loyal customers. The tutorial will instruct you to include the gift-wrapping snippet in your cart template.

  • How to modify the shipping calculator HTML

    If you are selling products and your orders are beyond of free-shipping zone, customer’s bill has to include the shipping fee. Therefore, you want to install the shipping calculator. This tutorial will help you to modify the sipping calculator HTML.