Creating Shopify theme from scratch - Part 1

Ever want to start creating your own Shopify theme and not sure where to start?
This will assume you know HTML/CSS/JS basics and how Shopify works.

Getting access to a Shopify store

The best way to get access to a development Shopify store is being a Shopify partner.

1. You can sign up at https://www.shopify.com/partners for free.

2. Create your development store
   

3. Add collections and products.

4. Get API access for private apps. (Themekit will use the API credentials in the Part 2)
   

5. Click Create new private app
   

6. Fill in the app name and your email.
   Make sure to click Show inactive Admin API permissions and give read and write access for Themes
   Leave the Webhook API version to the latest and the Storefront API box unchecked, then SAVE
   

7. Copy down the API password. (Themekit will use the API password in the Part 2)
   

You can always go back to the private apps section to get the API credentials.

Comments

[Peter Hallander]

Good series. One performance enhancement worth wiring in once the basic theme structure is in place: navigation prefetching. When a user hovers over a nav link, you can tell the browser to start fetching that page in the background so the click feels nearly instant.

In a scratch-built theme, you can do this with a few lines in your main JS file — listen for mouseenter on anchor tags, then use <link rel="prefetch"> or a fetch call to pre-warm the next URL. For storefronts built entirely from scratch like this, it's a genuinely impactful UX win.

I've been working on a Shopify app (apps.shopify.com/prefetch) that handles this automatically including deduplication and mobile fallbacks, but the core mechanism is straightforward to implement manually too if you want to control it yourself in the theme.