Creating custom Shopify themes from scratch: hands-on, detailed.

/in /by

Creating a custom Shopify theme from scratch involves several steps that require a combination of skills in HTML, CSS, JavaScript, Liquid (Shopify’s templating language), and understanding Shopify’s structure. Below is a detailed, hands-on guide to help you get started.

Step 1: Set Up Your Development Environment

Before creating a custom Shopify theme, set up your development environment.

  1. Shopify Partner Account: If you don’t already have one, sign up for a Shopify Partner Account. This will allow you to create development stores, where you can test your theme without any cost.

  2. Install Shopify CLI: The Shopify CLI (Command Line Interface) makes it easier to work with Shopify themes. Follow these steps to install it:

  3. Create a Development Store: In your Shopify Partner Dashboard, create a development store. This will be the sandbox where you test your custom theme.

  4. Connect Shopify CLI to Your Store: Open your terminal and log in to your Shopify store by running:

    bash
    shopify login --store=your-store-name.myshopify.com

  5. Create a New Theme: Now, create a new theme project. This can be done by running:

    bash
    shopify theme init my-new-theme

    This will create a basic Shopify theme structure with the necessary directories and files.

Step 2: Understand the Shopify Theme Structure

A Shopify theme is organized into various directories and files. Here’s a breakdown of the most important components:

  1. Templates (/templates): These are the main structure files for each page of the store.

    • index.liquid: Homepage template

    • product.liquid: Product page template

    • collection.liquid: Collection page template

    • cart.liquid: Cart page template

  2. Sections (/sections): These are reusable parts of a page. For example, a homepage might have a hero section, featured products section, etc.

    • header.liquid: The header of your site

    • footer.liquid: The footer of your site

    • product-card.liquid: A reusable section for product cards

  3. Snippets (/snippets): These are smaller chunks of code that can be reused across the theme.

    • social-links.liquid: For social media links in the footer

    • currency-switcher.liquid: A currency selection dropdown

  4. Assets (/assets): All static files like images, JavaScript, and CSS files are stored here.

    • theme.scss.liquid: Main stylesheet

    • app.js: JavaScript file

  5. Config (/config): This contains settings related to your theme.

    • settings_schema.json: Defines the theme settings (e.g., color options, fonts)

    • settings_data.json: Stores the settings data.

  6. Locales (/locales): Translations for your theme.

    • en.default.json: English translations for your theme strings.

Step 3: Create the Basic Structure of Your Theme

Let’s create a very simple theme structure with HTML, CSS, and Liquid files.

Create theme.liquid

This is the main layout file for your Shopify store. It’s where you’ll include the HTML boilerplate, links to assets, and dynamic content with Liquid.

liquid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ shop.name }}</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
{{ content_for_header }}
<link href="{{ 'theme.css' | asset_url }}" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="{{ shop.url }}">Home</a></li>
<li><a href="/collections/all">Shop</a></li>
<li><a href="/cart">Cart</a></li>
</ul>
</nav>
</header>

<main>
{{ content_for_layout }}
</main>

<footer>
<p>&copy; {{ 'now' | date: "%Y" }} {{ shop.name }}. All rights reserved.</p>
</footer>

{{ content_for_footer }}
<script src="{{ 'app.js' | asset_url }}"></script>
</body>
</html>

Create theme.css.liquid

Your theme’s stylesheet will be stored here.

scss
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}

header {
background: #333;
padding: 20px;
}

header nav ul {
list-style: none;
padding: 0;
}

header nav ul li {
display: inline;
margin-right: 20px;
}

header nav ul li a {
color: #fff;
text-decoration: none;
}

Step 4: Customize the Theme

Add a Product Listing Page

To display products on the store’s homepage, you can use a section to fetch products.

Create a new section file: sections/product-listing.liquid

liquid
{% section 'product-listing' %}

Inside the sections/product-listing.liquid file:

liquid
<div class="product-list">
{% for product in collections.frontpage.products %}
<div class="product-card">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
<a href="{{ product.url }}">View Product</a>
</div>
{% endfor %}
</div>

Style the Product List

In theme.css.liquid, add styles for the product listing:

scss
.product-list {
display: flex;
flex-wrap: wrap;
}

.product-card {
border: 1px solid #ddd;
margin: 10px;
padding: 10px;
width: 200px;
}

.product-card img {
max-width: 100%;
height: auto;
}

Step 5: Add Dynamic Content Using Liquid

Shopify’s Liquid language allows you to inject dynamic content from the store.

  • {{ shop.name }}: Displays the store name.

  • {{ product.title }}: Displays a product’s title.

  • {{ product.price | money }}: Displays the product price formatted as currency.

Step 6: Test and Iterate

To test your theme, you can use the Shopify CLI to push your changes to the development store.

  1. Start the theme server:

    bash
    shopify theme serve

    This will allow you to preview your theme live as you make changes.

  2. Push the theme to Shopify:

    bash
    shopify theme push

  3. View it live: Once the theme is pushed, you can see the changes on your development store.

Step 7: Finalize and Deploy

Once you’re satisfied with your theme, you can deploy it to a live Shopify store by following the steps to publish it through the Shopify admin.

Additional Tips:

  • Responsive Design: Make sure your theme is responsive, using CSS media queries to adapt to various screen sizes.

  • Custom Sections and Settings: Shopify’s theme editor allows merchants to customize content without writing code. You can add customizable sections and settings by defining them in settings_schema.json and linking them in the theme.liquid file.

  • Performance Optimization: Minimize image sizes, use lazy loading for images, and optimize JavaScript to enhance performance.

This is a basic guide to getting started with building a custom Shopify theme from scratch. There are plenty of resources and tutorials online to dive deeper into more advanced Shopify theming, but this should help you set up your first theme and start customizing it based on your needs.