Tech
How to get Started as a Shopify Developer
5 min. read
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!