10 Pitfalls Beginners Encounter in Shopify Theme Development and How to Overcome Them

How to break free

• Intend to transcribe the official guide: Shopify's official manual is the best textbook. Take your time, and try entering the commands one by one as written.
• If an error occurs, first search! : Don't panic if you see an error in red text! Just copy that text and ask Google, and you will usually find a hint.

How to get out of it

• A magic phrase: 'Display if there is content': Let's get into the habit of checking for existence with an `if` statement. This alone will significantly reduce errors.

{% if product.title %}
  <h1>{{ product.title }}</h1>
{% endif %}

• A safety net: 'Display this if not available': By using the `default` filter, you can display alternative text even if the data is empty.

{{ product.title | default: "No product name available" }}

How to break free

• Load it according to Shopify's rules: When loading CSS and JS files, always add `asset_url`. This signals Shopify, "I will use this file!"

{{ 'style.css' | asset_url | stylesheet_tag }}
{{ 'main.js' | asset_url | script_tag }}

• Create a "territory" in your code: To avoid conflicts with other apps' code, encapsulate your JavaScript in an immediately invoked function expression to keep it independent.

How to break out

• Let's break down the sample theme 'Dawn': The 'Dawn' theme provided by Shopify is the best example. Let's take a look at the code and try to mimic it.
• Try creating from super simple parts: First, creating a simple section like 'just a heading and text' is the quickest way to understand.

How to break out

• Use the magic that automatically changes the size of photos: By using Liquid's `img_url` filter, Shopify will automatically provide images in just the right size.

<img src="{{ product.featured_image | img_url: '450x450' }}">

• Lazy Loading of images: Just add `loading="lazy"` to the `` tag. This will speed up the page display.

How to escape

• Make it changeable from the admin panel: Call URLs from the `routes` object and frequently used text from the configuration file. You can easily make changes from the admin panel without touching the code.

How to escape

• Use Shopify's official integration feature: You can safely manage development and production themes with button operations.
• Just remember the basic commands: First, just remember `git commit` (save) and `git push` (upload)!

How to escape

• Prepare a 'try-on' theme: When trying out a new app, always copy (duplicate) your current theme first! If any issues arise, you can quickly revert back.
• Finding the culprit with the browser's 'Inspector Tool': By using the developer tools, you can find hints about which CSS or JavaScript is causing issues.

How to break free

• The magic spell that shows everything inside: Using the `json` filter will spill out all the contents of the data. It's the best when you want to check 'What kind of data can I use?'.
• Shopify's automatic check feature: Running the `shopify theme check` command will automatically tell you the mistakes and improvements needed in your theme.

How to break out

• Always think 'mobile first': During development, make it a habit to check the browser display in mobile size.
• Learn techniques to change appearance according to screen size: CSS media queries (`@media`) are essential knowledge for responsive design.