Working for the first time with Shopify? Do you need a refresher? Read this to get some tips for those newcomers who want to work with the popular e-commerce platform for online stores and retail point-of-sale systems.
Hello everyone! In this new blog post, I’m going to talk about Shopify. I had the opportunity to work with this e-commerce platform for the first time, and there are many things that I would like to share with you. So, if this is your first time working with it too, or if you’d like to know more about it, please keep reading.
1. Theme
The first important thing about Shopify is that in order to test your new features, you don’t need a localhost (like usual in Rails projects); you only need access to a Shopify Store — if you want so, you can create a Shopify Partners account (it’s free 😉) and have a test store where you can practice what I’m going to write about here.
So, once you have a store, you can create a new theme which is basically the storefront all your potential customers will see.
Shopify themes tools
There are many different tools that can help you to create a theme from scratch (here we are using Slate).
- Themekit
- Slate
- Quickshoot
To learn more about the available tools, click here.
Creating a new theme
To create a new theme, go to admin/themes. There, you will see all the themes that you already have created. Then, select one of them and click in Actions. After that, select the Duplicate option (this way, you only need to change its name).
Afterward, if you don’t have it, you need to create a new file called config.yml where you’ll store the credentials of your theme (provided by Shopify). Moreover, that file must contain the next values:
development:
password: xxxxxxxxx
store: name-of-your-company.myshopify.com
theme_id: 000000000
-
Password: You can get this value in admin/apps/private.
To do that, you need to access to the corresponding private app name. Once there, copy the provided password.
- Store: This is the name of your store.
- Theme_id: You get this value by accessing /admin/themes.json. Search there for your theme and copy the ID.
Once this is done, you’re ready to build new things in your theme. Consequently, you need to run:
npm start
Note: every time you do a new change, the server will automatically load your changes into the theme. If your changes load correctly, you’ll see something like this:
If your changes load successfully, you’ll see a Successfully slag; if not, the server won’t do anything and won’t display an error, so you need to be very careful with that!
By the way, if you like to dive deeper into this topic, read this useful article here.
2. Liquid
Liquid is an open-source template language created by Shopify and written in Ruby: Liquid is the backbone of Shopify themes and is used to load dynamic content on storefronts.
The Liquid files (as you can imagine) have the extension account.liquid, and its syntax is very similar to the HTML structure (with some minor differences), so you’ll find a syntax like this:
<section class="checkout-flexpert-section">
{% if page.handle == 'lp-sp-1' %}
<div class="button-checkout-container" style="margin-bottom: 50px;">
<button type="button" class="dark-button js-one-time-checkout lp-checkout"/>
Checkout $14.99
</button>
</div>
{% else %}
<div class="checkout-container">
<a href="{{ section.settings.button-url }}">
{{ section.settings.copy }}
<span class="price fwf-product-price">
{{ section.settings.price }}
</span>
</a>
</div>
{% endif %}
</section>
- {% %} → Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs.
- {{ }} → Objects tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: {{ and }}.
- |→ Filters change the output of a Liquid object. They are used within an output and are separated by a | ({{ “/my/fancy/url” | append: “.html” }})
To sum up, if you like to dig more into it, please check the official website in Shopify. You can also go to shopify.github.io.
3. Sections
This is the thing I like the most about Shopify because here you code the things that the user can change whenever they want, and this makes the page very dynamic.
In this section, we create something called a schema that serves to provide a consistent editing experience to the admins. Likewise, it also makes things interactive and you no longer need a developer around when the admin wants to change something in this section of the page.
The content section schema property
In order to create a new section, you need to create it in the path src/sections/your_section.liquid.
The structure that you need in order to build your schema is:
{% schema %}
{
"name": <SectionName>,
"content": <ContentSchema>,
"settings": [<SettingSchema>]
}
{% endschema %}
Static Content Schema
These fields are the most used for the schema. Nevertheless, we could get more than that; so, I recommend that you check the documentation to get a better understanding.
{
"type": <ContentType>,
"label": <String>,
"info": <String>,
"settings": [<SettingSchema>]
}
Creating a new schema
{% schema %}
{
"type": "Blog",
"name": "Blog Tabs",
"settings": [
{
"id": "blog_image",
"label": "Blog Image",
"type": "image_picker"
},
{
"id": "tab_title",
"label": "Tab Title",
"type": "text",
"default": "MagmaLabs"
},
{
"id": "blog_title",
"label": "Blog Title",
"type": "text",
"default": "Exceptional digital products"
},
{
"id": "blog_text",
"label": "Blog Text",
"type": "textarea",
"default": "MagmaLabs is an e-commerce and software consultancy that builds software solutions for emerging, mid-size, and growing companies using innovative technologies, top talent, and nearshore teams.<br><br> We have been improving our processes over the years>
},
{
"id": "blog_url",
"label": "Blog Article URL",
"type": "url"
}
]
}
{% endschema %}
The previous is an example of the creation of a new schema: in order to print the values of the schema into the page, you need to access into the section.settings object + the id of the section that you want to show. For example, to display the MagmaLabs title, you need to do something like this:
<h3>{{ section.settings.tab_title }}</h3>
If you would like to show the paragraph, you need to do this:
<p>{{ section.settings.blog_text }}</p>
Time to check your changes into the view
With these changes, you are ready to customize this part of the page. But first, you need to access the Shopify admin in the themes section. Once there, click into the customize option on top of your theme.
Once you’ve done that, the browser will open a new tab with your theme. There, you will see something like this:
There, the menu will show all the schemas that you have in your project. The pink one is the new schema you created in the previous example. If you click on it, you’ll see an interface like this:
Just to illustrate the last example, here is the content you are looking at:
- Image_picker → Blog Image
- Text → Tab Title
- Text → Blog title
- Textarea → Blog text
- Url → Blog Article URL. We need this for our button so the user can be redirected to the MagmaLabs’ official website.
For instance, you can see all the fields available for Shopify in the input setting types option.
By adding some styles into the schema data provided, the view could look something like this:
4. Routes
Creating new routes in Shopify is a piece of cake. First, you need to create a new file in src/templates/; for example, if you want to create an about-us route, you need to create a file like this: src/templates/page.about-us.liquid.
Admin section
In the admin section you need to access into the admin/pages, then, click in the Add page button. There you need to choose the title and choose the template (this part is the file that you previously created in src/templates/page.about-us.liquid).
If you like to read more about it, go and check the page sections in the Shopify documentation.
Now when your users access your_domain_name/page/about-us, they will see all the content in the page.about-us.liquid file.
I hope this blog post is very helpful to you. Thanks for reading!
@SamanthaBello, Software Engineer at MagmaLabs
