• 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 today is used in a lot of online agents. Email marketing is an effective tool to get customers’ attention or get buyers engaged in products that you are selling. The tutorial will help you display customizations in email templates in Shopify.

  • 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.

  • Optimize SEO on Jekyll Site

    You may now know the important role that SEO actually plays. However, to help you deeply understand how SEO really works and what you could do to attract more traffic, this instructional writing on how to optimize SEO on Jekyll site will be a great help for your website.

  • Set a Date in Any Format

    As you are merchant, you might think that formatting dates can become tricky if you require a specific format. However, now, you should not be worried about that since in this article, you will be shown how to set a date in any format.

  • Use Disqus for Comments

    You can build more trust and popularity for your posts and your website as a whole by using Disqus for comments, a very effective hosted commenting system to add and display comments in your Jekyll site. It supports all available devices, including desktop, mobile, Google AMP. Moreover, there are more than 70 languages are supported. With Disqus, all functions such as upvotes, downvotes, recommends, threaded replies, and so on will be as fully-equipped as possible. Do not be worried that it could affect the look of your site because it will definitely adapt to your site’s design and colors (of course you are able to reset the colors at any time).

  • 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.

  • Gain the most performance from your Jekyll site

    Are you looking for a productive search platform working on your Jekyll site? Then here we introduce to you Algolia, an advanced search platform which could build, personalize and optimize search and also find out experiences for your users. Algolia Search is able to support multiple platforms and devices with its performant APIs and easy-to-use documentation. More than five thousand businesses are employing this tool to power their search already.

  • 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.

  • Insert Jekyll plugins to your site

    You are now able to write or download Ruby code to extend Jekyll with Jekyll plugins so that it can be more useful and help you do whatever you need.

  • 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.

  • Assign the template to a product

    Pre-order is nowadays considered a more and more popular promotion program. In fact, there are a lot of ways to enable pre-orders for your products. But do you know which one should be the best choice for you? If you are reading this article, we assume that you are interested in this topic so please keep reading our instructional writing on How to assign the template to a product to know more deeply about this method.

  • 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.

  • Track inventory levels

    If you are a beginner or wondering what is inventory and how to track your inventory then we will help you find out the answers.

  • 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

    You are owning an online store and each product has a lot of varied types, sizes or colors. You now would like to bring comfort to customers while they are shopping, hence options for buyers should become more automatic to match the first choice. As a result, this tutorial will give you the instruction of how to add linked options to your themes.

  • 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

    Online buying always needs to be updated for buyers so that they can know about which products are in stock or not. With a view to bringing better customer experience, this article would instruct you how to disable sold-out variants for non-sectioned themes.

  • Display a featured image on a product page by editing your theme code for non-sectioned themes

    When a customer comes to a product page on your online store website, the first available variant is always selected by default, and the image for that variant is displayed instead of the featured image. In case you have a featured image that you would love to show instead of that first available variant image, then you are able to use this customization to disable the auto-selecting of the first available variant. As a result, the customer will be prompted to manually select a variant before one is displayed.

  • Generate a size chart page

    If you are running an online clothing store then it is necessary to let your customers know their size before they make a purchase. For that reason, Size chart was designed as a size guide for everyone visiting your store. According to that size instruction, which is organized and listed obviously, customers are able to make comparisons and choose the right item for them.

  • Include swatch.liquid in product.liquid

    We have looked at so many concepts that relate to the way Liquid work in Shopify themes. In this detailed instruction, we would like to go more into details about a specific template, which is called product.liquid.

  • Insert a quantity selector by editing your theme code for sectioned themes

    For customers, adding a number of quantities of an item at once is very essential and convenient to add them to cart immediately without being back to the product page and re-adding it to cart. As a online store runner, now you are able to help them by adding a quantity selector to product pages. It will enable your customers to add several items to their cart at once just like this:

  • Insert the size chart to your theme

    Size chart is a chart that includes sizing information. According to the given information, your customers can actively pick the cloth that they think it could fit them perfectly. If you are running an online clothing store then size chart should be a must-have feature for yours.

  • Insert a 'Sort by' menu to collection pages

    Sort by menu is considered very important for any e-commerce store because of its convenience. It could be a smart feature that helps customer sort out all of the available products may be by their prices (from low to high, or from high to low) or by date, by sellers, and by the first alphabet of their names. You can now allow your customers to change the default order of the products by including a Sort by drop-down menu right on your collection pages. However, please keep reading our instructional writing on How to insert a Sort by menu to collection pages to know more deeply about this topic.

  • 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:

  • Generate a code snippet for the gift-wrap option

    Gifts, which are wrapped in a poor way, are such a common fear for every e-commerce business runner. As a customer, you may know that people always held an interest in the gift that they have carefully chosen. Therefore, they may want it to be covered by eye-catching gift wrapping. The fact is that the wrapping can also create a sense of mystery and fun, a wonderful and surprise element for any occasion or holiday. That is the reason why you should go with a stellar gift wrapping service.

  • Generate a contact page

    In order to allow your customers to always keep in touch with you, you can insert a contact page to your store. The fact is that all Shopify themes do have a built-in contact form that you are able to apply to the pages that you create.

  • Insert a Continue shopping link to your cart page

    It is common nowadays that you can see a Continue shopping button on every online store so what is the meaning of this button?

  • Insert a form field to your theme code

    Cart attributes are known as custom form fields that can allow you to collect additional information from your customers on the cart page. The data that you collect will be shown in a note on the order of the customer in the admin. For instance, in case you want to give your customers permission to indicate whether they would like their order to be gift-wrapped, you are able to add an I want my order gift-wrapped checkbox to the cart:

  • Insert custom fields to your theme's contact form

    Contact Form is known as a feature that can allow visitors (newbies to a website) to immediately contact and engage with the owner of that website. The customizations for the Contact Form are not limited whether you want basic information or a even more in depth respnse.

  • 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

    Do you know that the number of products which are displayed on your collection pages can easily be changed not only by making changes to your theme settings in the theme editor but also by editing the codes contained by your theme? The fact is that as long as you do not exceed Shopify’s limit of 50 items per page, you are allowed to show any number of products you want.

  • Update item quantity fields in the cart

    Your online store is wanting to bring the convenience to buyers by upgrading some functions which allow the customer journey to be increased. Buyers can acknowledge about the number of items that they put into their cart, hence estimate the payment. The tutorial will give you the instruction to update item quantity fields in the cart.

  • Apply a class to your templates

    Every image on each page being opened in a lightbox is not a thing that is within your expectation? Particularly, photos which are hyperlinks, should be skipped but you still want your users to be capable of clicking on those photos to be directed to another web page. On top of that, in case the original uploaded images have the same size as the image, which is displayed on the page, you may want to leave that image alone and not let it opened in a lightbox. In fact, there are 2 ways for you to implement the customization: to apply a class to your templates or to add your jQuery.

  • Edit correct quantities on the cart page silently

    Shopify allows you to modify the quantities on the cart page to the value your customer would love regardless of if that item is available. The fact is that customers may still get what they asked for (not what they can afford and ready to purchase) even when clicking on the Update button. On top of that, it is only subsequently during checkout process that your customers get your reality check as to what’s available.

  • Generate a back-to-the-top snippet

    The rise in responsive web design’s popularity has caused a proliferation of single column and long-page designs on not only mobile but also desktop. One of those designs must be the Back to Top button, which is a shortcut that enables your customers to immediately navigate to the top of the page just in seconds.

  • Generate and include an age-check snippet

    Discouraging visitors, who are under a certain age from browsing your store website is considered very necessary and reasonable in case the products you are selling include wine, cigarettes, or dangerous goods. To do this, you can actively add an age verification form to your storefront. Please keep in mind that this method doesn’t meet the age-verification requirements which are associated with recent FDA regulations that govern the sale of cigars, tobacco products, and e-cigarettes.

  • generate the How did you hear about us form field

    Are you wondering about the ways that your customers know and approach your store? The fact is that you completely have the right to ask them how they did hear about your online shop only by generating a How did you hear about us? form field to the cart page. However, please keep reading our instructional writing on How to generate the How did you hear about us? form field to know more deeply about one this topic.

  • Generate your snippet

    Twitter Cards is considered a useful tool for every online store runner because it can make it possible to attach media experiences to Tweets which are linked to the content of your store. Let your visitors, who tweet about your blog posts and products, have an attractive “card” added to their Tweet, which can be visible to all of their followers, now only by adding a snippet to your theme.

  • Get consent for promotional emails during customer registration

    Do you know that as an online store administrator, you are completely able to insert a checkbox to your customer account creation form, which can allow the customers to indicate whether they want to subscribe to newsletters, promotional emails, or any other marketing material from your brand? Actually, you can let your customers consent to promotional emails not only when they sign up but also during the checkout process.

  • Insert breadcrumb navigation to your store

    Breadcrumbs, also known as breadcrumb trail, is a 2nd navigation system which can display any user’s location on website or web app. The fact is that the term itself came from a fairy tale called Hansel and Gretel, in which the 2 main characters did create a trail of breadcrumbs so that they could track back to their house. However, please keep reading our instructional writing on How to insert breadcrumb navigation to your store to know more deeply about one this topic.

  • Insert Disqus to your blog

    Are you looking for material on Disqus? Do you know why Disqus is considered important to all Shopify store owners? Let’s find it out with us today! Please keep reading our instructional writing on How to insert Disqus to your blog to know more deeply about one this topic.

  • 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

    There is the fact that Shopify themes, which are free of charge, all do include the option to display payment icons in the footer. Those icons displayed are determined by the payment settings of your store, and able to be enabled in the theme editor. In case you want to add or delete payment icons while not changing your payment settings, then you are allowed to do so by modifying your theme code.

  • 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

    Are you looking for a solution to supporting dynamic checkout buttons? Then here may we know the information you need. The fact is that you are able to keep the product form updated on the product page. In case your theme has a home page featured product section, you are allowed to have the product form be up-to-date in that template as well.

  • 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

    Now, let’s take a look at our instructional writing on Liquid Variables: assign, capture, increment, increment to know more deeply about this topic.

  • How to hide sold out variants for nonsectioned themes

    Online buying always needs to be updated for buyers so that they can know about which products are in stock or not. With a view to bringing better customer experience, this article would instruct you how to hide sold-out variants for non-sectioned 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.

  • Generate a currencies snippet

    What is a snippet?

  • 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. Now, let’s take a look at our instructional writing on How to delete the author’s name in your theme to know more deeply about this topic.

  • How to insert some JavaScript to your theme

    Shopify gives you permission to quickly add new features and functionalities to your web without having to redesign your whole theme. You are able to add the functionality by inserting plugins and in case the functionality that you would like to add is not large enough to generate a plugin, which comprises just several lines of code, you are able to employ the functions.php file rather than generating a separate plugin. The best thing about the functions.php file is that it can act like a plugin, which can be employed to insert many features and extend the functionality of not only the theme but also Shopify installation.

  • 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.