My Experience With Shopify as a Developer

I have been working with Shopify for one year, during this time I have faced many interesting tasks and now I will try to share my experience with you. If you want to learn about Shopify development, then this article will be helpful for you, it should help you get to know Shopify and maybe answer some of your questions. And if you want to open a store on Shopify, then this article will also be useful for you, because you can also find useful information.

How did I start?

I met Shopify very unexpectedly. When I was looking for vacancies for a front-end developer, I paid attention to the different technologies that companies use. Ever since I was in college, I really liked online stores and I looked at what kind of e-commerce platforms exist. The biggest ones I found were wooCommerce and Shopify. Everything is clear with the wokomers, but I heard about Shopify for the first time. Then I registered, looked at how it looks from the inside, read more about it. Respect to Shopify for the documentation. And he indicated Shopify in his resume, not particularly hoping for it, because Shopify is used extremely rarely in Russia. Even now I tried to find Russian-speaking Shopify developers – to exchange experiences and just talk, but I did not find it. Maybe somewhere they are, guys respond.

After posting my resume, I started getting responses. And one day the HR Manager wrote to me and said that the company needed a Shopify developer. I was extremely surprised what to say. I passed the interview, completed the terms of reference and became a Shopify developer.

The funny thing is that when I listed Shopify on my resume, I didn’t think I would work with him, but when I started, after a while he amazed me. Initially, I thought it was some kind of online store builder. But later it turned out that in Shopify you can do a lot of cool things and that this is not just a website builder, but a whole system with its own technologies and features. With Shopify, you can develop themes, write apps that make life easier for store owners, customize themes, and more. This is just a small part of Shopify functionality. But from a developer’s point of view, that’s it. It may sound small, but it’s not enough, it’s quite a lot.

Vintage themes

Shopify wasn’t always as convenient as it is now. After August 2021, Themes 2.0 arrived, bringing a number of improvements for theme developers. You can learn more about customizing vintage themes here. here. I will briefly say that these themes are outdated and it is better not to do anything on them and immediately use the 2.0 themes.

I draw special attention to the fact that old themes are still being sold. If you decide to buy a theme on some site, the same themeforestpay attention to the version of the theme, this is very, very, very important.

What topic to choose?

Before uploading a theme to the store, you need to select it. There are two groups of topics in Shopify:

  1. Official themes;

  2. Themes from other developers, in Shopify they are called third party themes, such as third-party themes.

It should be understood that the theme is everything – the design and functionality of your store. Many mistakenly think that the theme is just a design, but it is not. The theme is also the functionality of your store. And the problem is that before buying you will not be able to see the theme from the inside, you will only see its shell, its design. Of course, you will see some functionality that is presented in the demo, but this is still not the full picture.

In my practice, it often happened that a customer bought a theme that he liked externally, but in terms of functionality, it did not meet his needs. Because at least a person does not understand what can be done in Shopify and what cannot be done, I will also talk about this a little later. To avoid this, you should pay attention not only to the design of the theme, but also to the version of the theme and to the theme developer. It may be possible to talk with the developer himself, i.e. ask him about the version of the theme, if suddenly it is not listed in the description, you should also find out about the support of some functionality (if you need it).

The first functionality that I use in my work is metafield filters. It would seem that this is a simple thing, you just need to display filters for additional fields on the collections and search page, which are specified in the theme settings in the metafields tab. You may be surprised, but this is a rare case when they are in themes from third-party developers.

As you can see, choosing a topic is a difficult question. It all depends on your goals. If your goal is to develop themes, ie. learn Shopify development, then I recommend you to use Dawn is the official first Shopify reference theme. Dawn is great for understanding what Shopify development is and how to develop functional and thoughtful themes. Of course, her design is minimalistic and does not shine with any colors, but on the other hand, you will find many examples of adding additional content, because all the examples in Shopify developer documentation presented specifically on Dawn. Also, people ask their questions about adding or changing the functionality of the Dawn theme in Shopify community and on stack overflow.

I want to immediately note Shopify support, which responds very quickly. And it’s hard to say about the support of themes from other developers, some supports respond quickly, and some can respond from one day to a month, well, or not respond at all, I also encountered this. Therefore, the choice of topic must be approached very carefully.

Integrating a theme with a GitHub repository

This is a very handy feature in Shopify, I use it every day. If I did something wrong, or just want to see what I changed yesterday or any other day, I can open the repository and see the commits that are immediately pushed to the repository, even if you make changes in the customizer. Therefore, if you want to track changes in your theme, then you need to link your theme to a GitHub repository.

I wrote about how to integrate a Shopify theme with Github in my previous article. You will also learn about the Shopify CLI, which is also a very cool feature, read it.

Theme customization

Once the theme is attached, it would be nice to customize it. The main settings to pay attention to:

  1. Store details (you need to pay attention to the recipient of messages in order to test the work of the form);

  2. Users and permissions (to provide access to the store);

  3. markets (to set up the main sales market and multilingualism);

  4. Apps and sales channels (for setting up plugins and points of sale);

  5. brand (to add logos, colors, descriptions, etc.);

  6. Metafields (those same additional fields);

  7. Policies (store policy setting).

After setting the global settings, it is desirable to change the default theme settings, which include: site colors, fonts, container size, button roundness, links to social networks. networks and much more. These settings are theme specific, so their quantity and quality varies depending on the theme you choose. If you do not know what to set in these settings, then leave it as it is.

Sections

The section is a liquid file that allows you to create a reusable content element and can be customized by the client. As for reusable content, let’s return to JSON templates and remember its importance at this stage.

There are three ways to display a section in Shopify:

  1. Via JSON template; When you have a JSON page template, you can add any section to the page that is in the sections folder, and you can also reuse any section (use the same section several times). To add any section to a page with a JSON template, you just need to click on the add section button in the customizer on the page you need.

  2. With the Liquid tag; In old threads you can see .liquid templates, but “liquid” templates are inconvenient to develop. To display a section, you need to go into the page code and write: {% include "section-name" %}
    You can read more about liquid here.
    memo
    You can add a section with .liquid extension in multiple files. But remember that there is only one version of this section. This means that when you customize the code for this section, it will change wherever you display it.

  3. Using the Section Rendering API; You can use the Section Rendering API to request the HTML structure for a theme’s sections using an AJAX request. This will allow you to update the content of the page without reloading the entire page by extracting and replacing just a few elements. This method is used when paginating search results on a page.

Sections in shopify are very important, because each content must be stored somewhere, for example, in sections and blocks. We’ll talk about blocks later. In order to correctly distribute content in a section, you need to follow the following rule:

  • Do not overload the section with content
    I have seen a case where all the content on the page was placed in one section. Of course, this is not convenient to work with. You can get confused in no time and break something too. Therefore, to prevent such curiosities from arising, delimit the content into blocks. For example, you have a text container – put it in a block called ‘text’. If you have an image in a section, put it in a block called ‘image’. And then it turns out that you have two blocks in the section – ‘text’ and ‘image’.

    memo
    If you need to set the background of a section, for this you do not need to put an image or color in the block, it would be better to use the section settings. The same goes for the section heading and subheading (or any other elements).

Blocks

Blocks are section content that can be added, removed or modified. For example, you can create a section with text, an image, and a button. And these very blocks can be moved within the section as you like. If you want to place a button above the title – please, your decision.

Before laying out any section, look at it to see how it works. Does it have repetitive elements? If yes, then it can and should be placed in a block, then you won’t have to write a lot of unnecessary code.

Limitations of Shopify as a Platform

On Shopify, sometimes it is not possible to realize all the ideas of the customer. But why is that?

Shopify is a CMS for working with a store, it was not created to make any complex animations or design solutions on it. Shopify is designed to sell. I understand that design is very important for a store and design is the first thing a customer sees. But what is better – a beautiful design or a well-functioning technical part of the store? Again, the concept of beautiful design is different for everyone. And by the technical part, I mean the following: filters, user’s personal account, shopping cart, recently viewed products section, search, wishlist, contact form, email newsletter. This is all the standard functionality of an online store. And there are topics in which it is, but it does not work.

Conclusion

If you’re into Shopify development like I am, then welcome to the Shopify Developers Club. If you read this article because you were interested to know my experience with Shopify, then I am also very glad. In general, write cool topics, approach the creation of a store wisely, all pis.

Similar Posts

Leave a Reply Cancel reply