About Theme
General Theme Requirements
- Layout must be responsive
- Contains a search box in the header or footer, and in search.liquid
- All RTE-generated content is consistent (h1-h5, blockquotes, ul, ol, etc.) across all templates
- Layout works in IE8+, Firefox, and Chrome
- Theme must have at least one demo shop
- Demo shops must use the latest version of the theme
index.liquid
- Includes a product grid of a collection that can be selected through Theme Settings
- (Optional) includes a collection grid of the shop's collections
page.liquid and 404.liquid
- A contact form template is included with the theme (http://docs.shopify.com/manual/configuration/store-customization/add-a-contact-form)
product.liquid
- When 1st variant is sold out, the whole product should not look sold out (see article).
- Prices and Compare At prices are shown and update correctly as you select
- Thumbnails grid does not break when product images have different aspect ratio
- Uses lightbox or large main image or zoom plugin
- One variant handled well (ex: dropdowns shouldnʼt be used for one variant)
- Whole product sold out handled well
- Multiple uses OptionSelector JS (see article)
- image.alt is used for product images
- Breadcrumb to provide a link back to the collection and/or NEXT and PREVIOUS links
- Social buttons for Twitter, Facebook, Pinterest, Google+ (optional)
- Social buttons for Twitter, Facebook, Pinterest, Google+ (optional)
- Include
collection.liquid
- Price variation is shown (i.e. "from $x to $y" when product.price_varies).
- A "Sale" tag or Compare At price is shown where appropriate
- Product titles cannot be truncated (i.e. Liquid filter "truncate" or "truncatewords" should not be used)
- Collection description is shown
- Product tags is output for filtering ()
- Intuitive UI for selecting/deselecting tags
- Layout does not break even with images with different aspect ratios
- Pagination works
cart.liquid
- Outputs additional checkout buttons using {{ content_for_additional_checkout_buttons }}
- Contains textarea for cart.note
- Update button properly updates quantities while retaining cart note
- Proper message is displayed when cart is empty
blog.liquid
- Blog tags are presented elegantly and can be used for filtering articles
- Blog excerpt used when there is one in blog.liquid (you can use {{ article.excerpt_or_content }})
- When blog is filtered with tag, must be clear which tag is being used to filter.
- Pagination works properly
- Blog atom feed subscribe link is visible on all blog pages
article.liquid
- Comments are paginated
- article.published_at is used (not article.created_at)
- Uses blog.previous_article and blog.next_article to navigate between blog articles
- Comments workflow works with and without moderation, and all success/error messages are properly output.
search.liquid
- Proper message when there are no search results
- Pagination works properly
list-collections.liquid
- 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
- Must have log in, log out, and register link in theme.
- All seven customer account templates are properly styled.
Theme settings
- Theme Settings should not be overwhelming nor tedious.
- The demo store should be easily reproduced using the theme settings (i.e. no custom modifications were made to the demo store.)
- Do not include a setting to remove “{{ powered_by_link }}”
- Logo upload must work with images of different aspect ratios (ex: landscape vs. portrait).
- Include a setting for uploading a custom background image.
- Include settings to set CSS background-position and background-color
- 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
- 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:
- Slideshow can be disabled without causing any Liquid/Javascript errors
- Each slide must have a checkbox to turn enable/disable.
- Exact dimensions suggested on theme settings page
- data-max-width used in settings.html
- Does not break when slides have unequal height
- Match between suggested size and data-max-width/data-max-height
- Slides can point somewhere and the links are editable
- Default links are to pages that exist by default in a new shop
Checkout pages
- Styled via a checkout.css file
- Uses same logo that is uploaded through Theme Settings
- Uses same background image that is uploaded through Theme Settings
SEO
- Theme must contain the code snippet for Title, Meta Description, Duplicate Content from the article.
- Heading tags are used in a way that makes sense for SEO
Recommendations
- Theme contains multiple presets (maximium of three)
- Uses matching link lists to create dropdowns in the Main Menu (see article).
- Uses tags for dropdowns for the Main Menu link list.