Build and customize themes faster with component-based Liquid examples
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.
Blogs posts are a standard element of most websites. This example outputs a list of blog posts associated with a specific blog. The Liquid and HTML needed to display article titles, featured images, article excerpts, article tags, authors, and dates are found in this component. Learn more about blog templates in the Shopify Help Center.
The blog article page is a dedicated page for an individual blog article, or post. It includes elements such as the article title, author, published date, content, and tags. In this example, the visibility of the article author and published date can be enabled or disabled from the theme editor.
Tags are a type of taxonomy, and are often used to reflect the keywords of a blog article. Tags also provide a means of navigation for customers browsing for similar blog posts. This component displays all the tags associated with a store, including the tags of articles that are not in the current pagination view.
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. Like all Shopify based navigations, it uses the linklist object.
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 a call-to-action button to be added to the home-page from the theme editor.
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.
The checkout form is what customers use to review their cart, remove any unwanted products, and proceed to checkout.
A collection list is a page that displays all the collections in a store. In this example, a featured image for the collection is displayed, as well as the collection name.
The collection page lists the products within a collection. There is a limit of 50 products per page, after which pagination will automatically occur. Learn more about the collection template file in the Shopify Help Center.
One of the biggest benefits of hosting a blog on an online store is that the audience can interact with merchants by commenting on blog posts. This code component will display the comments for a specific blog post.
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.
Customer account links allow customers to log into their existing account or to create a new account on a Shopify store. These links typically appear in the header area of a website.
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 the section, as well as turn on and off the visibility of the author info and publish date.
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.
A logo in the header of a website showcases the brand and usually also acts as a home navigation link. The purpose of wrapping with an h1 only on the homepage is to ensure a top-level heading is available on that page. Subsequent landing pages should feature a unique, visible h1 heading describing the page purpose, and therefore the logo only outputs an h1 on the homepage of a store.
This section allows merchants to display quotes or testimonials from previous customers on their home-page. 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 makes use of section blocks to add multiple quotes, up to a maximum of 8.
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. Note, this code example uses the placeholder_svg_tag Liquid filter to output an SVG illustration when no logo is present in a block. You can learn more about the placeholder_svg_tag Liquid filter in our Shopify Help Center.
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. A nested navigation uses the Shopify linklist object.
OG tags/Twitter card allows a developer to control what content renders in a preview when a link is shared on Facebook, Twitter, or other platforms. This example demonstrates the markup required to share that metadata on social media.
A 404 page appears when a website is active, but the specific page being requested within it doesn’t exist. This example demonstrates the markup required to output a “page not found” message, and includes a search field to help a customer find what they might be looking for.
Pagination is an ordered numbering of pages usually located at the top or bottom of a webpage. It enables 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 forloop.
Pagination is an ordered numbering of pages usually located at the top or bottom of a webpage. It enables users to navigate through a series of pages where content has been split up for design purposes, usability, faster loading, an so on. Note, this simplified example does not output a fully accessible pagination. For an accessible pagination, see the next Pagination example.
This section allows merchants to customize the content that appears on the password page. More info can be found on the Shopify Web Design and Development Blog..
The password form is added to the password.liquid template file, and adds password protection to your online store. The password page is displayed after setting a store-wide password within the store preferences section of the Shopify admin.
Payment icons show customers which payment methods are accepted by your online store. The icons are typically displayed in the footer of your website.
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.
A product limit sets a limit on the number of products rendered on a single page. This example demonstrates how to limit the number of products that show per collection page. Learn more about product limits in the Shopify Help Center.
Product metafields store and display additional product information that doesn't otherwise exist in the Shopify Admin. This example demonstrates how to add washing instructions to your products and display them on the product page. See more examples of how to use product metafields in the Shopify Help Center.
In order to load the image of a pre-selected product variant, the product.selected_or_first_available_variant.featured_image Liquid attribute must be referenced. This code example demonstrates how this object can be used on a product page.
The product variant selector is the HTML control which a user would interact with in order to select a product variant. Depending on the theme settings, the controls could be radio buttons or a select drop-down.
A recommended products section helps to drive conversions by making it easy for customers to continue shopping. Recommended products are often displayed at the bottom of the product page. This example features products within the same collection.
A recommended products section helps to drive conversions by making it easy for customers to continue shopping. Recommended products are often displayed at the bottom of the product page. This example features products with the same tag.
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.
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 single variant products.
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.
Social media navigation is a static menu linking to various social media accounts using icons. Please note that this example uses an iconic font to display the social media icons. We highly recommend that you use inline SVG icons, or a third party service to generate an SVG sprite map of icons to use via class name such as Icomoon or Fontastic
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 by that particular vendor.