Shopify Liquid code examples
Filters
Examples
Accessible pagination
Pagination is an ordered numbering of pages usually located at the top or bottom of a webpage. These ordered page numbers enable users to navigate through a series of pages where content has been split up for design purposes, usability, faster loading, and so on. Splitting products, blog articles, and search results across multiple pages is a necessary part of theme design, as you are limited to 50 results per page in any
navigationforloop.Announcement Bar
An announcement bar allows merchants to display custom updates and promote discounts. When added to a theme, this static section can be displayed on the homepage or on all pages, and can be configured from the theme editor.
sectionsBlog article list
This code displays a list of blog posts, or blog articles associated with a specific blog. This component contains the Liquid and HTML needed to display article titles, featured images, article excerpts, article tags, authors, and dates.
blogBlog article page
The blog article page displays the content of an individual blog article. This component contains the Liquid and HTML needed to display article title, author, published date, content, and tags. In this case, the visibility of the article author and published date can be enabled or disabled from the theme editor.
blogBlog tag listing
Blog tags are a type of taxonomy, or labelling system, and are often used to list the keywords of a blog article. Blog tags also provide a means of navigation for customers browsing for similar blog posts. This component displays all the tags that exist on the current blog.
blogBreadcrumb navigation
A breadcrumb navigation, also known as breadcrumbs, can reduce the number of actions a visitor needs to take in order to navigate to a higher-level page, and improve the discoverability of a website’s sections and pages.
navigationCall to Action
Call-to-action buttons allow merchants to drive visitor engagement to specific products, or carry out a specific activity such as creating an account or accessing content. This section will allow merchants to optionally add a call-to-action (CTA) button to the homepage using the theme editor.
sectionsCart notes
You can add a text area to the cart page that allows customers to share special instructions for their order. Cart notes are submitted with a customer's order, and will appear on their order page in the Shopify admin. This code will display the user’s instructions in a textarea element.
cartCheckout form
The checkout form is what customers use to review their cart, remove any unwanted products, and proceed to checkout. This code example includes product thumbnails, as well as remove, checkout and continue shopping buttons.
cartCollection list
A collection list is a page that displays all the collections in a store. In this example, the collection name will be displayed, as well as a featured image for the collection, if one has been uploaded. By default, the
collectionslist-collections.liquidfile will output the collections in alphabetical order.Collection page
The collection page lists all the products within a collection. This example includes product images with product titles, prices, and vendors, as well as a title and description for the collection as a whole. There is a limit of 50 products per page, after which pagination will automatically occur.
collectionsComment list
Commenting on blogs is an optional setting which can be enabled from the main Shopify admin. This code component will display a list of blog comments for a specific post or article.
blogCopyright text
Copyright text is typically displayed in the footer section of an online store, and provides a clear indication of a copyright symbol, the year of creation and author of the content. This example includes the copyright symbol, the current year, your store name, and a "Powered by Shopify" link.
globalCustomer account links
Customer account links allow customers to log into their existing account or to create a new customer account on a Shopify store. These links typically appear in the header area of a website.
globalCustomer login
A customer login form is used by visitors to log in to their customer account page. This form is added to the customer login page template and demonstrates the markup required. The form includes an email and password field, a button to submit the form, and links to create a new customer account and recover a forgotten password. If the store lets customers check out without creating an account, it also renders a “Continue as guest” button.
globalData powered product recommendations
The recommendations Liquid object provides merchants with the ability to surface data-powered product recommendations on their product pages. This static section can be added to product pages, to display product recommendations based on data from sales, product descriptions, and relations between products and collections.
productsFeatured blog posts
Merchants will often want to display previews of recent blog articles on their homepage. This featured blog posts section allows merchants to choose how many articles appear in this dynamic section, as well as turn on and off the visibility of the author info and publish date.
blogFeatured text
This dynamic section will create an option for featured text on a store’s homepage. This allows merchants to add their own custom content or messaging in any position on the page.
sectionsHeader logo
A logo in the header of a website showcases the brand and usually also acts as a home navigation link. In this example, the store logo should be saved as an image file, ideally an SVG, in the
globalAssetsdirectory of your theme.Homepage quotes
Quotes or testimonials are important because they allow merchants to build trust with customers by displaying positive messages from previous customers or brand supporters. This dynamic section allows merchants to display quotes or testimonials from previous customers on their homepage. This example makes use of section blocks to add multiple quotes, up to a maximum of 8.
sectionsLogo list
The logo list allows merchants to upload images of logos to display company sponsors or brands they have worked with and websites they have been featured on. This dynamic section can be positioned anywhere on the homepage.
sectionsNested navigation
A nested navigation or nested menu is a popular solution for effectively organizing collections, products, and pages. This example will output a nested menu of links in an unordered list up to three levels deep, all of which can be easily updated using the Shopify Admin.
navigationOpen Graph tags
Open Graph tags/Twitter cards allow developers to control the appearance of previews when a link is shared on Facebook, Twitter, or other social media and instant messaging platforms. This example demonstrates the markup required to render OG metadata on social media.
globalPage not found (404)
A 404 page occurs when a website is active, but the specific page being requested doesn’t exist. This example demonstrates the markup required to show a “page not found” message. It also includes a search field to help the customer find what they might be looking for.
globalPassword content
This section allows merchants to customize the content that appears on the password page. This static section can be added to the password template file and merchants can customize its content from the theme editor.
sectionsPassword form
The password page is a landing page that adds password protection to your online store. Password pages are also sometimes used to collect email addresses before a store opens. This page is displayed after setting a store-wide password within the store preferences section of the Shopify admin.
globalPayment icons
Payment icons show customers which payment methods are accepted by your online store. The icons are typically displayed in the footer of your website.
globalPreselected variant image
Deep-linking can be used to pre-select a specific variant on a product page. In order to load the image of a deep-linked product, the
productsproduct.selected_or_first_available_variant.featured_imageLiquid attribute must be referenced. This example demonstrates how this object can be used on a product page.Previous and next article buttons
Merchants may want to add an extra layer of navigation to blog posts. Previous and next article buttons allow for an easy way to navigate to additional articles within the same blog.
blogPrice Range
Displaying a product's minimum and maximum prices on collection pages allows merchants to represent the range of variants available. With the help of control-flow Liquid tags, this code example will only output the minimum and maximum variant price values when the
collectionscollectiontemplate is being viewed.Product limit
A product limit allows you to specify the maximum number of products rendered on a single collection page. This example demonstrates how to use paginate tags to limit the number of products that show on each page of the collection.
collectionsProduct metafields
Product metafields store and display additional product information that doesn't otherwise exist in the Shopify Admin. Metafields are commonly used for storing specialized information, such as part numbers, customer titles, or blog post summaries. This example demonstrates how to add washing instructions to your products and display them on the product page.
productsProduct variant selector
The product variant selector is the HTML control that a user would interact with in order to select a product variant on a product page. Depending on the theme settings, the controls could be radio buttons or a select drop-down.
productsShow product SKU
Stock keeping units (SKUs) are used to identify products and track inventory. You can display the unique SKU for a product and its variants on the product page.
productsSimple pagination
Pagination is an ordered numbering of pages usually located at the top or bottom of a webpage. This simplified pagination example demonstrates how navigation is built within paginate tags. For a more comprehensive solution, that breaks down pagination into customizable parts, see the Accessible pagination code example.
navigationSingle variant product
The product page is a detailed page for an individual product. It includes information such as the product title, description, price, vendor, variants, and images, along with a dynamic checkout button and an add to cart button. This product page is for products with only a single variant.
productsSkip link
Skip links, also known as skip navigation links, are intended to make it easier for users navigating with a keyboard to skip over the main navigation and header elements of a site. It can be frustrating for users to have to repeatedly tab through navigation links to get to the main content of a page. Skip links solve this problem.
globalSocial media navigation
Social media navigation is a static menu linking to various social media accounts using icons. These linked social media icons, or buttons, are usually located at the top or bottom of a webpage.
navigationTag based product recommendations
A recommended products section helps to drive sales by making it easy for customers to promote a curated list of products to customers as they browse. Recommended products are often displayed at the bottom of the product page. This example features products with the same tag.
productsVendor link list
A vendor is usually the manufacturer, wholesaler, or creator of a product. This example creates a list of all the vendors for a store. Each vendor name links to a collection page that is filtered to show products made by that particular vendor.
collections