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 removepowered_by_link
. Thepowered_by_link
cannot be altered and must contain onlypowered_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
- The theme contains multiple presets (to a maximum of three)
- The theme can sort products inside collections
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 ofimage
- 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
andstylesheet
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
- product.liquid
- collection.liquid
- cart.liquid
- blog.liquid
- article.liquid
- page.liquid
- list_collections.liquid
- search.liquid
- 404.liquid
- gift_card.liquid
- customers/account.liquid
- customers/activate.liquid
- customers/addresses.liquid
- customers/login.liquid
- customers/order.liquid
- customers/register.liquid
- customers/reset_password.liquid
- password.liquid
- settings_schema.json
- theme.liquid (layout file)
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 toproduct.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 appropriateDrop-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, fromproduct.price_min
toproduct.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 theline_item.product.title
andline_item.options_with_values
line_item.selling_plan_allocation.selling_plan.name
when aline_item.selling_plan_allocation
is presentline_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
andline_item.original_line_price
are displayed
Cart totals
- The cart.total_price must be visible
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
(overarticle.content
)- Pagination works properly
Each article displays the following information:
article.date
article.author
article.tags
article.comments
article.image
- output on
blog.liquid
, orarticle.liquid
, or both - used in Open Graph, Twitter Cards, and Pinterest share buttons where applicable
- output on
- 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
, orarticle.liquid
, or both - used in Open Graph, Twitter Cards, and Pinterest share buttons where applicable
- output on
Links to navigate to the next or previous article, using
blog.previous_article
andblog.next_article
Comments are paginated
article.published_at
is used (notarticle.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:
- Translations are supported
- Apple Wallet is supported
- A QR code is shown, and is sized at 120 x 120px
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 aline_item.selling_plan_allocation
is presentline_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
andpassword 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 arel="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 anid
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.