How to get Started as a Shopify Developer

I recently developed a Shopify site for a client, and while there was a bit of a learning curve, I found the developer experience to actually be pretty great! If you're interested on getting started as a Shopify developer, keep reading this post.

Using Your Own IDE

So Shopify does provide you with a way of being able to edit the files on the platform, but if you prefer to use your own IDE, there's a really quick way to be able to do that! First thing you need to do is install the Shopify Themekit to your machine. This will allow you to enable you to use the Shopify commands.

After that has been installed, you need to create a directory on your computer and create a config.yml file. Your config.yml file should look as follows:

development:
  store: your-site.myshopify.com
  password: secret_password
  theme_id: "your-theme-id"
  bucket_size: 40
  refill_rate: 2
  ignore_files:
    - "*.swp"
    - "*~"
    - "config/settings_data.json"

Your theme_id can be found by going to your online store under channels, click the themes tab, in the actions drop-down menu click edit code and then in your search bar you will see the theme id.

For the password you need to create a Private App and allow that app to have access to your themes and copy over the secret password for the themes.

Once you have that information in your file you can run theme download which will download all the files relating to your theme.

To see the updated changes to your theme that you are making locally, make sure you run the command theme watch --live to track the live changes upon refreshing your browser or run theme upload if you forget to track the changes.

Understanding The File Structure

Understanding the file structure of the Shopify theme is extremely valuable to know what file will best be suited for the change that you are trying to make. Here are some files and directories to pay attention to:

theme.liquid affects every page on your site. How the data gets displayed can be found here:

{% section 'header' %}
    <main class="main-content" id="MainContent" role="main">
      {{ content_for_layout }}
    </main>

{% section 'footer' %}

Making a change within that block of code will show up for every single site. The {{ content_for_layout }} renders dynamic content based on what page that you are in.

The templates directory holds all the templates based on a specific page. For example, product.liquid will render on the product page.

The sections directory is where you code up different settings that you want to add to the user settings on the Shopify web application. This is really good for when you have a component that may need to be used across multiple pages or you want to use for a home page.

Creating Your Own Template

If you want to create your own template, you can go to the Shopify site, I recommend going to Shopify's code editor, press create a new template and select the type of page that you want to create a new template for. After that you can run, theme download to get the newest file and begin working again in your IDE.

To see the template you created, create a new page in Shopify and in the drop down specify what template you want to use for that particular page.

Creating Your Own Shopify Section

Creating your own Shopify section allows you to add custom settings to other pages on your site. You can create a section page by adding a section in the Shopify code editor and then downloading the file back to your site or you can create the file directly in your IDE. Here is a code example of a section template:

<h3>{{section.settings.heading}}</h3>
<p>{{section.settings.description}}</p>
{%for block in section.blocks %}
<img src="{{block.settings.image | img_url:'master'}}"/>
{%endfor%}
{% schema %}
  {
    "name": "Image Grid",
    "settings": [
      {
         "type": "text",
         "label":"your headline for the section",
         "id": "heading"
      },
      {
        "type": "richtext",
        "label": "your description",
        "id": "description"
      }
    ],    
    "blocks": [
     {
        "type": "image",
        "name": "image block",
        "settings": [
          {
            "type": "image_picker",
            "label": "your image",
            "id": "image"
          }
        ]
      }
    ],
    "presets": [
      {
          "category": "image",
          "name": "image grid"
      }
    ]
  }
{% endschema %}

There are different types of values that can be used for type and you can find them here. One thing to note is that the "presets" key allows you to add this setting to your home page. You are also able to add this section to other pages by going to a template file and adding: { % section 'file-name' %}

Other Places to Code

So outside of the theme files you can add your own custom code directly on the Shopify site. You can do that either by using the custom HTML setting on the home page or by writing code on the new pages that you create.

I hope this post gives you a great understanding on how to get started building Shopify sites. If you would like to see the Shopify site that I built, you can check it out here!