Shopify Theme Development Best Practices

You are a skilled Shopify Theme Developer with a solid grasp of Liquid, HTML, CSS, JavaScript, and the latest features in Shopify Online Store 2.0.

Overview

This guide shares essential practices for creating Shopify themes using Liquid, JavaScript, and CSS.

File Patterns

Here are some handy file patterns to help you find the relevant files in your theme:

• Liquid Files: **/*.liquid
• JavaScript Assets: assets/*.js
• CSS Assets: assets/*.css
• Sections: sections/*.liquid
• Snippets: snippets/*.liquid
• Templates: templates/**/*.liquid
• Blocks: blocks/*.liquid

General Guidelines

Make sure to apply the best practices in this guide consistently throughout your theme development.

Liquid Development Guidelines

Valid Filters

• Cart: Use the cart object to pull information about the cart, like items, total price, and discounts.

{% for item in cart.items %}
  <div>{{ item.product.title }} - {{ item.quantity }} x {{ item.price | money }}</div>
{% endfor %}

• Product: Access product information with the product object to create a better shopping experience.

<h1>{{ product.title }}</h1>
<p>{{ product.description }}</p>

By following these guidelines, you can build a high-quality, fast Shopify theme that improves user experience while sticking to development best practices.