About Theme

General Theme Requirements

  1. Layout must be responsive
  2. Contains a search box in the header or footer, and in search.liquid
  3. All RTE-generated content is consistent (h1-h5, blockquotes, ul, ol, etc.) across all templates
  4. Layout works in IE8+, Firefox, and Chrome
  5. Theme must have at least one demo shop
  6. Demo shops must use the latest version of the theme

index.liquid

  1. Includes a product grid of a collection that can be selected through Theme Settings
  2. (Optional) includes a collection grid of the shop's collections

page.liquid and 404.liquid

  1. A contact form template is included with the theme (http://docs.shopify.com/manual/configuration/store-customization/add-a-contact-form)

product.liquid

  1. When 1st variant is sold out, the whole product should not look sold out (see article).
  2. Prices and Compare At prices are shown and update correctly as you select
  3. Thumbnails grid does not break when product images have different aspect ratio
  4. Uses lightbox or large main image or zoom plugin
  5. One variant handled well (ex: dropdowns shouldnʼt be used for one variant)
  6. Whole product sold out handled well
  7. Multiple uses OptionSelector JS (see article)
  8. image.alt is used for product images
  9. Breadcrumb to provide a link back to the collection and/or NEXT and PREVIOUS links
  10. Social buttons for Twitter, Facebook, Pinterest, Google+ (optional)
  11. Social buttons for Twitter, Facebook, Pinterest, Google+ (optional)
  12. Include

collection.liquid

  1. Price variation is shown (i.e. "from $x to $y" when product.price_varies).
  2. A "Sale" tag or Compare At price is shown where appropriate
  3. Product titles cannot be truncated (i.e. Liquid filter "truncate" or "truncatewords" should not be used)
  4. Collection description is shown
  5. Product tags is output for filtering ()
  6. Intuitive UI for selecting/deselecting tags
  7. Layout does not break even with images with different aspect ratios
  8. Pagination works

cart.liquid

  1. Outputs additional checkout buttons using {{ content_for_additional_checkout_buttons }}
  2. Contains textarea for cart.note
  3. Update button properly updates quantities while retaining cart note
  4. Proper message is displayed when cart is empty

blog.liquid

  1. Blog tags are presented elegantly and can be used for filtering articles
  2. Blog excerpt used when there is one in blog.liquid (you can use {{ article.excerpt_or_content }})
  3. When blog is filtered with tag, must be clear which tag is being used to filter.
  4. Pagination works properly
  5. Blog atom feed subscribe link is visible on all blog pages

article.liquid

  1. Comments are paginated
  2. article.published_at is used (not article.created_at)
  3. Uses blog.previous_article and blog.next_article to navigate between blog articles
  4. Comments workflow works with and without moderation, and all success/error messages are properly output.

search.liquid

  1. Proper message when there are no search results
  2. Pagination works properly

list-collections.liquid

  1. collection.image must be used as the collection thumbnails. If collection.image does not exist for a collection, use the thumbnail image of the first product in that collection.

Customer accounts

  1. Must have log in, log out, and register link in theme.
  2. All seven customer account templates are properly styled.

Theme settings

  1. Theme Settings should not be overwhelming nor tedious.
  2. The demo store should be easily reproduced using the theme settings (i.e. no custom modifications were made to the demo store.)
  3. Do not include a setting to remove “{{ powered_by_link }}”
  4. Logo upload must work with images of different aspect ratios (ex: landscape vs. portrait).
  5. Include a setting for uploading a custom background image.
  6. Include settings to set CSS background-position and background-color
  7. Include settings for social icons. Customers must be able to enter the URL of their social pages, and the URL must be applied to their respective icons
  8. Settings to change fonts for headings and regular text

Slideshow (Optional)

Having a slideshow in your theme is optional. If you do have a slideshow, your theme must meet the following requirements:

  1. Slideshow can be disabled without causing any Liquid/Javascript errors
  2. Each slide must have a checkbox to turn enable/disable.
  3. Exact dimensions suggested on theme settings page
  4. data-max-width used in settings.html
  5. Does not break when slides have unequal height
  6. Match between suggested size and data-max-width/data-max-height
  7. Slides can point somewhere and the links are editable
  8. Default links are to pages that exist by default in a new shop

Checkout pages

  1. Styled via a checkout.css file
  2. Uses same logo that is uploaded through Theme Settings
  3. Uses same background image that is uploaded through Theme Settings

SEO

  1. Theme must contain the code snippet for Title, Meta Description, Duplicate Content from the article.
  2. Heading tags are used in a way that makes sense for SEO

Recommendations

  1. Theme contains multiple presets (maximium of three)
  2. Uses matching link lists to create dropdowns in the Main Menu (see article).
  3. Uses tags for dropdowns for the Main Menu link list.