Theme store requirements
Use the following lists of requirements when creating your theme.
All themes must meet all of the following requirements to be published on the Shopify Theme Store. If your theme is missing any of the requirements in this list, then your submission will be rejected and you will need to make further changes to your theme before it can be resubmitted. To reduce your chance of rejection, you should also test your theme thoroughly.
Themes must be thoroughly tested before submission to ensure functionality and quality. Themes that haven't been tested thoroughly enough will be rejected without further review, and repeat offences may result in a suspension and/or permanent rejection.
Learn about the theme review process and how to submit your theme to the Shopify Theme Store.
1. Theme Store exclusivity
Anchor link to section titled "1. Theme Store exclusivity"Themes on the Theme Store must be exclusive to the Theme Store and can't contain external marketing material, so merchants can continue to benefit from the highest quality themes and the newest features.
All themes must meet the following exclusivity requirements:
Themes listed on the Shopify Theme Store can only be distributed through the Shopify Theme Store. Themes on the Theme Store must not be distributed on other marketplaces.
Themes on the Shopify Theme Store can't contain designer credits, such as a link to a theme developer's website, or any affiliate links in the theme files.
2. Uniqueness from other themes
Anchor link to section titled "2. Uniqueness from other themes"If you're building a theme based on our reference theme, Dawn, or based on one of your own themes that's already listed in the Shopify Theme Store, then your theme needs to be substantively different. You must make meaningful changes and innovations to the design and functionality of the theme. Below are some cues that we look for:
Your codebase must have meaningful differences when contrasted with code from other themes.
The identity of your theme submission should be unique.
Your theme should have a clear industry focus.
Your theme should have an inventive art direction that distinguishes it from other themes.
Your theme should have a cohesive look and feel across all templates (for example, the index page, product and collection pages, blogs, search, and the cart).
Your theme should offer unique customization options or functionality that distinguish it from other themes.
A merchant shouldn't be able to purchase your theme and another theme that's listed in the Shopify Theme Store, and then customize the settings so that the themes are almost identical to each other.
3. Features
Anchor link to section titled "3. Features"Feature-rich themes support the varied needs of merchants, and enable each merchant to use a theme in a way that fits their business.
All themes must support the following features:
Sections Everywhere - Refer to Templates, sections, and blocks to ensure compatibility with Online Store 2.0.
Learn more about migrating a theme to OS 2.0.
Discounts - Display discount amounts for individual items and for entire orders in the cart, checkout, and order templates. Discounts must be supported on the Cart page.
Learn more about discounts.
Dynamic checkout buttons - Include Dynamic checkout buttons and Accelerated checkout buttons so that customers can checkout quickly.
Dynamic checkout buttons must be supported on the following pages:
- Product page
- Cart page
The branded dynamic and accelerator checkout button colors must not be modified.
Learn more about dynamic checkout and accelerated checkouts.
Faceted search filtering - Use search filtering so that customers can filter on collection and search pages based on product availability, price, type, vendor, and variant options. You need to support faceted search filtering on collection pages and search pages.
Gift cards - Include a gift card template that renders the gift card page, which displays the gift card that's issued to a customer upon purchase.
Learn more about gift cards.
Image focal points - Make sure that your theme supports the focal point of an image. Focal points can be set in the theme editor image_picker
setting, or from the Files page in the Shopify admin.
Images for social sharing - Add a page_image
object for social sharing so that merchants can display a thumbnail image in their post when they share a link to their online store on social media, such as on Facebook or Pinterest.
Learn more about social media images.
Country selection - When merchants sell to other countries and regions in their local currency customers must be able to select their currency and their country or region on the storefront. Selectors must follow the UX guidelines.
Learn more about selling in multiple currencies.
Language selection - When merchants sell in multiple languages, customers must be able to select their preferred language on the storefront. Selectors must follow the UX guidelines.
Learn more about selling in multiple languages.
Multi-level menus - Add nested menus so that merchants can create multi-level drop down menus.
Learn more about setting up drop down menus.
Newsletter forms - Add a newsletter signup so that merchants can collect customer email addresses to use in email marketing campaigns.
Learn more about newsletter signups.
Pickup availability - Add pickup availability to product pages so that merchants can display whether a product is available for local pickup without having to add the product to cart. Pickup availability must be supported on the Product page.
Learn more about pickup availability.
Related product recommendations - Add a section to your product pages that displays an automatically generated list of related product recommendations. Displaying related products to customers makes it easier for them to discover new products, and can help to increase online store sales.
Learn more about related product recommendations.
Complementary product recommendations - Add complementary products to product pages so that merchants can display other products that pair well with a product.
Learn more about complementary product recommendations.
Rich product media - Add rich product media such as 3D models, embedded videos, and Vimeo or YouTube videos. Include rich product media in the product template, featured product section, and product forms such as quick view features.
Search box or a link to search - The search box or a link to search must include the following:
- A search template
- Predictive search functionality
Selling plans - Merchants are able to create selling plans to offer subscriptions. Selected selling plans need to be shown to customers in the cart and on customer order pages.
Selling plans must be supported on the following pages:
- Cart page
- Customer page
Learn more about subscriptions.
Shop Pay Installments - Add a Shop Pay Installments banner on product.liquid
to let customers know that they have the option to pay for their order using installments. Shop Pay Installments must be supported on the Product page.
Learn more about Shop Pay Installments.
Unit pricing - Merchants in some areas are required to show unit prices.
Unit pricing must be supported on the following pages:
- Collection page
- Product page
- Cart page
- Customer page
Learn more about how merchants can add unit prices to products in the European Union (EU) and in Switzerland.
Variant images - Enable themes to use variant images so that merchants can associate an image with a product variant.
Learn more about adding images to product variants.
Follow on Shop - Add a Follow on Shop button using the login_button Liquid filter to enable a customer to follow a store in the Shop app.
Learn more about Follow on Shop.
4. Templates, sections, and blocks
Anchor link to section titled "4. Templates, sections, and blocks"Merchants can use sections and blocks to arrange page templates, which provides more flexibility in their store's content, and allows them to control the look and feel of their online store without needing to edit code.
Template support requirements
Anchor link to section titled "Template support requirements"Themes must support the following templates and their formats:
theme.liquid
(layout file)
404.json
article.json
blog.json
cart.json
collection.json
index.json
list-collections.json
page.json
page.contact.json
password.json
product.json
search.json
gift_card.liquid
settings_schema.json
(config file)
Section support requirements
Anchor link to section titled "Section support requirements"All templates must support sections (JSON templates), with the exception of Customer Account pages, Gift Card pages, and Checkout, which don't need to support sections.
Themes must include a Custom Liquid section. The section needs to include a setting of type liquid
, and should be available on all templates that support sections. The Custom Liquid section can act as an insertion point for certain types of apps.
Header and footer sections must be rendered within section groups. Section groups allow merchants to dynamically add, remove, and reorder sections in the header and footer areas of the layout.
Block and app block support requirements
Anchor link to section titled "Block and app block support requirements"Themes must support blocks for all or most elements on the main section of the product page. For example, elements such as product price, product vendor, and product description should each be individual blocks within the main product section. Refer to Dawn's main product section for an example of how these blocks should be implemented.
Themes must support app blocks (blocks of type @app
) in the main product section and featured product section.
Introduce Custom Liquid blocks into certain sections. Add a Custom Liquid block anywhere you'd consider adding an app block, because the Custom Liquid block can act as an insertion point for certain types of apps. This block should include a setting of type liquid
.
Learn more about best practices for sections and blocks.
5. Lighthouse performance and accessibility
Anchor link to section titled "5. Lighthouse performance and accessibility"Performance and accessibility are important factors for merchants when they choose a theme for their online store. Optimizing your theme for performance and accessibility is key to the success of the merchants that you support, and the experience of their customers.
Lighthouse performance and accessibility requirements
Anchor link to section titled "Lighthouse performance and accessibility requirements"Themes must have a minimum average Lighthouse performance score of 60 across the theme's product, collection, and home page, for both desktop and mobile. Tests are run using a benchmark dataset.
Themes must have a minimum average Lighthouse accessibility score of 90 across the theme's product, collection, and home page, for both desktop and mobile. Tests are run using a benchmark dataset.
When verifying performance and accessibility scores, sections must contain actual images and content. The sections can't be empty.
Testing the performance of your theme
Anchor link to section titled "Testing the performance of your theme"You can quickly test the performance of your theme before you submit it to the Shopify Theme Store by running performance tests against a benchmark shop. If you want to test your theme before you submit it, then refer to these performance best practices.
Testing the accessibility of your theme
Anchor link to section titled "Testing the accessibility of your theme"You can quickly test the accessibility of your theme before you submit it to the Shopify Theme Store by running accessibility tests against a benchmark shop. If you want to test your theme before you submit it, then refer to these accessibility best practices.
Including well-designed page types in your theme enables merchants to build all of the elements they need to run their online store.
Layout page requirements
Anchor link to section titled "Layout page requirements"If payment method logos are output, then use the enabled_payment_types
property of the shop
object, and the payment_type_img_url
or payment_type_svg_tag
filter, to output payment icons. The icons must be in full color.
The <html>
element must specify a lang
attribute. The lang
attribute value can be populated with the locale
property of the request
object.
You must use the routes
object for generating dynamic URLs to your storefront. Instead of href=/
to link to the homepage, you can now use href="{{ routes.root_url }}"
. This ensures that your theme supports any changes that Shopify makes to the URL format, such as allowing a page to be available in multiple languages.
Don't modify or parse the content_for_header
object. If content_for_header
changes, then your Liquid's behavior changes.
Product page requirements
Anchor link to section titled "Product page requirements"The product page must contain the following product information:
product.title
(not truncated)variant.price
variant.unit_price
- variant's compare-at price
product.description
- option names and option values
All product images must be displayed and viewable. Different image ratios shouldn't break the layout.
Variant images must be shown when the associated variant is selected.
The product page must use cart.taxes_included
to display an indication that taxes are included in the price when a store is using tax-inclusive prices.
The product page must contain the following buying functions:
- Variants that are split up into separate options for users to select.
- The ability to select a quantity.
- An Add to cart button (often disabled or replaced when an unavailable variant combination, or sold-out variant, is selected).
- A callback function to update the price, compare-at-price, and sold-out messages for the currently selected variant.
- The first available variant loads on a page.
The product page must support the following features:
- Product recommendations
- Rich product media
- Dynamic checkout buttons (must be enabled by default)
- Pickup availability
- Shop Pay Installments
Gift card products must have the option to send the card to a recipient.
The following attributes of the form
object must be used:
form.email
form.name
form.message
The following attribute of the gift_card
object must be used:
send_on
Collection page requirements
Anchor link to section titled "Collection page requirements"Attributes of the collection
object that must be outputted:
collection.title
(not truncated)collection.description
collection.image
Products must be listed in a grid or list, with the following attributes of the product
object output:
product.title
(not truncated and links to product.url)product.price
product.images
variant.unit_price
- At least one piece of media for a product
Product grid must not break because of product images of varying aspect ratios.
The Sale badge or product.compare_at_price_max
is shown when appropriate.
Must provide the ability to sort the products inside collections.
Must display a message if a collection has no products in it.
If a product has variants with different prices, then use product.price_varies
to show the price variation. For example, show the range between product.price_min
and product.price_max
.
Must use pagination or lazy loading.
Collection List page requirements
Anchor link to section titled "Collection List page requirements"Attributes of the collection
object that must be outputted:
collection.title
(not truncated)
Must use collection.featured_image
. If a collection image doesn't exist, this property loads the featured image of the first product in that collection instead.
Must use pagination or lazy loading.
Cart page requirements
Anchor link to section titled "Cart page requirements"Must display details of the line_item
object, including:
title
unit_price
image
final_price
quantity
options_with_values
The cart.total_price
must be visible.
The cart page must use cart.taxes_included
to display an indication that taxes are included in the price when a store is using tax-inclusive prices.
Must include a checkout button that submits the cart form.
Must refresh all line items when the quantity is updated to ensure the total updates correctly.
Must provide the ability to change the quantity of each line item.
The cart page must support the following features:
- Cart notes
- Selling plans
- Automatic discount codes
- Dynamic checkout buttons
Page requirements
Anchor link to section titled "Page requirements"Must include:
page.title
page.content
Must include an alternate template for a contact form.
Blog page requirements
Anchor link to section titled "Blog page requirements"Attributes of the blog
object must output the blog.title.
Each article must display the following information:
article.title
(not truncated, links toarticle.url
)article.image
article.excerpt_or_content
notarticle.content
Must use pagination or lazy loading.
Article page requirements
Anchor link to section titled "Article page requirements"An article must display the following information:
article.title
(not truncated)article.comments
article.published_at
(but notarticle.created_at
)
Comments must be paginated.
Comments workflow must function without moderation, and all success or error messages must be properly output.
Search page requirements
Anchor link to section titled "Search page requirements"Must return a message if there are no search results.
Must have the ability to return different object types (products, blogs, pages). The object_type
must be used when displaying search results.
404 page requirements
Anchor link to section titled "404 page requirements"Must have a clear message stating that the page wasn't found.
Must have options for how to proceed, such as a search bar or a link to the homepage.
Gift Card page requirements
Anchor link to section titled "Gift Card page requirements"Must support Apple Wallet.
Must show a gift card code.
Must show a QR code. The minimum size required is 120px x 120px.
Must include the logo or shop.name
.
Customer page requirements
Anchor link to section titled "Customer page requirements"Must display details of the line_item
object, including:
line_item.unit_price
The customer page must support the following features:
- Selling plans
- Unit pricing
Password page requirements
Anchor link to section titled "Password page requirements"Must include the following information:
- the logo or
shop.name
shop.password_message
- a way to enter the storefront’s password
7. Consistency and functionality
Anchor link to section titled "7. Consistency and functionality"Building a theme that functions properly and consistently ensures that merchants can rely on the quality of your theme.
All themes must meet the following functional requirements:
All RTE-generated content must be consistent (such as h1
-h6
, blockquotes
, ul
, ol
) across all templates. Styling of RTE content is consistent with those of blog articles, product descriptions, and collection descriptions.
Scripts included in theme code must be hosted on Shopify's servers, with the exception of approved third-party libraries.
Themes must not include any Javascript or code that interferes with, or augments, any native Shopify feature within the theme editor or Shopify admin.
Any link in the code that points to one of Shopify's domains can take multiple attributes, but must include a rel="nofollow"
attribute.
You must link assets using protocol-relative URLs. Hard-defining http
or https
isn't permitted.
The appropriate licenses must be obtained for all third party plugins and images.
Themes must not include functionality that's dependent on an app.
Themes must not incorporate app-like functionalities that require API access for full functionality. Examples include wishlists, appointment scheduling, cart-level discount codes, or an Instagram feed. Incomplete features resembling those found in apps will not be accepted.
8. Browser compatibility
Anchor link to section titled "8. Browser compatibility"Ensure that your theme lets merchants access the same information and experience across different browsers.
Desktop browser requirements
Anchor link to section titled "Desktop browser requirements"A theme's layout, browsing experience, and purchasing actions must support the following desktop browsers and releases:
Safari - latest two releases for Mac
Chrome - latest three releases for Mac and PC
Firefox - latest three releases for Mac and PC
Edge - latest two releases for PC
Mobile browser requirements
Anchor link to section titled "Mobile browser requirements"A theme's layout must meet the following mobile browser layout requirements:
Themes must be mobile responsive.
A theme's layout, browsing experience, and purchasing actions must support the following mobile browsers and releases:
Mobile Safari - latest two releases for iOS
Chrome Mobile - latest three releases for Android and iOS
Samsung Internet - latest two releases for Android
Webviews and other application requirements
Anchor link to section titled "Webviews and other application requirements"Themes must support browsing and purchasing actions when rendered in webviews for the following applications:
Instagram - latest release for Android and iOS
Facebook - latest release for Android and iOS
Pinterest - latest release for Android and iOS
All themes must meet the following requirements, so their assets are delivered by the Shopify platform in an optimal manner.
Themes must not use Sass, or include .scss
or .scss.liquid
files. Instead, use only native CSS, and write or compile your stylesheets into .css
or .css.liquid
files.
Themes must not include minified .css
or .js
files, with the exception of ES6 and third-party libraries. Shopify automatically minifies CSS files, as well as JavaScript files that use ES5 syntax or lower, when they're requested by the storefront.
10. Search engine optimization (SEO)
Anchor link to section titled "10. Search engine optimization (SEO)"Effective SEO helps you build better relationships with your audience, improve the merchant experience, and drive more people to your theme.
All themes must meet the following SEO requirements:
Themes must contain the theme SEO metadata code snippet with the title, meta description, and canonical URL.
Themes must include Google's rich product snippets. To test your structured data, use Google's Structured Data Testing Tool.
Themes must not include a robots.txt.liquid
template.
Learn more about SEO best practices.
11. Accessibility
Anchor link to section titled "11. Accessibility"Accessibility for your theme is essential to providing an inclusive experience for both merchants and customers. An accessible theme is designed so that it can be used by everyone, including people with vision impairment.
All themes must meet the following accessibility requirements:
All parts of a page must be keyboard accessible, including dropdown navigation.
When navigating with the keyboard, focusable elements must feature a visible focus state.
All images require the alt
attribute. Themes must use image.alt
or image_url | image_tag: alt: string
for product images.
Form inputs must have a unique ID, and labels with for
attributes that match the input ID.
Themes must be built with valid HTML.
Text color contrast ratio must be 4.5:1 for main body content. For text larger than 18pt, and non-text elements such as borders and icons, the color contrast ratio must be 3:1.
Keyboard focus order must match the DOM order. Focus is expected to move top-bottom, left-right.
The size of the touch target for pointer inputs must be at least 24 by 24 CSS pixels. The minimum size doesn't apply to inline body text, or elements that meet other exception criteria.
Headings h1
-h6
must be visually different from each other.
Learn more about accessibility best practices.
12. Social media
Anchor link to section titled "12. Social media"Social media links help merchant grow their followers.
All themes must meet the following requirements for social media:
Must have a set of social media icons to choose from.
Must contain Open Graph and Twitter card tags.
Social media placeholder text must be left empty.
13. Settings
Anchor link to section titled "13. Settings"It's important to organize and name things in a way that won't confuse merchants who are building a store with your theme. Using clear, simple names and a simple setting structure for elements such as sections and presets makes your theme easier to use and navigate.
Basic requirements
Anchor link to section titled "Basic requirements"All theme settings must adhere to the style and terminology requirements.
The setting labels and informational text for the theme must be grammatically correct and free of spelling errors.
Default setting values for section and block content should indicate how to use the setting. Don't use Lorem Ipsum text or demo store content as a placeholder.
Must have a favicon setting.
Logo upload must work with images of different aspect ratios (for example, landscape or portrait).
All settings must have a label
.
All settings of type link_list
in the Header or Footer must have a default
value of main-menu
or footer
, depending on the location of the setting.
For all resource-based settings, such as product
, if you supply a default
value, then the associated resource must exist.
Must have a theme_info
section.
Theme editor event requirements
Anchor link to section titled "Theme editor event requirements"Changes made in the theme editor must be reflected in the editor preview. Refer to request.design_mode
for troubleshooting.
Style requirements
Anchor link to section titled "Style requirements"Write section, preset, and category names in sentence case. Only capitalize the first word and proper nouns (like 'Facebook').
Use descriptive setting names for multi-option settings or sections of different variations. Avoid using numbered options or section titles, with the exception of colors and color schemes.
Use this | Don't use this |
---|---|
Logo position on large screens
|
Logo position on large screens
|
Theme sections
|
Theme sections
|
Use language that's intuitive and easy to understand for all merchants. For example:
- Use "Horizontal position" or "Vertical position" instead of "X position" or "Y position".
- Use "Button label" instead of "CTA label".
Use American English.
Use this | Don't use this |
---|---|
canceled | cancelled |
catalog | catalogue |
center, centered | centre, centred |
color | colour |
customize | customise |
dialog | dialogue |
gray | grey |
organize | organise |
Don't use ampersands ( & ).
Use declarative statements instead of questions.
Use this | Don't use this |
---|---|
Use a custom logo | Use a custom logo? |
The subject of each section (like 'slideshow') is stated only once in the heading. Avoid subject repetition, such as 'slideshow', 'slideshow color', and 'slideshow image'.
Use active voice.
All buttons and actions must start with a verb.
All technical specifications follow these formats:
Technical specification | Format | Example |
---|---|---|
Image size | [numeral] x [numeral]px (required/recommended) | 64 x 64px required |
Image size with format | [numeral] x [numeral]px [.format] (required/recommended) | 1200 x 300px .jpg recommended |
Word / character count | [numeral] words (max) | 32 words max |
Text format | Use basic HTML to format text |
Terminology requirements
Anchor link to section titled "Terminology requirements"Use the following Shopify terminology throughout your theme:
Use this | Don’t use this |
---|---|
home page | homepage |
top bar | meta-nav, search bar |
bottom bar | below footer, legal |
slideshow | slider |
checkout (when naming settings) |
check out |
heading | title |
subheading | sub-heading |
body text | main text |
signup | sign-up, sign up |
favicon | shortcut icon, website icon |
sidebar | side bar |
button label | button name |
social media (when naming sections or settings) |
social, social sharing |
social media icons | social media buttons |
navigation (to refer to all navigational elements) |
menus, menu |
main menu (to refer to primary navigational element) |
navigation, menu |
secondary menu (to refer to secondary navigational element) |
navigation, menu |
footer menu (to refer to a menu located in the footer) |
navigation, menu |
cart type (with "drawer", "page", and/or "modal" options) |
Ajax, Ajaxify, Ajax cart |
.png | PNG, png, .PNG |
use (for actionable options that include a next step, such as uploading a file) |
show, enable |
show (for options that allow the merchant to show or hide a basic element) |
use, enable |
enable (for options related to apps or plugins, or something that will significantly modify the theme layout) |
use, show |
Section name guidelines
Anchor link to section titled "Section name guidelines"Each section in a theme needs a name. Section names appear in the section picker and in the sidebar listing the sections in a template.
Section names should relate to the section's function, for example Header
, Product list
, Slideshow
, or Image gallery
.
Refer to Shopify's theme terminology list to make sure that you name sections using the right Shopify terms.
Suggested section names
Anchor link to section titled "Suggested section names"- Header
- Featured products
- Featured collections
- Slideshow
- Image gallery
- Logo list
- Newsletter
- Map
- Blog posts
- Testimonials
- Footer
Preset name guidelines
Anchor link to section titled "Preset name guidelines"Section presets are predefined configurations of sections that merchants start with when adding content.
Preset names should relate to the type of content in the preset, for example Image and text
, Map
, Columns
, or Blog articles
.
Refer to Shopify's theme terminology list to make sure that you name presets using the right Shopify terms.
Content placeholders
Anchor link to section titled "Content placeholders"If your preset features images, videos, or icons, then you should display placeholder content so that the merchant can get a better idea of how the content looks before they add their own media.
In your presets, use the following content placeholders:
Type of content | Placeholder |
---|---|
Images that aren't products or collections Adjacent images without margins |
Image icon |
Lists of logos | Logo icon |
Slideshows Images with overlaid text Full-width images |
Lifestyle image |
Videos | Default YouTube video ID |
14. Theme design and UX
Anchor link to section titled "14. Theme design and UX"A theme is crucial to a merchant's brand identity, as it represents the merchant to the world in a visual and interactive manner. A theme should have purposeful direction and strong elements of design, but also provide a degree of flexibility that empowers merchants to take full control of their brand image.
When building Shopify free themes, and assessing themes from our Theme Store Partners, a detailed rubric is used to review the design and UX components of the theme. This ensures that the theme is confidently addressing vital areas such as art direction, consistency, typography, layout, and customer UX.
Learn more about design best practices.
Use the following rubric as a guide to better design your custom theme builds.
Art direction
Anchor link to section titled "Art direction"Your theme should have a clear and consistent visual appeal which conveys a message to its target demographic.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
Your theme should have a good flow of content, hierarchy, balance, contrast, white space, responsiveness, grid, and alignment.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
Consistency
Anchor link to section titled "Consistency"Your theme design elements should be consistent across all pages.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
Accessibility
Anchor link to section titled "Accessibility"Accessibility encompasses the inclusion of implementations such as (but not limited to) keyboard navigation, screen reader compatibility, high contrast coloration, and thoughtful font selection to provide users with alternative means of navigating a system with comprehensive ease.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
Customer UX
Anchor link to section titled "Customer UX"Your theme should provide a clear purchase flow through the collection, product, and cart pages.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
Merchant UX
Anchor link to section titled "Merchant UX"Your theme should have clear and simple options for merchants to customize the look and feel of their shop.
Score | Description |
---|---|
Meets requirements |
|
Improvement needed |
|
Critical improvement needed |
|
15. Font picker
Anchor link to section titled "15. Font picker"Font picker fields can be used to capture a font selection for various theme elements, such as the base heading font.
Font pickers must have the following settings:
All fonts must use the setting type font_picker.
A default font is loaded. For example, default: work_sans_n6
.
The CSS file loads bold, italic, and bold-italic variants for each font using the font_modify
filter.
Custom fonts aren't accepted.
Learn more about setting fonts.
16. Color system
Anchor link to section titled "16. Color system"Selecting the right foreground and background colors enhances the effectiveness of your theme.
A minimum of 4 colors are required.
All background color settings must include a corresponding foreground color setting.
Color settings must use a type
of color
.
Learn more about color system best practices.
17. Responsive images
Anchor link to section titled "17. Responsive images"Responsive images are important to the user experience. With the shift to smaller devices, developers face new challenges to ensure that images load quickly, regardless of screen size.
All themes must meet the following image requirements:
Images must adopt a responsive image strategy. Small images such as icons are an exception.
Images must load only as they are needed to minimize the number of images loaded initially per page.
18. Naming themes and theme styles
Anchor link to section titled "18. Naming themes and theme styles"Choosing a great name for your theme is important when submitting it to the Theme Store. Your theme name helps merchants understand your theme, and ultimately, helps them choose your theme as the right one for their unique needs.
Theme and theme style naming requirements
Anchor link to section titled "Theme and theme style naming requirements"Theme and theme style names must be distinct from Shopify products. You can't use the same name as, or similar to, Shopify products, events, or branded content. For example, don't name your theme Shopify, Unite, or Polaris.
Theme and theme style names must be distinct from company names. You can’t include the name of your company or Shopify Partner account in your theme name. Your Partner account name is displayed automatically on the theme listing page.
Theme and theme style names must be distinct from websites, ecommerce platforms, and SEO-related benefits. For example, don't name your theme Performance, Mobile, or Sales.
Theme and theme style names must be distinct from industries and collections in the Theme Store. For example, don't name your theme Fashion, Electronics, or Jewelry.
Theme and theme style names must contain 14 characters or fewer.
Theme names must be unique and distinct from existing themes in the Shopify Theme Store to avoid confusion or conflicts.
Theme name guidelines
Anchor link to section titled "Theme name guidelines"Use the following guidelines to help you choose the right name for your theme:
- Summarize, or allude to, the purpose of the theme.
- Give the merchant an idea of what to expect when using the theme, the core ideas behind the theme, and the theme's target demographic.
- Use a noun for the name. Nouns are more suitable for creating product names that stick, have identity, and create a lasting impression. A noun can better define the focus of the theme, and offer a better understanding of the shopping experience being offered.
- Use a name that's easy to spell and pronounce. This will help merchants with recall and search.
- Work across different dialects. Since some words and phrases can have different meanings in different regions, you should consult with an idiom dictionary.
- Use a name that's different from theme names on different platforms.
Theme style name guidelines
Anchor link to section titled "Theme style name guidelines"Use the following guidelines to help you choose the right name for your theme style:
- Reflect the design and aesthetics of the theme style.
- Use an adjective for the theme style name. Adjectives are great for describing colours, fonts, and design.
- Compliment the theme name, not compete against it. Merchants often mistake theme styles for theme names, which causes confusion when they contact support to request help with their themes.
- Use a common thread to connect multiple style names for one theme.
Increasing clarity and discoverability
Anchor link to section titled "Increasing clarity and discoverability"For clarity and discoverability, consider the following guidelines when naming your theme and theme style:
- Don't use trendy names. Trends fade, and theme names should transcend trends.
- Don't use unusual spellings. Not only are unusual spellings more difficult to remember, but they’re also more susceptible to autocorrect errors, and they limit discoverability by merchants.
- Don't use lengthy names. Even if you’re trying to be descriptive, creating a long name can hurt a merchant’s ability to remember what your theme is called.
- Don't use the same name as a theme on a different platform.
- Don't use the same name for both the theme and the theme style.
- Don't use multiple style names that are identical to existing theme names.
19. Theme versions and release notes
Anchor link to section titled "19. Theme versions and release notes"Theme versions help merchants easily identify which theme they have, so that they can determine which features are available, or if there are more recent versions to update to.
When you submit your theme to the Shopify Theme Store, either for the first time or for an update, the theme needs to have a version number and release notes that highlight the main features of the version.
20. Demo stores
Anchor link to section titled "20. Demo stores"Setting up a demo store is a great way to showcase your theme's features and functionality, and to provide merchants with real-world examples of how they can use your theme. A demo store that's beautifully designed and functions flawlessly lets merchants explore and interact with your theme, and helps them understand if your theme is right for them.
To build your demo store, you can use a Shopify development store free of charge.
Development stores with developer previews enabled can't be transferred. Don't enable any developer previews when creating demo stores.
Demo store requirements
Anchor link to section titled "Demo store requirements"All themes must include at least one demo store.
Each preset requires a demo store. You can use up to 5 demo stores for each theme.
Each demo store has the Bogus Gateway or Shopify Payments test mode enabled, and all other checkout options disabled.
All demo store pages must use authentic text content. Don't use Lorem Ipsum or onboarding text. Don't include profanities.
The powered_by_link
link can't be altered and must contain only powered_by_link
.
Affiliate linking isn't allowed.
Any link in the code that points to one of Shopify's domains must include a rel="nofollow"
attribute.
To avoid potential merchant confusion, demo stores can only showcase elements and functionality that are built into the theme. For example:
- Don't use embedded text or buttons in images, except for the text on physical products, infographics, badges, or instagram images.
- Don't use animated gif images in places where they can be mistaken for theme functionality.
- Don't use apps. In some cases, special consideration applies to free product review apps and free translation apps. If you're showcasing multi-language options using translation apps, then all content must be translated.
You must obtain the appropriate rights for all demo store assets in accordance with the Shopify Partner Agreement. Before using any brand names, images, or content, permission must be directly granted by the brand owners.
If you’re looking for a good source of royalty-free images, then try Shopify Burst.
Demo store recommendations
Anchor link to section titled "Demo store recommendations"When designing your demo store, consider the following recommendations to help you showcase the full potential of your theme. The following recommendations aren't mandatory requirements that need to be met for submission.
- Identify the source of any product images used in the product description.
- Use the latest version of your theme in your demo store.
- Incorporate built-in Shopify features to showcase the power and capabilities of your theme.
- Illustrate the versatility and variability of your theme, by including examples such as a product that's on sale, a sold-out product or variant, a product with multiple variants, and a gift card product.
21. Documentation and contact forms
Anchor link to section titled "21. Documentation and contact forms"Having clear, detailed, and accessible information about your theme helps merchants feel supported and helps to reduce support issues. Creating organized and effective documentation is important to your overall success as a Theme Partner.
Documentation and contact form requirements
Anchor link to section titled "Documentation and contact form requirements"You must provide theme documentation and a public support contact form.
You must have your theme documentation and contact form ready before launching your theme.
You must link your documentation and contact form to your theme listing page in the Shopify Theme Store.
Merchant-facing theme documentation
Anchor link to section titled "Merchant-facing theme documentation"The copy for all theme documentation must be grammatically correct and free of spelling errors.
The theme documentation must be consistent with the copy in the theme settings.
You need to keep your documentation up to date as changes occur within Shopify and you update your theme. As you support merchants using your theme, be sure to identify any gaps in your theme documentation and make updates as necessary.
Your theme documentation should include an FAQ section and any other relevant information that you feel could help address potential support questions that merchants might have.
Clear support policy
Anchor link to section titled "Clear support policy"Consider specifying your support policy in your theme documentation. As a Theme Partner, you must support bug fixes and answer any merchant questions regarding your theme. You might want to provide additional services to merchants such as customizations, app-integrations, and help with theme updates, but you can't include these services in the cost of your theme.
Clarity on custom code tutorials
Anchor link to section titled "Clarity on custom code tutorials"If you offer custom coding tutorials in your documentation, then specify whether the custom tutorials are supported. Also, include a warning to merchants in your tutorials that they should duplicate their theme before editing their code, and include a suggestion that merchants hire a Shopify Partner for help.
Contact forms
Anchor link to section titled "Contact forms"Your contact form lets merchants contact you. You should include your contact form in your theme documentation. If you use a modal for your contact form, then make sure that it's mobile friendly and linkable from the Theme Store. Try to avoid fields that ask merchants about budget, phone numbers, project type, or other unnecessary questions. You can have a form outlining your agency work on a separate page, but the contact form that you link to from the Theme Store should comply with the following guidelines.
Field | Guideline |
---|---|
(First and Last) Name Field | |
Email Address Field | |
Store URL Field | Include an example URL for clarity, such as http://www.storename.myshopify.com. |
Description of Problem Field | This should be a text-area field. |
File Upload Function | Allow merchants to highlight their issues with images. |
Auto-responder Function | The auto-responder is triggered when the contact form is submitted to reduce the amount of merchants contacting Shopify and Theme Partners asking if their support requests have been received. |
Theme Name | Provide the theme name if you offer multiple themes. |
Subject | If you include this field, then it should auto populate the email subject line. |
22. Supporting your theme
Anchor link to section titled "22. Supporting your theme"As a Theme Partner, you're responsible for supporting merchants who use your theme. Being merchant-focused, providing quality support, and having a collaborative attitude with Shopify is essential for the success of your theme.
Merchant support requests are submitted through your contact form, which you should link to from the Shopify Theme Store and your theme documentation.
Merchant support requirements
Anchor link to section titled "Merchant support requirements"Estimating the support workload
Anchor link to section titled "Estimating the support workload"Being a Theme Partner is a full-time job, and supporting merchants who use your theme is a large part of that. All of our current Theme Partner have dedicated support teams working for them. If you become a Theme Partner, then you’ll need to consider how to balance Theme Partner work with any other jobs that you're currently doing. New Theme Partners typically underestimate the amount of time that they'll need to allocate to support.
"Merchant support is by far the most challenging part of being a Theme Partner"
-- Archetype themes
To understand how much effort is required to support a theme, Shopify merchants currently generate thousands of support tickets each month for the paid themes in the Shopify Theme Store, and support requests continue to grow as more merchants join the platform.