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](/docs/storefronts/themes/store/test-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](/docs/storefronts/themes/store/review-process/submit-theme).

<a id="theme-store-exclusivity"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="theme-store-exclusivity-1"><label class="marketing-checkbox-label" for="theme-store-exclusivity-1"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-store-exclusivity-2"><label class="marketing-checkbox-label" for="theme-store-exclusivity-2"><p style="margin-left:30px">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.</p>

<a id="uniqueness"></a>

## 2. Uniqueness from other themes

If you're building a theme based on our reference theme, [Dawn](/docs/storefronts/themes/tools/dawn), or based on one of your own themes that's already listed in the [Shopify Theme Store](https://themes.shopify.com), 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.

<a id="features"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="theme-features-18"><label class="marketing-checkbox-label" for="theme-features-18"><p style="margin-left:30px"><b>Sections Everywhere</b> - Refer to **[Templates, sections, and blocks](https://shopify.dev/themes/store/requirements#templates)** to ensure compatibility with Online Store 2.0.</p>

<p style="margin-left:30px">Learn more about <a href="/docs/storefronts/themes/best-practices/version-control">migrating a theme to OS 2.0</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-9"><label class="marketing-checkbox-label" for="theme-features-9"><p style="margin-left:30px"><b>Discounts</b> - [Display discount amounts](/docs/storefronts/themes/pricing-payments/discounts) for individual items and for entire orders in the cart, checkout, and order templates. Discounts must be supported on the Cart page.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/discounts">discounts</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-2"><label class="marketing-checkbox-label" for="theme-features-2"><p style="margin-left:30px"><b>Accelerated checkout buttons</b> - Include [accelerated checkout buttons on product pages](/docs/storefronts/themes/architecture/templates/product#accelerated-checkout-buttons) and [cart pages](/docs/storefronts/themes/pricing-payments/accelerated-checkout#implementing-accelerated-checkout-buttons-in-your-theme) so that customers can checkout quickly.</p>

<p style="margin-left:30px">Accelerated checkout buttons must be supported on the following pages:</p>
<ul style="margin-left:30px">
<li>Product page</li>
<li>Cart page</li>
</ul>

<p style="margin-left:30px">The branded dynamic and accelerator checkout button colors must not be modified.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/payments/accelerated-checkouts">accelerated checkout</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-17"><label class="marketing-checkbox-label" for="theme-features-17"><p style="margin-left:30px"><b>Faceted search filtering</b> - Use [search filtering](/docs/storefronts/themes/navigation-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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-10"><label class="marketing-checkbox-label" for="theme-features-10"><p style="margin-left:30px"><b>Gift cards</b> - Include a [gift card template](/docs/storefronts/themes/architecture/templates/gift-card-liquid) that renders the gift card page, which displays the gift card that's issued to a customer upon purchase.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/products/gift-card-products">gift cards</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-19"><label class="marketing-checkbox-label" for="theme-features-19"><p style="margin-left:30px"><b>Image focal points</b> - Make sure that your theme supports the [focal point](/docs/storefronts/themes/architecture/settings/input-settings#image-focal-points) of an image. Focal points can be set in the theme editor `image_picker` setting, or from the **Files** page in the Shopify admin.
</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-12"><label class="marketing-checkbox-label" for="theme-features-12"><p style="margin-left:30px"><b>Images for social sharing</b> - Add a [`page_image` object](/docs/api/liquid/objects/page#page-image) 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.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/images/showing-social-media-thumbnail-images">social media images</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-5"><label class="marketing-checkbox-label" for="theme-features-5"><p style="margin-left:30px"><b>Country selection</b> - When merchants sell to other countries and regions [in their local currency](/docs/storefronts/themes/markets/multiple-currencies-languages#the-country-selector) customers must be able to select their currency and their country or region on the storefront. Selectors must follow the [UX guidelines](/docs/storefronts/themes/markets/country-language-ux).</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/payments/shopify-payments/multi-currency">selling in multiple currencies</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-4"><label class="marketing-checkbox-label" for="theme-features-4"><p style="margin-left:30px"><b>Language selection</b> - When merchants sell [in multiple languages](/docs/storefronts/themes/markets/multiple-currencies-languages#the-language-selector), customers must be able to select their preferred language on the storefront. Selectors must follow the [UX guidelines](/docs/storefronts/themes/markets/country-language-ux).</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/cross-border/multilingual-online-store">selling in multiple languages</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-6"><label class="marketing-checkbox-label" for="theme-features-6"><p style="margin-left:30px"><b>Multi-level menus</b> - Add [nested menus](/docs/storefronts/themes/navigation-search/navigation) so that merchants can create multi-level drop down menus.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/menus-and-links/drop-down-menus">setting up drop down menus</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-11"><label class="marketing-checkbox-label" for="theme-features-11"><p style="margin-left:30px"><b>Newsletter forms</b> - Add a [newsletter signup](/docs/storefronts/themes/customer-engagement/email-consent#newsletter-sign-up-form) so that merchants can collect customer email addresses to use in email marketing campaigns.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/add-newsletter">newsletter signups</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-14"><label class="marketing-checkbox-label" for="theme-features-14"><p style="margin-left:30px"><b>Pickup availability</b> - [Add pickup availability to product pages](/docs/storefronts/themes/delivery-fulfillment/pickup-availability) 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.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers">pickup availability</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-60"><label class="marketing-checkbox-label" for="theme-features-60"><p style="margin-left:30px"><b>Related product recommendations</b> - Add a section to your product pages that displays an automatically generated list of [related product recommendations](/docs/storefronts/themes/product-merchandising/recommendations/related-products). Displaying related products to customers makes it easier for them to discover new products, and can help to increase online store sales.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/add-product-recommendations">related product recommendations</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-61"><label class="marketing-checkbox-label" for="theme-features-61"><p style="margin-left:30px"><b>Complementary product recommendations </b> - Add [complementary products](/docs/storefronts/themes/product-merchandising/recommendations/complementary-products) to product pages so that merchants can display other products that pair well with a product.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/add-complementary-products">complementary product recommendations</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-3"><label class="marketing-checkbox-label" for="theme-features-3"><p style="margin-left:30px"><b>Rich product media</b> - [Add rich product media](/docs/storefronts/themes/product-merchandising/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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-1"><label class="marketing-checkbox-label" for="theme-features-1"><p style="margin-left:30px"><b>Search box or a link to search</b> - The search box or a link to search must include the following:</p>

<ul style="margin-left:30px">
<li>A <a href="/docs/storefronts/themes/architecture/templates/search">search template</a></li>
<li><a href="/docs/storefronts/themes/navigation-search/search/predictive-search">Predictive search</a> functionality</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-features-15"><label class="marketing-checkbox-label" for="theme-features-15"><p style="margin-left:30px"><b>Selling plans</b> - 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](/docs/storefronts/themes/pricing-payments/subscriptions/add-subscriptions-to-your-theme#customer-order-selling-plan-display).</p>

<p style="margin-left:30px">Selling plans must be supported on the following pages:</p>
<ul style="margin-left:30px">
<li>Cart page</li>
<li>Customer page</li>
</ul>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/products/subscriptions">subscriptions</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-13"><label class="marketing-checkbox-label" for="theme-features-13"><p style="margin-left:30px"><b>Shop Pay Installments</b> - Add a [Shop Pay Installments banner](/docs/storefronts/themes/pricing-payments/installments) 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.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/payments/shop-pay-installments">Shop Pay Installments</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-8"><label class="marketing-checkbox-label" for="theme-features-8"><p style="margin-left:30px"><b>Unit pricing</b> - Merchants in some areas are required to [show unit prices](/docs/storefronts/themes/pricing-payments/unit-pricing).</p>

<p style="margin-left:30px">Unit pricing must be supported on the following pages:</p>
<ul style="margin-left:30px">
<li>Collection page</li>
<li>Product page</li>
<li>Cart page</li>
<li>Customer page</li>
</ul>

<p style="margin-left:30px">Learn more about how merchants can add unit prices to products in <a href="https://help.shopify.com/manual/products/details/product-pricing/unit-pricing">the European Union (EU) and in Switzerland</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-7"><label class="marketing-checkbox-label" for="theme-features-7"><p style="margin-left:30px"><b>Variant images</b> - [Enable themes to use variant images](/docs/storefronts/themes/product-merchandising/variants) so that merchants can associate an image with a product variant.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/products/product-media/add-images-variants">adding images to product variants</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-features-16"><label class="marketing-checkbox-label" for="theme-features-16"><p style="margin-left:30px"><b>Follow on Shop</b> - Add a <b>Follow on Shop button</b> using the [login_button](/docs/api/liquid/filters/login_button) Liquid filter to enable a customer to follow a store in the Shop app.</p>

<p style="margin-left:30px">The branded <b>Follow on Shop</b> button colors must not be modified.</p>

<p style="margin-left:30px">Learn more about <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/follow-on-shop">Follow on Shop</a>.</p>

<a id="templates"></a>

## 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

Themes must support the following templates and their formats:

<input class="marketing-checkbox" type="checkbox" id="theme-templates-14"><label class="marketing-checkbox-label" for="theme-templates-14"><p style="margin-left:30px">`theme.liquid` (layout file)</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-10"><label class="marketing-checkbox-label" for="theme-templates-10"><p style="margin-left:30px">`404.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-6"><label class="marketing-checkbox-label" for="theme-templates-6"><p style="margin-left:30px">`article.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-5"><label class="marketing-checkbox-label" for="theme-templates-5"><p style="margin-left:30px">`blog.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-4"><label class="marketing-checkbox-label" for="theme-templates-4"><p style="margin-left:30px">`cart.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-3"><label class="marketing-checkbox-label" for="theme-templates-3"><p style="margin-left:30px">`collection.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-1"><label class="marketing-checkbox-label" for="theme-templates-1"><p style="margin-left:30px">`index.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-8"><label class="marketing-checkbox-label" for="theme-templates-8"><p style="margin-left:30px">`list-collections.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-7"><label class="marketing-checkbox-label" for="theme-templates-7"><p style="margin-left:30px">`page.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-16"><label class="marketing-checkbox-label" for="theme-templates-16"><p style="margin-left:30px">`page.contact.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-11"><label class="marketing-checkbox-label" for="theme-templates-11"><p style="margin-left:30px">`password.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-2"><label class="marketing-checkbox-label" for="theme-templates-2"><p style="margin-left:30px">`product.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-9"><label class="marketing-checkbox-label" for="theme-templates-9"><p style="margin-left:30px">`search.json`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-13"><label class="marketing-checkbox-label" for="theme-templates-13"><p style="margin-left:30px">`gift_card.liquid`</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-12"><label class="marketing-checkbox-label" for="theme-templates-12"><p style="margin-left:30px">`settings_schema.json` (config file)</p>

### Section support requirements

<input class="marketing-checkbox" type="checkbox" id="theme-templates-15"><label class="marketing-checkbox-label" for="theme-templates-15"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-27"><label class="marketing-checkbox-label" for="theme-templates-27"><p style="margin-left:30px">Themes must include a **Custom Liquid** section. The section needs to include a setting of type [`liquid`](/docs/storefronts/themes/architecture/settings/input-settings#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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-30"><label class="marketing-checkbox-label" for="theme-templates-30"><p style="margin-left:30px">Header and footer sections must be rendered within [section groups](/docs/storefronts/themes/architecture/section-groups). Section groups allow merchants to dynamically add, remove, and reorder sections in the header and footer areas of the layout.</p>

### Block and app block support requirements

<input class="marketing-checkbox" type="checkbox" id="theme-templates-26"><label class="marketing-checkbox-label" for="theme-templates-26"><p style="margin-left:30px">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](https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid) for an example of how these blocks should be implemented.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-29"><label class="marketing-checkbox-label" for="theme-templates-29"><p style="margin-left:30px">Themes must support [app blocks](/docs/storefronts/themes/architecture/blocks/app-blocks) (blocks of type `@app`) in the main product section and featured product section.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-templates-28"><label class="marketing-checkbox-label" for="theme-templates-28"><p style="margin-left:30px">Introduce **Custom Liquid** blocks into certain sections. Add a **Custom Liquid** block anywhere you'd consider adding an [app block](/docs/storefronts/themes/best-practices/templates-sections-blocks#considerations-for-app-blocks), 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`](/docs/storefronts/themes/architecture/settings/input-settings#liquid).</p>

Learn more about [best practices for sections and blocks](/docs/storefronts/themes/best-practices/templates-sections-blocks).

<a id="lighthouse-performance-accessibility"></a>

## 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

<input class="marketing-checkbox" type="checkbox" id="theme-performance-accessibility-1"><label class="marketing-checkbox-label" for="theme-performance-accessibility-1"><p style="margin-left:30px">Themes must have a minimum average Lighthouse performance score of <b>60</b> across the theme's product, collection, and home page, for both desktop and mobile. Tests are run using a <a href="/docs/storefronts/themes/best-practices/performance#run-a-lighthouse-audit-using-shopify-data">benchmark dataset</a>.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-performance-accessibility-2"><label class="marketing-checkbox-label" for="theme-performance-accessibility-2"><p style="margin-left:30px">Themes must have a minimum average Lighthouse accessibility score of <b>90</b> across the theme's product, collection, and home page, for both desktop and mobile. Tests are run using a <a href="/docs/storefronts/themes/best-practices/performance#run-a-lighthouse-audit-using-shopify-data">benchmark dataset</a>.</p>

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

You can quickly test the [performance](/docs/storefronts/themes/best-practices/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](/docs/storefronts/themes/best-practices/performance#testing-for-performance).

### Testing the accessibility of your theme

You can quickly test the [accessibility](/docs/storefronts/themes/best-practices/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](/docs/storefronts/themes/best-practices/accessibility#accessibility-testing).

<a id="pages"></a>

## 6. Pages

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

<input class="marketing-checkbox" type="checkbox" id="theme-pages-1"><label class="marketing-checkbox-label" for="theme-pages-1"><p style="margin-left:30px">If payment method logos are output, then use the `enabled_payment_types` property of the [`shop` object](/docs/api/liquid/objects/shop), and the [`payment_type_img_url`](/docs/api/liquid/filters/payment_type_img_url) or [`payment_type_svg_tag`](/docs/api/liquid/filters/payment_type_svg_tag) filter, to output payment icons. The icons must be in full color.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-2"><label class="marketing-checkbox-label" for="theme-pages-2"><p style="margin-left:30px">The `<html>` element must specify a `lang` attribute. The `lang` attribute value can be populated with the `locale` property of the [`request` object](/docs/api/liquid/objects/request#request-locale).</p>

```liquid

<html ... lang="{{ request.locale.iso_code }}">

```

<input class="marketing-checkbox" type="checkbox" id="theme-pages-3"><label class="marketing-checkbox-label" for="theme-pages-3"><p style="margin-left:30px">You must use the [`routes` object](/docs/api/liquid/objects/routes) 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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-4"><label class="marketing-checkbox-label" for="theme-pages-4"><p style="margin-left:30px">Don't modify or parse the `content_for_header` object. If `content_for_header` changes, then your Liquid's behavior changes.</p>

### Product page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-5"><label class="marketing-checkbox-label" for="theme-pages-5"><p style="margin-left:30px">The product page must contain the following product information:</p>
<ul style="margin-left:30px">
<li>`product.title` (not truncated)</li>
<li>`variant.price`</li>
<li>`variant.unit_price`</li>
<li>variant's compare-at price</li>
<li>`product.description`</li>
<li>option names and option values</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-6"><label class="marketing-checkbox-label" for="theme-pages-6"><p style="margin-left:30px">All product images must be displayed and viewable. Different image ratios shouldn't break the layout.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-7"><label class="marketing-checkbox-label" for="theme-pages-7"><p style="margin-left:30px">Variant images must be shown when the associated variant is selected.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-8"><label class="marketing-checkbox-label" for="theme-pages-8"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-9"><label class="marketing-checkbox-label" for="theme-pages-9"><p style="margin-left:30px">The product page must contain the following buying functions:</p>
<ul style="margin-left:30px">
<li>Variants that are split up into separate options for users to select.</li>
<li>The ability to select a quantity.</li>
<li>An **Add to cart** button (often disabled or replaced when an unavailable variant combination, or sold-out variant, is selected).</li>
<li>A callback function to update the price, compare-at-price, and sold-out messages for the currently selected variant.</li>
<li>The [first available variant](/docs/api/liquid/objects/product#product-selected_or_first_available_variant) loads on a page.</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-10"><label class="marketing-checkbox-label" for="theme-pages-10"><p style="margin-left:30px">The product page must support the following features:</p>
<ul style="margin-left:30px">
<li>Product recommendations</li>
<li>Rich product media</li>
<li>Accelerated checkout buttons (must be enabled by default)</li>
<li>Pickup availability</li>
<li>Shop Pay Installments</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-11"><label class="marketing-checkbox-label" for="theme-pages-11"><p style="margin-left:30px">Gift card products must have the option to send the card to a <a href="/docs/api/liquid/objects/gift_card#gift_card-recipient">recipient</a>.</p>

<p style="margin-left:30px">The following attributes of the <a href="/docs/api/liquid/objects/form"><code>form</code> object</a> must be used:</p>
<ul style="margin-left:30px">
<li><code>form.email</code></li>
<li><code>form.name</code></li>
<li><code>form.message</code></li>
</ul>

<p style="margin-left:30px">The following attribute of the <a href="/docs/api/liquid/objects/gift_card"><code>gift_card</code> object</a> must be used:</p>
<ul style="margin-left:30px">
<li><code>send_on</code></li>
</ul>


<input class="marketing-checkbox" type="checkbox" id="theme-pages-53"><label class="marketing-checkbox-label" for="theme-pages-53"><p style="margin-left:30px">For product options, swatches must be supported to visually display either a hex or an image of the given product option. Use the following attributes of the `swatch` [object](/docs/api/liquid/objects/swatch) output:</p>
<ul style="margin-left:30px">
  <li>`swatch.image`</li>
  <li>`swatch.color`</li>
</ul>

### Collection page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-12"><label class="marketing-checkbox-label" for="theme-pages-12"><p style="margin-left:30px">Attributes of the [`collection` object](/docs/api/liquid/objects/collection) that must be outputted:</p>
<ul style="margin-left:30px">
<li>`collection.title` (not truncated)</li>
<li>`collection.description`</li>
<li>`collection.image`</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-13"><label class="marketing-checkbox-label" for="theme-pages-13"><p style="margin-left:30px">Products must be listed in a grid or list, with the following attributes of the [`product` object](/docs/api/liquid/objects/product) output:</p>
<ul style="margin-left:30px">
<li>`product.title` (not truncated and links to product.url)</li>
<li>`product.price`</li>
<li>`product.images`</li>
<li>`variant.unit_price`</li>
<li>At least one piece of media for a product</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-14"><label class="marketing-checkbox-label" for="theme-pages-14"><p style="margin-left:30px">Product grid must not break because of product images of varying aspect ratios.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-15"><label class="marketing-checkbox-label" for="theme-pages-15"><p style="margin-left:30px">The **Sale** badge or `product.compare_at_price_max` is shown when appropriate.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-16"><label class="marketing-checkbox-label" for="theme-pages-16"><p style="margin-left:30px">Must provide the ability to sort the products inside [collections](/docs/storefronts/themes/architecture/templates/collection).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-17"><label class="marketing-checkbox-label" for="theme-pages-17"><p style="margin-left:30px">Must display a message if a collection has no products in it.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-18"><label class="marketing-checkbox-label" for="theme-pages-18"><p style="margin-left:30px">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`.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-19"><label class="marketing-checkbox-label" for="theme-pages-19"><p style="margin-left:30px">Must use [pagination or lazy loading](/docs/api/liquid/tags/paginate).</p>

### Collection List page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-50"><label class="marketing-checkbox-label" for="theme-pages-50"><p style="margin-left:30px">Attributes of the [`collection` object](/docs/api/liquid/objects/collection) that must be outputted:</p>
<ul style="margin-left:30px">
<li>`collection.title` (not truncated)</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-20"><label class="marketing-checkbox-label" for="theme-pages-20"><p style="margin-left:30px">Must use `collection.featured_image`. If a [collection image](/docs/api/liquid/objects/collection#collection-image) doesn't exist, this property loads the featured image of the first product in that collection instead.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-21"><label class="marketing-checkbox-label" for="theme-pages-21"><p style="margin-left:30px">Must use [pagination or lazy loading](/docs/api/liquid/tags/paginate).</p>

### Cart page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-22"><label class="marketing-checkbox-label" for="theme-pages-22"><p style="margin-left:30px">Must display details of the [`line_item` object](/docs/api/liquid/objects/line_item), including:</p>
<ul style="margin-left:30px">
<li>`title`</li>
<li>`unit_price`</li>
<li>`image`</li>
<li>`final_price`</li>
<li>`quantity`</li>
<li>`options_with_values`</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-23"><label class="marketing-checkbox-label" for="theme-pages-23"><p style="margin-left:30px">The [`cart.total_price`](/docs/api/liquid/objects/cart#cart-total_price) must be visible.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-60"><label class="marketing-checkbox-label" for="theme-pages-60"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-24"><label class="marketing-checkbox-label" for="theme-pages-24"><p style="margin-left:30px">Must include a checkout button that submits the cart form.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-25"><label class="marketing-checkbox-label" for="theme-pages-25"><p style="margin-left:30px">Must refresh all line items when the quantity is updated to ensure the total updates correctly.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-26"><label class="marketing-checkbox-label" for="theme-pages-26"><p style="margin-left:30px">Must provide the ability to change the quantity of each line item.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-54"><label class="marketing-checkbox-label" for="theme-pages-54"><p style="margin-left:30px">The cart page must support the following features:</p>
<ul style="margin-left:30px">
<li>Cart notes</li>
<li>Selling plans</li>
<li>Automatic discount codes</li>
<li>Accelerated checkout buttons</li>
</ul>

### Page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-27"><label class="marketing-checkbox-label" for="theme-pages-27"><p style="margin-left:30px">Must include:</p>
<ul style="margin-left:30px">
<li>`page.title`</li>
<li>`page.content`</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-28"><label class="marketing-checkbox-label" for="theme-pages-28"><p style="margin-left:30px">Must include an alternate template for a contact form.</p>

### Blog page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-29"><label class="marketing-checkbox-label" for="theme-pages-29"><p style="margin-left:30px">Attributes of the [`blog` object](/docs/api/liquid/objects/blog) must output the [blog.title](/docs/api/liquid/objects/blog#blog-title).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-30"><label class="marketing-checkbox-label" for="theme-pages-30"><p style="margin-left:30px">Each [article](/docs/api/liquid/objects/article) must display the following information:</p>
<ul style="margin-left:30px">
<li>`article.title` (not truncated, links to `article.url`)</li>
<li>`article.image`</li>
<li>`article.excerpt_or_content` not `article.content`</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-32"><label class="marketing-checkbox-label" for="theme-pages-32"><p style="margin-left:30px">Must use [pagination or lazy loading](/docs/api/liquid/tags/paginate).</p>

### Article page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-33"><label class="marketing-checkbox-label" for="theme-pages-33"><p style="margin-left:30px">An [article](/docs/api/liquid/objects/article) must display the following information:</p>
<ul style="margin-left:30px">
<li>`article.title` (not truncated)</li>
<li>`article.comments`</li>
<li>`article.published_at` (but not `article.created_at`)</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-34"><label class="marketing-checkbox-label" for="theme-pages-34"><p style="margin-left:30px">Comments must be [paginated](/docs/api/liquid/tags/paginate).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-35"><label class="marketing-checkbox-label" for="theme-pages-35"><p style="margin-left:30px">Comments workflow must function without moderation, and all success or error messages must be properly output.</p>

### Search page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-36"><label class="marketing-checkbox-label" for="theme-pages-36"><p style="margin-left:30px">Must return a message if there are no search results.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-37"><label class="marketing-checkbox-label" for="theme-pages-37"><p style="margin-left:30px">Must have the ability to return different object types (products, blogs, pages). The `object_type` must be used when displaying [search results](/docs/api/liquid/objects/search).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-38"><label class="marketing-checkbox-label" for="theme-pages-38"><p style="margin-left:30px">[Pagination or lazy loading](/docs/api/liquid/tags/paginate).</p>

### 404 page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-39"><label class="marketing-checkbox-label" for="theme-pages-39"><p style="margin-left:30px">Must have a clear message stating that the page wasn't found.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-40"><label class="marketing-checkbox-label" for="theme-pages-40"><p style="margin-left:30px">Must have options for how to proceed, such as a search bar or a link to the homepage.</p>

### Gift Card page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-41"><label class="marketing-checkbox-label" for="theme-pages-41"><p style="margin-left:30px">Must support [Apple Wallet](/docs/storefronts/themes/architecture/templates/gift-card-liquid#apple-wallet-passes).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-46"><label class="marketing-checkbox-label" for="theme-pages-46"><p style="margin-left:30px">Must show a gift card code.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-42"><label class="marketing-checkbox-label" for="theme-pages-42"><p style="margin-left:30px">Must show a QR code. The minimum size required is 120px x 120px.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-43"><label class="marketing-checkbox-label" for="theme-pages-43"><p style="margin-left:30px">Must include the logo or `shop.name`.</p>

### Customer page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-55"><label class="marketing-checkbox-label" for="theme-pages-55"><p style="margin-left:30px">Must display details of the [`line_item` object](/docs/api/liquid/objects/line_item), including:</p>
<ul style="margin-left:30px">
<li>`line_item.unit_price`</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-56"><label class="marketing-checkbox-label" for="theme-pages-56"><p style="margin-left:30px">The customer page must support the following features:</p>
<ul style="margin-left:30px">
<li>Selling plans</li>
<li>Unit pricing</li>
</ul>

### Password page requirements

<input class="marketing-checkbox" type="checkbox" id="theme-pages-45"><label class="marketing-checkbox-label" for="theme-pages-45"><p style="margin-left:30px">Must include the following information:</p>
<ul style="margin-left:30px">
<li>the logo or `shop.name`</li>
<li>`shop.password_message`</li>
<li>a way to enter the [storefront’s password](/docs/api/liquid/tags/from#form-storefront_password)</li>
</ul>

<a id="general"></a>


## 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:

<input class="marketing-checkbox" type="checkbox" id="theme-general-2"><label class="marketing-checkbox-label" for="theme-general-2"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-9"><label class="marketing-checkbox-label" for="theme-general-9"><p style="margin-left:30px">Scripts included in theme code must be hosted on Shopify's servers, with the exception of approved third-party libraries.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-10"><label class="marketing-checkbox-label" for="theme-general-10"><p style="margin-left:30px">Themes must not include any Javascript or code that interferes with, or augments, any native Shopify feature within the theme editor or Shopify admin.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-4"><label class="marketing-checkbox-label" for="theme-general-4"><p style="margin-left:30px">Any link in the code that points to one of Shopify's domains can take multiple attributes, but must include a `rel="nofollow"` attribute.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-5"><label class="marketing-checkbox-label" for="theme-general-5"><p style="margin-left:30px">You must link assets using protocol-relative URLs. Hard-defining <code>http</code> or <code>https</code> isn't permitted.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-6"><label class="marketing-checkbox-label" for="theme-general-6"><p style="margin-left:30px">The appropriate licenses must be obtained for all third party plugins and images.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-7"><label class="marketing-checkbox-label" for="theme-general-7"><p style="margin-left:30px">Themes must not include functionality that's dependent on an app.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-general-8"><label class="marketing-checkbox-label" for="theme-general-8"><p style="margin-left:30px">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.</p>

## 8. Browser compatibility

Ensure that your theme lets merchants access the same information and experience across different browsers.

### Desktop browser requirements

A theme's layout, browsing experience, and purchasing actions must support the following desktop browsers and releases:

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-1"><label class="marketing-checkbox-label" for="browser-compatibility-1"><p style="margin-left:30px">Safari - latest two releases for Mac</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-2"><label class="marketing-checkbox-label" for="browser-compatibility-2"><p style="margin-left:30px">Chrome - latest three releases for Mac and PC</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-3"><label class="marketing-checkbox-label" for="browser-compatibility-3"><p style="margin-left:30px">Firefox - latest three releases for Mac and PC</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-4"><label class="marketing-checkbox-label" for="browser-compatibility-4"><p style="margin-left:30px">Edge - latest two releases for PC</p>

### Mobile browser requirements

A theme's layout must meet the following mobile browser layout requirements:

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-5"><label class="marketing-checkbox-label" for="browser-compatibility-5"><p style="margin-left:30px">Themes must be mobile responsive.</p>

A theme's layout, browsing experience, and purchasing actions must support the following mobile browsers and releases:

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-6"><label class="marketing-checkbox-label" for="browser-compatibility-6"><p style="margin-left:30px">Mobile Safari - latest two releases for iOS</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-7"><label class="marketing-checkbox-label" for="browser-compatibility-7"><p style="margin-left:30px">Chrome Mobile - latest three releases for Android and iOS</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-8"><label class="marketing-checkbox-label" for="browser-compatibility-8"><p style="margin-left:30px">Samsung Internet - latest two releases for Android</p>

### Webviews and other application requirements

Themes must support browsing and purchasing actions when rendered in webviews for the following applications:

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-9"><label class="marketing-checkbox-label" for="browser-compatibility-9"><p style="margin-left:30px">Instagram - latest release for Android and iOS</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-10"><label class="marketing-checkbox-label" for="browser-compatibility-10"><p style="margin-left:30px">Facebook - latest release for Android and iOS</p>

<input class="marketing-checkbox" type="checkbox" id="browser-compatibility-11"><label class="marketing-checkbox-label" for="browser-compatibility-11"><p style="margin-left:30px">Pinterest - latest release for Android and iOS</p>

<a id="assets"></a>

## 9. Assets

All themes must meet the following requirements, so their assets are delivered by the Shopify platform in an optimal manner.

<input class="marketing-checkbox" type="checkbox" id="file-types-1"><label class="marketing-checkbox-label" for="file-types-1"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="file-types-2"><label class="marketing-checkbox-label" for="file-types-2"><p style="margin-left:30px">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.</p>

<a id="seo"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="seo-1"><label class="marketing-checkbox-label" for="seo-1"><p style="margin-left:30px">Themes must contain the [theme SEO metadata](/docs/storefronts/themes/seo/metadata) code snippet with the title, meta description, and canonical URL.</p>

<input class="marketing-checkbox" type="checkbox" id="seo-2"><label class="marketing-checkbox-label" for="seo-2"><p style="margin-left:30px">Themes must include Google's rich product snippets. To test your structured data, use [Google's Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool).</p>

<input class="marketing-checkbox" type="checkbox" id="seo-3"><label class="marketing-checkbox-label" for="seo-3"><p style="margin-left:30px">Themes must not include a `robots.txt.liquid` template.</p>

Learn  more about [SEO best practices](/docs/storefronts/themes/seo).

<a id="accessibility"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-1"><label class="marketing-checkbox-label" for="theme-accessibility-1"><p style="margin-left:30px">All parts of a page must be keyboard accessible, including dropdown navigation.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-7"><label class="marketing-checkbox-label" for="theme-accessibility-7"><p style="margin-left:30px">When navigating with the keyboard, focusable elements must feature a visible focus state.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-2"><label class="marketing-checkbox-label" for="theme-accessibility-2"><p style="margin-left:30px">All images require the `alt` attribute. Themes must use [`image.alt`](/docs/api/liquid/objects/image#image-alt) or [`image_url | image_tag: alt: string`](/docs/api/liquid/filters/image_tag#image_tag-alt) for product images.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-3"><label class="marketing-checkbox-label" for="theme-accessibility-3"><p style="margin-left:30px">Form inputs must have a unique ID, and labels with `for` attributes that match the input ID.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-4"><label class="marketing-checkbox-label" for="theme-accessibility-4"><p style="margin-left:30px">Themes must be built with valid HTML.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-6"><label class="marketing-checkbox-label" for="theme-accessibility-6"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-8"><label class="marketing-checkbox-label" for="theme-accessibility-8"><p style="margin-left:30px">Keyboard focus order must match the DOM order. Focus is expected to move top-bottom, left-right.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-9"><label class="marketing-checkbox-label" for="theme-accessibility-9"><p style="margin-left:30px">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](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-accessibility-10"><label class="marketing-checkbox-label" for="theme-accessibility-10"><p style="margin-left:30px">Headings `h1`-`h6` must be visually different from each other.</p>

Learn more about [accessibility best practices](/docs/storefronts/themes/best-practices/accessibility).

<a id="social_media"></a>

## 12. Social media

Social media links help merchant grow their followers.

All themes must meet the following requirements for social media:

<input class="marketing-checkbox" type="checkbox" id="theme-social-media-1"><label class="marketing-checkbox-label" for="theme-social-media-1"><p style="margin-left:30px">Must have a set of social media icons to choose from.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-social-media-2"><label class="marketing-checkbox-label" for="theme-social-media-2"><p style="margin-left:30px">Must contain [Open Graph](https://ogp.me/) and [Twitter card tags](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-social-media-3"><label class="marketing-checkbox-label" for="theme-social-media-3"><p style="margin-left:30px">Social media placeholder text must be left empty.</p>

<a id="settings"></a>

## 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

<input class="marketing-checkbox" type="checkbox" id="theme-pages-52"><label class="marketing-checkbox-label" for="theme-pages-52"><p style="margin-left:30px">All theme settings must adhere to the [style](#style-requirements) and [terminology](#terminology-requirements) requirements.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-64"><label class="marketing-checkbox-label" for="theme-pages-64"><p style="margin-left:30px">The setting labels and informational text for the theme must be grammatically correct and free of spelling errors.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-61"><label class="marketing-checkbox-label" for="theme-pages-61"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-58"><label class="marketing-checkbox-label" for="theme-pages-58"><p style="margin-left:30px">Must have a favicon setting.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-59"><label class="marketing-checkbox-label" for="theme-pages-59"><p style="margin-left:30px">Logo upload must work with images of different aspect ratios (for example, landscape or portrait).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-6"><label class="marketing-checkbox-label" for="theme-pages-6"><p style="margin-left:30px">All [settings](/docs/storefronts/themes/architecture/config/settings-schema-json) must have a `label`.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-62"><label class="marketing-checkbox-label" for="theme-pages-62"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-63"><label class="marketing-checkbox-label" for="theme-pages-63"><p style="margin-left:30px">When you supply a default value for resource-based settings such as product, the referenced resource must exist.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-66"><label class="marketing-checkbox-label" for="theme-pages-66"><p style="margin-left:30px">For [`metaobject`](/docs/storefronts/themes/architecture/settings/input-settings#metaobject) and [`metaobject_list`](/docs/storefronts/themes/architecture/settings/input-settings#metaobject_list) settings, only standard definitions can be used as `metaobject_type`. Custom or app-owned definitions cannot be used.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-pages-65"><label class="marketing-checkbox-label" for="theme-pages-65"><p style="margin-left:30px">Must have a [`theme_info`](/docs/storefronts/themes/architecture/config/settings-schema-json) section.</p>

### Theme editor event requirements

<input class="marketing-checkbox" type="checkbox" id="editor-event-1"><label class="marketing-checkbox-label" for="editor-event-1"><p style="margin-left:30px">Changes made in the theme editor must be reflected in the editor preview. Refer to [`request.design_mode`](/docs/api/liquid/objects/request#request-design_mode) for troubleshooting.</p>

### Style requirements

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-1"><label class="marketing-checkbox-label" for="theme-name-elements-1"><p style="margin-left:30px">Write section, preset, and category names in sentence case. Only capitalize the first word and proper nouns (like 'Facebook').</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-10"><label class="marketing-checkbox-label" for="theme-name-elements-10"><p style="margin-left:30px">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.</p>

<table style="margin-left:30px">
  <thead>
    <tr>
      <th>Use this</th>
      <th>Don't use this</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>Logo position on large screens<p>
        <ul>
          <li>Middle left</li>
          <li>Top left</li>
          <li>Top center</li>
        </ul>
      </td>
      <td>
        <p>Logo position on large screens<p>
        <ul>
          <li>Position 1</li>
          <li>Position 2</li>
          <li>Position 3</li>
        </ul>
      </td>
    </tr>
      <td>
        <p>Theme sections<p>
        <ul>
          <li>Collage</li>
          <li>Image banner</li>
          <li>Image with text</li>
        </ul>
      </td>
      <td>
        <p>Theme sections<p>
        <ul>
          <li>Image 1</li>
          <li>Image 2</li>
          <li>Image 3</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-11"><label class="marketing-checkbox-label" for="theme-name-elements-11">
<p style="margin-left:30px">
   Use language that's intuitive and easy to understand for all merchants. For example:

   <ul style="margin-left:30px">
      <li>Use "Horizontal position" or "Vertical position" instead of "X position" or "Y position".</li>
      <li>Use "Button label" instead of "CTA label".</li>
   </ul>
</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-2"><label class="marketing-checkbox-label" for="theme-name-elements-2"><p style="margin-left:30px">Use American English.</p>

<table style="margin-left:30px">
  <thead>
    <tr>
      <th>Use this</th>
      <th>Don't use this</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>canceled</strong></td>
      <td>cancelled</td>
    </tr>
    <tr>
      <td><strong>catalog</strong></td>
      <td>catalogue</td>
    </tr>
    <tr>
      <td><strong>center, centered</strong></td>
      <td>centre, centred</td>
    </tr>
    <tr>
      <td><strong>color</strong></td>
      <td>colour</td>
    </tr>
    <tr>
      <td><strong>customize</strong></td>
      <td>customise</td>
    </tr>
    <tr>
      <td><strong>dialog</strong></td>
      <td>dialogue</td>
    </tr>
    <tr>
      <td><strong>gray</strong></td>
      <td>grey</td>
    </tr>
    <tr>
      <td><strong>organize</strong></td>
      <td>organise</td>
    </tr>
  </tbody>
</table>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-3"><label class="marketing-checkbox-label" for="theme-name-elements-3"><p style="margin-left:30px">Don't use ampersands ( **&** ).</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-4"><label class="marketing-checkbox-label" for="theme-name-elements-4"><p style="margin-left:30px">Use declarative statements instead of questions.</p>

<table style="margin-left:30px">
  <tr>
    <th>Use this</th>
    <th>Don't use this</th>
  </tr>
  <tr>
    <td><strong>Use a custom logo</strong></td>
    <td>Use a custom logo?</td>
  </tr>
</table>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-5"><label class="marketing-checkbox-label" for="theme-name-elements-5"><p style="margin-left:30px">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'.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-6"><label class="marketing-checkbox-label" for="theme-name-elements-6"><p style="margin-left:30px">Use active voice.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-7"><label class="marketing-checkbox-label" for="theme-name-elements-7"><p style="margin-left:30px">All buttons and actions must start with a verb.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-8"><label class="marketing-checkbox-label" for="theme-name-elements-8"><p style="margin-left:30px">All technical specifications follow these formats:</p>

<table style="margin-left:30px">
  <thead>
    <tr>
      <th>Technical specification</th>
      <th>Format</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Image size</td>
      <td>[numeral] x [numeral]px (required/recommended)</td>
      <td>64 x 64px required</td>
    </tr>
    <tr>
      <td>Image size with format</td>
      <td>[numeral] x [numeral]px [.format] (required/recommended)</td>
      <td>1200 x 300px .jpg recommended</td>
    </tr>
      <tr>
      <td>Word / character count</td>
      <td>[numeral] words (max)</td>
      <td>32 words max</td>
    </tr>
    <tr>
      <td>Text format</td>
      <td>Use basic HTML to format text</td>
      <td></td>
    </tr>
  </tbody>
</table>

<a id="terminology-requirements"></a>

### Terminology requirements

<input class="marketing-checkbox" type="checkbox" id="theme-name-elements-9"><label class="marketing-checkbox-label" for="theme-name-elements-9"><p style="margin-left:30px">Use the following Shopify terminology throughout your theme:</p>

<table style="margin-left:30px">
  <thead>
    <tr>
      <th style="width:50%">Use this</th>
      <th>Don’t use this</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>home page</strong></td>
      <td>homepage</td>
    </tr>
    <tr>
      <td><strong>top bar</strong></td>
      <td>meta-nav, search bar</td>
    </tr>
    <tr>
      <td><strong>bottom bar</strong></td>
      <td>below footer, legal </td>
    </tr>
    <tr>
      <td><strong>slideshow</strong></td>
      <td>slider</td>
    </tr>
    <tr>
      <td><strong>checkout</strong><br>
      (when naming settings)</td>
      <td>check out</td>
    </tr>
    <tr>
      <td><strong>heading</strong></td>
      <td>title</td>
    </tr>
    <tr>
      <td><strong>subheading</strong></td>
      <td>sub-heading</td>
    </tr>
    <tr>
      <td><strong>body text</strong></td>
      <td>main text</td>
    </tr>
    <tr>
      <td><strong>signup</strong></td>
      <td>sign-up, sign up</td>
    </tr>
    <tr>
      <td><strong>favicon</strong></td>
      <td>shortcut icon, website icon</td>
    </tr>
    <tr>
      <td><strong>sidebar</strong></td>
      <td>side bar</td>
    </tr>
    <tr>
      <td><strong>button label</strong></td>
      <td>button name</td>
    </tr>
    <tr>
      <td><strong>social media</strong><br>
      (when naming sections or settings)</td>
      <td>social, social sharing</td>
    </tr>
    <tr>
      <td><strong>social media icons</strong></td>
      <td>social media buttons</td>
    </tr>
    <tr>
      <td><strong>navigation</strong><br />(to refer to all navigational elements)</td>
      <td>menus, menu</td>
    </tr>
    <tr>
      <td><strong>main menu</strong><br />(to refer to primary navigational element)</td>
      <td>navigation, menu</td>
    </tr>
    <tr>
      <td><strong>secondary menu</strong><br />(to refer to secondary navigational element)</td>
      <td>navigation, menu</td>
    </tr>
    <tr>
      <td><strong>footer menu</strong><br>(to refer to a menu located in the footer)</td>
      <td>navigation, menu</td>
    </tr>
    <tr>
      <td><strong>cart type</strong><br> (with "drawer", "page", and/or "modal" options)</td>
      <td>Ajax, Ajaxify, Ajax cart</td>
    </tr>
    <tr>
      <td><strong>.png</strong></td>
      <td>PNG, png, .PNG</td>
    </tr>
    <tr>
      <td><strong>use</strong><br />(for actionable options that include a next step, such as uploading a file)</td>
      <td>show, enable</td>
    </tr>
    <tr>
      <td><strong>show</strong><br />(for options that allow the merchant to show or hide a basic element)</td>
      <td>use, enable</td>
    </tr>
    <tr>
      <td><strong>enable</strong><br />(for options related to apps or plugins, or something that will significantly modify the theme layout)</td>
      <td>use, show</td>
    </tr>
  </tbody>
</table>

### 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 example](/assets/themes/store/dawn-section.png)

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](/docs/storefronts/themes/store/requirements#terminology-requirements) to make sure that you name sections using the right Shopify terms.

#### Suggested section names

- Header
- Featured products
- Featured collections
- Slideshow
- Image gallery
- Logo list
- Newsletter
- Map
- Blog posts
- Testimonials
- Footer

### Preset name guidelines

Section presets are predefined configurations of sections that merchants start with when adding content.

![Section preset example](/assets/themes/store/dawn-preset.png)

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](/docs/storefronts/themes/store/requirements#terminology-requirements) to make sure that you name presets using the right Shopify terms.

#### Content placeholders

If your preset features images, videos, or icons, then you should display [placeholder content](https://www.shopify.com/ca/partners/blog/placeholder-images) 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:

<table>
  <tr>
    <th>Type of content</th>
    <th>Placeholder</th>
  </tr>
  <tr>
    <td>
      Images that aren't products or collections<br>
      Adjacent images without margins
    </td>
    <td>Image icon</td>
  </tr>
  <tr>
    <td>Lists of logos</td>
    <td>Logo icon</td>
  </tr>
  <tr>
    <td>
      Slideshows<br>
      Images with overlaid text<br>
      Full-width images
    </td>
    <td>Lifestyle image</td>
  </tr>
  <tr>
    <td>Videos</td>
    <td><a href="https://www.youtube.com/watch?v=_9VUPq3SxOc">Default YouTube video ID</a></td>
  </tr>
</table>

<a id="design-ux"></a>

## 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](/docs/storefronts/themes/best-practices/design).

Use the following rubric as a guide to better design your custom theme builds.

### Art direction

Your theme should have a clear and consistent visual appeal which conveys a message to its target demographic.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            The design is intentional, well thought out, and follows a logical pattern.
            </span>
         </li>
         <li>
            <span>
            Icon sets are consistent and well designed.
            </span>
         </li>
         <li>
            <span>
            Logo is well designed and scales effectively to multiple sizes.
            </span>
         </li>
         <li>
            <span>
            Color system is robust and easy to customize without harming the aesthetic or legibility of isolated components. There is a good level of flexibility for merchants to customize their color palette without the task being overly complex.
            </span>
         </li>
         </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Instances of inconsistency.
            </span>
         </li>
         <li>
            <span>
            Images aren't as high quality as they could be.
            </span>
         </li>
         <li>
            <span>
            Logo resolution isn't up to preferred standards.
            </span>
         </li>
         <li>
            <span>
            Icons lack consistency or don't match the overall design of the theme.
            </span>
         </li>
         <li>
            <span>
            The theme's color system could be simplified further.
            </span>
         </li>
         </ul>
         </td>
      </tr>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Several inconsistencies make the design decisions seem unintentional.
            </span>
         </li>
         <li>
            <span>
            Poor image quality.
            </span>
         </li>
         <li>
            <span>
            Logo resolution isn't up to preferred standards.
            </span>
         </li>
         <li>
            <span>
            Icons aren't consistent or don't match the overall design of the theme.
            </span>
         </li>
         <li>
            <span>
            The theme's color system is too complex, rigid, or difficult to customize without harming the legibility and visual balance.
            </span>
         </li>
         </ul>
         </td>
      </tr>
     </tr>
   </tbody>
</table>

### Layout

Your theme should have a good flow of content, hierarchy, balance, contrast, white space, responsiveness, grid, and alignment.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            Provides a clear path for navigation between pages and emphasizes the most important elements of the store.
            </span>
         </li>
         <li>
            <span>
            Balanced and well-defined grid.
            </span>
         </li>
         <li>
            <span>
            White space is thoughtfully applied.
            </span>
         </li>
         <li>
            <span>
            All elements adhere to a grid.
            </span>
         </li>
         <li>
            <span>
            All unrelated elements are easily distinguished from each other.
            </span>
         </li>
         <li>
            <span>
            Clear hierarchy for how primary and secondary information is displayed.
            </span>
         </li>
         <li>
            <span>
            Design patterns scale in a way that makes sense across small and large screens.
            </span>
         </li>
         </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Unbalanced grid.
            </span>
         </li>
         <li>
            <span>
            Too much or too little white space is used.
            </span>
         </li>
         <li>
            <span>
            Only some elements adhere to a grid.
            </span>
         </li>
         <li>
            <span>
            Elements are easily confused with each other.
            </span>
         </li>
         <li>
            <span>
            Unclear hierarchy for displaying primary and secondary information.
            </span>
         </li>
         <li>
            <span>
            Design patterns don't scale correctly across small and large screens.
            </span>
         </li>
         </ul>
         </td>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Elements are placed outside the grid in a way that affects scaling to smaller screen formats.
            </span>
         </li>
         <li>
            <span>
            Content is unbalanced and disproportionate.
            </span>
         </li>
         <li>
            <span>
            Whitespace is used in excess or is lacking to a degree that disrupts flow.
            </span>
         </li>
         </ul>
         </td>
     </tr>
   </tbody>
</table>

### Consistency

Your theme design elements should be consistent across all pages.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            Consistency across spacing, icon style, image quality, typography, and color.
            </span>
         </li>
         </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Inconsistency across one or more sections, spacing, icon style, image quality, typography, or color.
            </span>
         </li>
         </ul>
         </td>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Critical inconsistency across one or more sections, spacing, icon style, image quality, typography, or color.
            </span>
         </li>
         </ul>
         </td>
     </tr>
   </tbody>
</table>

### 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.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            Color contrast between elements is clearly defined.
            </span>
         </li>
         <li>
            <span>
            Touch targets are clearly defined and not in conflict with each other.
            </span>
         </li>
         <li>
            <span>
            Inputs are easily identifiable.
            </span>
         </li>
         <li>
            <span>
            Excludes the use of justified text as default.
            </span>
         </li>
         </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Purchase flow is unclear or complex.
            </span>
         </li>
         <li>
            <span>
            Product options aren't very obvious or visible.
            </span>
         </li>
         <li>
            <span>
            Inputs aren't easily identifiable.
            </span>
         </li>
         <li>
            <span>
            Some friction within the customer experience when shopping for a product/service.
            </span>
         </li>
         </ul>
         </td>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Purchase flow is very unclear or overly complex.
            </span>
         </li>
         <li>
            <span>
            Product options aren't obvious or visible.
            </span>
         </li>
         <li>
            <span>
            Inputs aren't identifiable.
            </span>
         </li>
         <li>
            <span>
            High friction within the customer experience when shopping for a product/service.
            </span>
         </li>
         </ul>
         </td>
     </tr>
   </tbody>
</table>

### Customer UX

Your theme should provide a clear purchase flow through the collection, product, and cart pages.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            Purchase flow is clear and unobstructed.
            </span>
         </li>
         <li>
            <span>
            Product options are obvious and visible.
            </span>
         </li>
         <li>
            <span>
            Inputs are easily identifiable.
            </span>
         </li>
         <li>
            <span>
            A frictionless customer experience when shopping for a product/service.
            </span>
         </li>
         <li>
            <span>
            Products are recommend for customers.
            </span>
         </li>
         <li>
            <span>
            Theme provides brand awareness (Blogs, etc.).
            </span>
         </li>
         <li>
            <span>
            Customers can:
            </span>
            <ul>
            <li>
               <span>
               Navigate the merchant's site with ease.
               </span>
            </li>
            <li>
               <span>
               Search meaningfully for desired products (Discovery).
               </span>
            </li>
            <li>
               <span>
               Interact with products/services (Featured content/collections/product pages).
               </span>
            </li>
            <li>
               <span>
               Add/change/remove products with a comprehensive cart system (cart modal/page).
               </span>
            </li>
            <li>
               <span>
               Proceed to checkout in a clear path.
               </span>
            </li>
            </ul>
            </li>
          </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            The theme settings are too complex.
            </span>
         </li>
         <li>
            <span>
            Risk of the merchant becoming confused or frustrated.
            </span>
         </li>
         </ul>
         </td>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Overly complex theme settings.
            </span>
         </li>
         <li>
            <span>
            High risk of the merchant becoming confused or frustrated.
            </span>
         </li>
         </ul>
         </td>
     </tr>
   </tbody>
</table>

### Merchant UX

Your theme should have clear and simple options for merchants to customize the look and feel of their shop.

<table>
   <thead>
      <tr>
         <th scope="col">Score</th>
         <th scope="col">Description</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td width="30%"><b>Meets requirements</b></td>
         <td>
         <ul>
         <li>
            <span>
            A good balance between opinionated theme settings and flexibility.
            </span>
         </li>
         <li>
            <span>
            Designed with the merchant experience in mind.
            </span>
         </li>
         </ul>
         </td>
      </tr>
      <tr>
         <td width="30%"><b>Improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            Little balance between opinionated theme settings and flexibility.
            </span>
         </li>
         <li>
            <span>
            Rarely designed with the merchant experience in mind.
            </span>
         </li>
         </ul>
         </td>
     </tr>
      <tr>
         <td width="30%"><b>Critical improvement needed</b></td>
         <td>
         <ul>
         <li>
            <span>
            No balance between opinionated theme settings and flexibility.
            </span>
         </li>
         <li>
            <span>
            Not designed with the merchant experience in mind.
            </span>
         </li>
         </ul>
         </td>
     </tr>
   </tbody>
</table>

<a id="font-picker"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="font-picker-1"><label class="marketing-checkbox-label" for="font-picker-1"><p style="margin-left:30px">All fonts must use the setting type [font_picker](/docs/themes/architecture/settings/input-settings#font_picker).</p>

<input class="marketing-checkbox" type="checkbox" id="font-picker-2"><label class="marketing-checkbox-label" for="font-picker-2"><p style="margin-left:30px">A default font is loaded. For example, `default: work_sans_n6`.</p>

<input class="marketing-checkbox" type="checkbox" id="font-picker-3"><label class="marketing-checkbox-label" for="font-picker-3"><p style="margin-left:30px">Fonts used in defaults and presets must use a currently [available font](/docs/storefronts/themes/architecture/settings/fonts#available-fonts).</p>

<input class="marketing-checkbox" type="checkbox" id="font-picker-4"><label class="marketing-checkbox-label" for="font-picker-4"><p style="margin-left:30px">The CSS file loads bold, italic, and bold-italic variants for each font using the `font_modify` filter.</p>

<input class="marketing-checkbox" type="checkbox" id="font-picker-5"><label class="marketing-checkbox-label" for="font-picker-5"><p style="margin-left:30px">Custom fonts aren't accepted.</p>

Learn more about [setting fonts](/docs/storefronts/themes/architecture/settings/fonts).

<a id="color-system"></a>

## 16. Color system

Selecting the right foreground and background colors enhances the effectiveness of your theme.

<input class="marketing-checkbox" type="checkbox" id="theme-color-system-1"><label class="marketing-checkbox-label" for="theme-color-system-1"><p style="margin-left:30px">A minimum of 4 colors are required.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-color-system-2"><label class="marketing-checkbox-label" for="theme-color-system-2"><p style="margin-left:30px">All background color settings must include a corresponding foreground color setting.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-color-system-3"><label class="marketing-checkbox-label" for="theme-color-system-3"><p style="margin-left:30px">Color settings must use a `type` of `color`.</p>

Learn more about [color system best practices](/docs/storefronts/themes/best-practices/design/color-system).

<a id="responsive-images"></a>

## 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:

<input class="marketing-checkbox" type="checkbox" id="responsive-images-1"><label class="marketing-checkbox-label" for="responsive-images-1"><p style="margin-left:30px">Images must adopt a responsive image strategy. Small images such as icons are an exception.</p>

<input class="marketing-checkbox" type="checkbox" id="responsive-images-2"><label class="marketing-checkbox-label" for="responsive-images-2"><p style="margin-left:30px">Images must load only as they are needed to minimize the number of images loaded initially per page.</p>

<a id="naming-themes"></a>

## 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

<input class="marketing-checkbox" type="checkbox" id="theme-name-1"><label class="marketing-checkbox-label" for="theme-name-1"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-2"><label class="marketing-checkbox-label" for="theme-name-2"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-3"><label class="marketing-checkbox-label" for="theme-name-3"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-4"><label class="marketing-checkbox-label" for="theme-name-4"><p style="margin-left:30px">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.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-5"><label class="marketing-checkbox-label" for="theme-name-5"><p style="margin-left:30px">Theme and theme style names must contain 14 characters or fewer.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-name-6"><label class="marketing-checkbox-label" for="theme-name-6"><p style="margin-left:30px">Theme names must be unique and distinct from existing themes in the Shopify Theme Store to avoid confusion or conflicts.</p>


### 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

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

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.

<a id="theme-versions-and-release-notes"></a>

## 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](/docs/storefronts/themes/store/success/updates#versioning) and [release notes](/docs/storefronts/themes/store/success/updates#release-notes) that highlight the main features of the version.

<a id="demo-stores"></a>

## 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](/docs/storefronts/themes/tools/development-stores) 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

<input class="marketing-checkbox" type="checkbox" id="demo-stores-1"><label class="marketing-checkbox-label" for="demo-stores-1"><p style="margin-left:30px">All themes must include at least one demo store.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-8"><label class="marketing-checkbox-label" for="demo-stores-8"><p style="margin-left:30px">Each preset requires a demo store. You can use up to 5 demo stores for each theme.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-2"><label class="marketing-checkbox-label" for="demo-stores-2"><p style="margin-left:30px">Each demo store has the [Bogus Gateway](https://help.shopify.com/manual/checkout-settings/test-orders#place-a-test-order-by-simulating-a-transaction) or Shopify Payments [test mode](https://help.shopify.com/manual/payments/shopify-payments/testing-shopify-payments#test-mode) enabled, and all other checkout options disabled.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-3"><label class="marketing-checkbox-label" for="demo-stores-3"><p style="margin-left:30px">All demo store pages must use authentic text content. Don't use Lorem Ipsum or onboarding text. Don't include profanities.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-4"><label class="marketing-checkbox-label" for="demo-stores-4"><p style="margin-left:30px">The [`powered_by_link`](/docs/api/liquid/objects/powered_by_link) link can't be altered and must contain only `powered_by_link`.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-5"><label class="marketing-checkbox-label" for="demo-stores-5"><p style="margin-left:30px">Affiliate linking isn't allowed.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-6"><label class="marketing-checkbox-label" for="demo-stores-6"><p style="margin-left:30px">Any link in the code that points to one of Shopify's domains must include a `rel="nofollow"` attribute.</p>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-7"><label class="marketing-checkbox-label" for="demo-stores-7"><p style="margin-left:30px">To avoid potential merchant confusion, demo stores can only showcase elements and functionality that are built into the theme. For example:</p>
<ul style="margin-left:30px">
<li>Don't use embedded text or buttons in images, except for the text on physical products, infographics, badges, or instagram images.</li>
<li>Don't use animated gif images in places where they can be mistaken for theme functionality.</li>
<li>Don't use apps. In some cases, special consideration applies to free product review apps and [free translation apps](https://apps.shopify.com/categories/store-design-internationalization). If you're showcasing multi-language options using translation apps, then all content must be translated.</li>
</ul>

<input class="marketing-checkbox" type="checkbox" id="demo-stores-9"><label class="marketing-checkbox-label" for="demo-stores-9"><p style="margin-left:30px">You must obtain the appropriate rights for all demo store assets in accordance with the [Shopify Partner Agreement](https://www.shopify.com/ca/partners/terms#:~:text=Each%20Theme%20Developer,any%20third%20party.). Before using any brand names, images, or content, permission must be directly granted by the brand owners. <br><br>If you’re looking for a good source of royalty-free images, then try <a href="https://burst.shopify.com/">Shopify Burst</a>.</br></p>

### 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.

<a id="documentation-and-contact-forms"></a>

## 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

<input class="marketing-checkbox" type="checkbox" id="theme-documentation-1"><label class="marketing-checkbox-label" for="theme-documentation-1"><p style="margin-left:30px">You must provide theme documentation and a public support contact form.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-documentation-2"><label class="marketing-checkbox-label" for="theme-documentation-2"><p style="margin-left:30px">You must have your theme documentation and contact form ready before launching your theme.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-documentation-3"><label class="marketing-checkbox-label" for="theme-documentation-3"><p style="margin-left:30px">You must link your documentation and contact form to your theme listing page in the Shopify Theme Store.</p>

### Merchant-facing theme documentation

<input class="marketing-checkbox" type="checkbox" id="theme-documentation-4"><label class="marketing-checkbox-label" for="theme-documentation-4"><p style="margin-left:30px">The copy for all theme documentation must be grammatically correct and free of spelling errors.</p>

<input class="marketing-checkbox" type="checkbox" id="theme-documentation-5"><label class="marketing-checkbox-label" for="theme-documentation-5"><p style="margin-left:30px">The theme documentation must be consistent with the copy in the theme settings.</p>

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

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](/docs/storefronts/themes/store/requirements#merchant-support-requirements). 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 two-column MDX 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](https://www.shopify.com/partners/directory) for help.

### 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.

<table>
  <thead>
     <tr>
        <th width="40%"; scope="col">Field</th>
        <th scope="col">Guideline</th>
     </tr>
  </thead>
  <tbody>
     <tr>
        <td>(First and Last) Name Field</td>
        <td></td>
     </tr>
     <tr>
        <td>Email Address Field</td>
        <td></td>
     </tr>
     <tr>
        <td>Store URL Field</td>
        <td>Include an example URL for clarity, such as http://www.storename.myshopify.com.</td>
     </tr>
     <tr>
        <td>Description of Problem Field</td>
        <td>This should be a text-area field.</td>
     </tr>
     <tr>
        <td>File Upload Function</td>
        <td>Allow merchants to highlight their issues with images.</td>
     </tr>
     <tr>
        <td>Auto-responder Function</td>
        <td>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.</td>
     </tr>
     <tr>
        <td>Theme Name</td>
        <td>Provide the theme name if you offer multiple themes.</td>
     </tr>
     <tr>
        <td>Subject</td>
        <td>If you include this field, then it should auto populate the email subject line.</td>
     </tr>
  </tbody>
</table>

<a id="supporting-your-theme"></a>

## 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](#contact-forms), which you should link to from the Shopify Theme Store and your theme documentation.

### Merchant support requirements

<input class="marketing-checkbox" type="checkbox" id="themes-support-1"><label class="marketing-checkbox-label" for="themes-support-1">You must assist merchants with their theme-related questions.</p>

<input class="marketing-checkbox" type="checkbox" id="themes-support-2"><label class="marketing-checkbox-label" for="themes-support-2">You must reply to support requests from merchants within two business days.</p>

<input class="marketing-checkbox" type="checkbox" id="themes-support-3"><label class="marketing-checkbox-label" for="themes-support-3">If there is a technical issue with your theme, such as a broken layout, a dead link, or a logical error, then you're responsible for fixing the issue in a timely manner.</p>

<input class="marketing-checkbox" type="checkbox" id="themes-support-4"><label class="marketing-checkbox-label" for="themes-support-4">You must fix critical bugs immediately or your theme may be temporarily removed from the Theme Store.</p>

### 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.

<p style="text-align: center">"Merchant support is by far the most challenging part of being a Theme Partner"</p>

<p style="margin-left:60%">-- Archetype themes</p>

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.