Build a Shopify theme and make money

Every month over a thousand people sign up for Shopify and are looking for beautiful themes

  • Pricing & Payment

    Your theme must be free or priced over $80 and rounded to the nearest ten ($200 or $120 are acceptable but not $99). You will receive 50% of the profits. You will receive 70% (an additional 20%) of each sale if you agree to provide full support for your theme. Payments will be made via your Shopify Partners Account.

  • Support

    If there is a technical issue with your theme (broken layout, dead link, logic error etc) you will be responsible for fixing the issue. Any other support is either handled by Shopify or by yourself depending on the revenue share percentage you're choosing when submitting a theme.

  • The Review Process

    Your theme will be reviewed by Shopify. It may take up to a week to get your theme processed. Before submitting, please make sure that your theme meets all of the requirements outlined in our Theme Review Checklist. We also encourage you to send your mock ups to . If your mock ups get the thumbs up, it does not guarantee that your fully-coded theme will be approved. There is significant work involved in turning an awesome mock up into an awesome theme.


Presets

You can have up to 4 presets. They can’t be simple color change, they must be unique.

Screenshots

In the screenshots, show the entire theme and use different product images and slides for each preset.


  • Creating a demo store

    Your theme requires at least one demo store. Go into the Referrals area of your partners account and click "create affiliate store". An affiliate store will let you develop a store with a 10 SKU restriction. Once you are close to finishing the theme send an email to with your store name so we can upgrade your plan to a demo store account (removes the 10 SKU restriction).
  • Editing your theme after you submitted it

    After you submit your theme you will see it appear in your partners account under the tab "Themes". From there you can edit your theme's details (including screenshots and price) or upload a new .zip. If you want to add more presets to your theme then just upload a new .zip.


The Theme Review Checklist

Your theme must pass all of the requirements outlined in our Theme Review Checklist in order to be accepted.


Theme Guidelines

  • 01Upload a logo

    A shop owner must be able to upload their logo or if they don’t have a logo generate text with the {{ store.name }} object. Create a theme settings form to do this.

  • 02Don't violate copyright

    No copyrighted material should be distributed with the themes

  • 03Cross browser compatible

    The theme must be visually pleasing in IE7-IE9, Firefox, Chrome and Safari.

  • 044 presets max

    You can have a maximum of 4 theme presets. You must set up a demo store for at least 1 theme. Presets should be unique and easily distinguishable from other presets.

  • 05Make it easy to customize

    Make it as easy as possible for users to customize your theme. Don't overload them with theme settings

  • 06Focus on aesthetics

    Make your theme as aesthetically pleasing as possible! Quality not quantity. We endeavour to maintain the highest standards possible for our theme store. Note that our design standards are quite unique and subjective.

  • 07Make it unique

    Make your theme stand out from your competition. If it is too similiar to another theme, it may not be published.

  • 08Design efficiently

    Your theme should load quickly and liquid should be written efficiently to avoid situations like looping through the entire inventory of products.

The Review Process

CSS/HTML

  • Cross browser compatibility

    Make sure you check that all CSS/HTML renders correctly and consistently across IE7-9, Firefox, Chrome, and Safari. Make sure the site is functional in ie6 - it doesn't have to be aesthetically perfect.

  • Style common tags

    Make sure ol, ul, blockquotes, h1, h2, h3, etc are all styled. Make sure those are styled the same way across all content generated with the Rich Text Editor. This means that the same HTML should look identical whether it is part of a product description, a blog post, a collection description, or a page. Also, each demo shop should have a Styles page, to showcase how HTML elements are styled by the theme.

Presets

  • Uploaded images should not break your layout

    You must be able to upload logos of all sizes without breaking the layout. Same goes for slideshow images, banners, etc (tip: use data-max-width="" or data-max-height="")
  • Use the asset URL when pointing to any image in your stylesheets

    Use the asset_url filter for each url, even those not pointing to files uploaded via the theme settings. This is to prevent caching problems caused by our Content Delivery Network (CDN). There is no hit in performance in your adding plenty of Liquid to your stylesheets. Liquid assets are rebuilt only when a shop-owner makes an edit to his theme. Once built, assets are cached on our CDN. Use the asset_url filter like so:
                    background: url( {{'background.jpg' | asset_url }}) 
                  

Content

  • User can upload a decently sized logo

    Automatically resize the logo using max-data-width and max-data-height, but try to give the user as much flexibility as you can when you upload a logo.
  • Nav doesn't break when too many links are added

    Your linklists/navigations shouldn't break the layout if the user adds too many links.

  • Theme can handle different product aspect ratios

    Your theme should handle both landscape and portrait oriented images.
  • Avoid fixed limits

    Avoid placing numeric limits on things like # images or link lists
  • No dead ends

    If there isn't any content to view then ensure your theme gives the end user the appropriate message. For instance, if there are no search results for the user's search term than display a message similar to "We couldn't find any products with your search term"
  • All templates are styled

    Make sure you style each of the liquid templates including 404 and Search. Make sure that customer accounts screens are styled and that all your presets use the 'theme' layout by default.
  • Compare price is enabled

    Make sure your product.liquid has the appropriate code to render "compare price".
  • Covers all product combinations

    There are 3 types of products in Shopify: products with variants, products with multiple options, and products with 1 variant. A theme must render all types using something similiar to:
                    {% if product.variants.size > 1  %}
                    <em>There are more than 1 variants, let's show dropdown(s)</em>  
    
                    {% else %}      
                    <em>If there is only one variant, let's use a hidden input field  </em>
    
                    {% endif %}
                  
  • Removable attributions if it's a paid theme

    If you include "Designed by..." or "Made by..." in your footer then please make it removable if your theme is paid.
  • Attribute Shopify

    Every theme must have {{ powered_by_link }} in the footer area, it doesn't have to be prominently placed. Do not provide a theme setting to turn off that Shopify credit.
  • Additional checkout buttons code snippet is there

    The code below will render 3rd party offsite payment gateway buttons on the cart page, like a PayPal button (if the merchant is using PayPal Express then PayPal requires the button to show up)
                    {% if additional_checkout_buttons %}
                      {{ content_for_additional_checkout_buttons }}
                    {% endif %}
                  
  • Checkout pages are styled and show the shop logo when appropriate

    Upload a checkout.css.liquid file to your theme assets. In that file, use the store logo if it is active in the theme settings. Also apply the same background color, background image, and typographic treatment as applied pre-checkout. Try and provide a seamless checkout experience.
  • Your theme supports customer accounts

    Make sure that customer accounts links are visible on the store front, and that each customer account screen looks great within the theme layout. Each preset should be saved with the theme layout applied to customer accounts screens. This means that your config/settings_data.json file should contain this line of code for each preset:
                    "customer_layout": "theme",
                  
  • Your theme contains social sharing buttons and links

    Your theme settings should let a shop-owner easily post a link to his Facebook, Twitter, YouTube, Flickr, Vimeo, etc. pages. Use icons for those links for them to be easily found on the page. Also, make sure that the theme lets visitors share content, including products and blog posts, using Twitter, Facebook, etc.
  • Your theme can display methods of payment

    Make sure that your theme lets a shop-owner easily display his chosen methods of payments by the way of icons in the footer. Create a theme setting for each of the most commonly used methods of payment (Visa, Paypal, etc) so that they can be turned on and off on an individual basis.

The Default Install

  • Nav doesn't break when too many links are added

    When a customer installs your theme they should not see any blank areas or be confused on how they can populate certain areas. If your theme relies on the user creating a linklist, page, collections then make sure your theme instructs them to create supplementary content.

  • Don't use an image logo - use the shop.name text instead

    When a user first installs a theme - they shouldn't see the demo store logo, but the store's shop.name instead.

  • Can a new user use the theme?

    Always keep in mind that the user is probably brand new to Shopify so make sure your theme is as easy to customize as possible.

  • Only use existing store data

    If your theme relies on the user creating additional content (like a new collection) then please only use the default Shopify content when a user first installs a theme. For example if I give the user the option to include 2 pages on their homepage my index.liquid might look something like this...


                    {% if settings.frontpage_right and settings.frontpage_left != empty %}
                      <ul class="two-pages clearfix">
                      <li>{{ pages[settings.col_left].content}}</li>
                      <li>{{ pages[settings.col_right].content}}</li>
                      </ul>
                    {% endif %}
                  

    Your theme settings form will look like this:
                    <tr>
                      <td><label for="col_left">What is left column page?</label></td>
                      <td><select class="page" name="col_left" /></td>
                    </tr>
    
                    <tr>
                      <td><label for="col_right">What is right column page?</label></td>
                      <td><select class="page" name="col_right" /></td>
                    </tr>
                  


    Notice how I picked the welcome page and the about us page - both of which come with the default Shopify install.

    Don't worry if you use reuse the same linklist/collection/etc multiple times on your store. You can read more about Theme Settings here.

Questions?