All Tutorials

Liquid file requirements for themes

All Tutorials

Liquid file requirements for themes

Liquid file requirements for themes

If Shopify's Themes Team approves your theme designs for further development, then follow this checklist of template-level requirements. This is the same checklist that Shopify will use to review your theme.

This checklist can be printed or downloaded as a PDF file:

General theme requirements

  • The layout is responsive
  • All RTE-generated content is consistent (h1-h5, blockquotes, ul, ol, and so on) across all templates
  • The theme contains Open Graph and Twitter Card tags
  • Assets link using protocol-independent URLs
  • The theme must include powered_by_link without any redirects, and it cannot provide a setting to remove powered_by_link. The powered_by_link cannot be altered and must contain only powered_by_link
  • Any link in the code that points to one of Shopify's domains must include a rel="nofollow" attribute
  • There cannot be any affiliate links in the theme files
  • There cannot be any designer credits (such as a link to a theme developer's website) in the theme files
  • The theme supports variant images
  • The theme supports internationalization

Checkout pages

  • The theme is not styled through the checkout.scss.liquid file

Search engine optimization

  • The theme contains the code snippet for Title, Meta Description, and Duplicate Content from the SEO for Theme Designers article
  • Heading tags are used in a way that makes sense for SEO

Accessibility

  • Images have alt text
  • Form inputs have labels with for attributes, including form labels in the theme settings
  • Short forms include aria-label attributes
  • The theme is built with valid HTML (You can check for valid HTML using the W3C Markup Validator)
  • All parts of the theme's pages are accessible with a keyboard, including drop-down navigation
  • The theme has been tested for colour contrast. The color contrast ratio should be as close to 4.5 as possible

Recommendations

Section requirements

  • The theme uses the new format for theme_info
  • All sections include a name in their schema
  • The schema Liquid tag of each section is at the bottom of the file
  • If a section or block has a title or header setting, then that setting's ID should be title
  • If a section or block has a title or header setting, then the name of the section updates when a merchant changes the title
  • The theme uses the image_picker setting type instead of image
  • The theme includes a link_list to select main and footer menus
  • Template-specific settings only appear in sections
  • Customer template settings do not appear in sections
  • All sections function properly when the section file is duplicated or renamed
  • All JavaScript and CSS for sections is stored in theme assets (javascript and stylesheet Liquid tags are not used)

JavaScript

  • All JavaScript for sections and blocks functions properly in the theme editor
  • Section and block JavaScript is initialized on page load
  • JavaScript for sections and blocks is initialized when the section or block is added, or when a setting is changed that reloads the section or block
  • Event handlers and unneeded JavaScript are removed when a section or block is removed
  • If a block is selected, it's content is made visible in the theme editor (The theme editor is responsible for vertically scrolling sections and blocks)
  • JavaScript for sections and blocks does not use the data-theme-editor-* attributes

Template file requirements

index.liquid

The index.liquid template of your theme meets the following conditions:

  • The theme can feature a product collection in a grid or list view, selected through the theme editor
  • The theme can feature a specific Page, Collection, or Blog, selected through the theme editor
  • Promotional/marketing images can be uploaded through the theme editor
  • If the home page has a slideshow, then the slideshow can be disabled without causing any Liquid or Javascript errors
  • If the home page has a slideshow, then each slide can be individually enabled or disabled
  • If the home page has a slideshow, then recommended dimensions for the slides can be found inside the theme editor
  • The data-max-width data attribute is used for each slide input in the theme editor
  • The layout does not break when slides are a different height
  • The slides can point to a page, and the links are editable through the theme editor

product.liquid

The product.liquid template of your theme meets the following conditions:

Product information

  • The product has a non-truncated title
  • The product has a price
  • The product has a description

Product images

  • The featured product image is prominent
  • Secondary product images having different image size ratios does not break the layout
  • Secondary product images can be enlarged with a lightbox or zooming
  • Variant images are shown when the associated variant is selected

Buying functions

  • The theme includes drop-down menus for options and variants
  • The theme includes an Add to cart button
  • The Add to cart button becomes disabled or is replaced when a sold out variant is selected

Other

  • The theme includes social buttons for Twitter, Facebook, Pinterest, and Google+

  • Product options are used to split multiple options into multiple drop-down menus

    • A callback function is used to update the price, compare at price, and sold out messages of the currently-selected variant
    • The first available variant is selected on page load

  • image.alt is output for all product images

  • The theme includes Google's rich product snippets

collection.liquid

The collection.liquid template of your theme meets the following conditions:

  • Attributes of the collection variable are output properly, including:

    • collection.title (not truncated)
    • collection.description
    • collection.image

  • Products are listed in a grid or list, with the following attributes of the product variable output:

    • product.title (linked to product.url, not truncated)
    • product.price
    • product.image

  • The product grid does not break, even with product images of varying aspect ratios

  • Sale badges and product.compare_at_price_max are shown when appropriate

  • Drop-down menus or links are available for filtering a collection by product tags

  • A message is displayed if a collection has no products in it

  • If a product has variants with different prices, product.price_varies is used to show price variation (for example, from product.price_min to product.price_max)

  • Proper pagination is used

cart.liquid

Both the cart.liquid template and any cart implementations supported by AJAX must meet the following conditions:

Cart line items

The cart must display the following attributes of the line_item object:

  • line_item.title, or both the line_item.product.title and line_item.options_with_values
  • line_item.selling_plan_allocation.selling_plan.name when a line_item.selling_plan_allocation is present
  • line_item.image
  • line_item.quantity
  • line_item.final_price
  • line_item.final_line_price

Cart line item discounts

When line_item.discount_allocations are prsent, the following conditions must be met:

  • The line item discount title and the line item discount amount are displayed with the line item
  • The line_item.original_price and line_item.original_line_price are displayed

Cart totals

Cart-level discounts

When cart.cart_level_discount_applications are prsent, the following conditions must be met:

  • The cart-level discount title and cart-level discount amount are displayed before the cart total price
  • The cart.original_total_price price is displayed before the cart level discounts

Cart interactions

  • It is possible to update the quantity of a line item
  • It is possible to remove a line item
  • There is a checkout button that submits the cart form

blog.liquid

The blog.liquid template of your theme meets the following conditions:

  • blog.title is shown clearly
  • blog.tags is listed and can be used to filter the blog
  • If a tag is being used as a filter, it is clearly indicated
  • article.excerpt_or_content (over article.content)
  • Pagination works properly

Each article displays the following information:

  • article.date
  • article.author
  • article.tags
  • article.comments
  • article.image
    • output on blog.liquid, or article.liquid, or both
    • used in Open Graph, Twitter Cards, and Pinterest share buttons where applicable
  • A link to the blog's RSS feed

article.liquid

The article.liquid template of your theme meets the following conditions:

article displays the following information:

  • article.date
  • article.author
  • article.tags
  • article.comments

  • article.image (used in blog.liquid and/or article.liquid)

    • output on blog.liquid, or article.liquid, or both
    • used in Open Graph, Twitter Cards, and Pinterest share buttons where applicable

  • Links to navigate to the next or previous article, using blog.previous_article and blog.next_article

  • Comments are paginated

  • article.published_at is used (not article.created_at)

  • Comments workflow works with and without moderation, and all success/error messages are properly output

page.liquid

The page.liquid template of your theme meets the following conditions:

  • Styling of RTE content is consistent with those of blog articles, product descriptions, and collection descriptions
  • The theme includes an alternate template for a contact form

list-collections.liquid

The list-collections.liquid template of your theme meets the following condition:

  • If a collection image does not exist, the featured image of the first product in that collection loads instead

search.liquid

The search.liquid template of your theme meets the following conditions:

  • Search results are paginated properly
  • If there are no search results, article.image should be output in search results, using [object_type](/docs/themes/liquid/reference/objects/search) if applicable

404.liquid

The 404.liquid template of your theme meets the following conditions:

  • There is a clear message stating that the page was not found
  • Options on how to proceed are outlined

gift-card.liquid

The gift_card.liquid template of your theme meets the following conditions:

customers/account.liquid

The customers/account.liquid template of your theme meets the following conditions:

  • The customer's recent orders are displayed
  • The customer's default address is displayed
  • A link to the address page is included
  • Customer orders are paginated

customers/activate_account.liquid

The customers/activate_account.liquid template of your theme meets the following conditions:

  • The activate account form submits properly
  • The error messages are output properly

customers/addresses.liquid

The customers/addresses.liquid template of your theme meets the following conditions:

  • Customer addresses are paginated
  • Customers can create new addresses
  • Customers can delete and edit existing addresses
  • Error messages are output properly

customers/login.liquid

The customers/login.liquid template of your theme meets the following conditions:

  • The password recovery form is included

customers/order.liquid

The customers/order.liquid template of your theme meets the following conditions:

  • Both the billing and shipping addresses of the order are shown

  • A table that lists the line_items of the order is included. The table should show:

    • line_item.title
    • line_item.selling_plan_allocation.selling_plan.name when a line_item.selling_plan_allocation is present
    • line_item.price
    • line_item.line_price
    • The subtotal of the order
    • Any discounts applied to the order
    • The total amount of the order

customers/register.liquid

The customers/register.liquid template of your theme meets the following condition:

  • Error messages are output properly

customers/reset_password.liquid

The customers/reset_password.liquid template of your theme meets the following condition:

  • Error messages are output properly

password.liquid

The password.liquid template of your theme meets the following conditions:

  • Error messages are output properly
  • The store's logo or name, if the logo has been disabled in the theme editor, the store's name
  • All of the content has been internationalized
  • A password login form and an admin login link are included (see the default password.liquid template)
  • Password message text is included, which merchants can set via the Message for your visitors field in the admin
  • A customer sign-up form with prospect and password page tags is included (Shopify will assist you in marketing to the customers created with these tags)
  • A footer that reads This shop will be powered by Shopify (where the word Shopify links to www.shopify.com) is included. The link must include a rel="nofollow" attribute.
  • Optional: social sharing links are included, for which the shared URL is the store home page URL, not the password page
  • Optional: a background image with name password-page-background.jpg is included

settings_schema.json

The settings_schema.json file of your theme, which controls the customization options available to merchants in the theme editor, meets the following conditions:

  • Theme customizations in the theme editor are neither overwhelming nor tedious
  • The file does not include a setting to remove the powered_by_link
  • The logo upload works with images of different aspect ratios (for example, landscape or portrait)
  • The logo image is named logo.png
  • Settings for social icons are included
    • Customers are able to enter the URL of their social pages, and the URLs are then applied to the appropriate icons
  • Settings to change fonts for headings and regular text are included
  • All type: 'image' settings have an id that ends with .jpg, .png, .gif, or .ico
  • All settings have a label
  • A theme_info section is included, in which a logo is optional
  • All theme settings adhere to the content requirements outlined here

theme.liquid (layout file)

The theme.liquid template of your theme meets the following conditions:

  • The logo or shop.name is in the header and links to the home page
  • The main navigation is present and uses the default 'Main Menu' menu
  • The main navigation has active and hover styles defined as necessary
  • The main navigation has focus states
  • Footer navigation is present and uses the default 'Footer' menu
  • Uses matching menus to create drop-down menus in the 'Main Menu'
  • Log in and Register links for Customer Accounts are present
  • If a customer is logged in, the Log in link points to the customer account page
  • A search box or link to the search page is included in the header or footer
  • Logos for methods of payment are displayed, using the shop.enabled_payment_types variable
  • Social icons are included in the header or footer
  • Proper SEO code is dynamically output for the title, meta description, duplicate content, and so on (see SEO for theme designers for example snippets)
  • The doctype is present at the top of the file, specifying whether it's transitional or strict (for example, <!DOCTYPE html>)

Demo stores

All themes that appear in the Shopify Theme Store include at least one demo store that showcases the theme's style and features. If your theme is approved for further development by Shopify's Themes Team, then you can follow this checklist of demo store requirements.