How to write an faq page

Shopify FAQ

In this article, I will try to answer the questions I have encountered trying to master eCommerce platform — Shopify. 

Is Shopify a shop builder or is it a CMS?

No! Shopify is a SaaS platform which can be customized by the developer. SaaS platform provides the programmers with limited tools in the development of a shop. In the case of Shopify, programmers can access only applications and themes. However, there is no way to customize or change the core. 99% of the time working with Shopify, you will be engaged in developing themes and their sections.

What programming languages and technologies a Shopify developer should know

  1. Scss/css/html5;
  2. JavaScript – [es6-7];
  3. jQuery.
  4. Liquid – template language [the only thing a frontend developer should learn]. There is no other method to work without it. 

You do not need to know “ancient” technologies such as Less.

Also, Ruby on Rails is not needed because it is the backend, while you will need to work with the frontend only.

What should developers know about Shopify?

Shopify is a digital company that develops software for online and retail stores. The headquarters of the company is located in Ottawa, Canada. Shopify was created in 2004 by a group of enthusiasts who wanted to create an online store to sell snowboards. Initially, the name of the company was Jaded Pixel Technologies Inc. In 2011, the company changed its name to Shopify Inc. By the end of 2016, the company reported the total sales from the online stores — 29 billion dollars (since the creation of Shopify), and the number of clients — 37 7500.

https://www.shopify.com/

Ruby on Rails (RoR) [basis of Shopify backend] — a framework written using Ruby implements architectural template Model-View-Controller for the web applications. Also, it ensures its integration with web-server and database server. It is open-source software, and it is distributed under the MIT license.

Liquid — Shopify’s template language

Liquid is a template engine that is the basis for any Shopify theme, and it is used to load content in online stores. Liquid has been used in Shopify since 2006, and today, many other web applications also use it.

Important! Every developer needs to understand that there is Liquid which is used in Shopify and its functions differ from the public template language Liquid. The most relevant documentation for Shopify Liquid is here: Liquid – Shopify.com.

Basics of Liquid’s template language

Code of template language can be divided on: 

  1. Objects – Output markup ( can be transformed into text)
  2. Tags – Tag markup (cannot be transformed into text)
  3. Filters – Filters change outputs of objects. They are used for the output and divided by the symbol | .

Liquid: basic operators

== equals

!= does not equal

> greater than

< less than

>= greater than or equal to

<= less than or equal to

or logical or

and logical and

contains – contains checks for the presence of a substring inside a string.

Contains can only search strings. You cannot use it to check an object in the array of objects

{% if product.tags contains “Hello” %}
  This product has been tagged with “Hello”.
{% endif %}

Liquid: Objects

Objects and names of variables are indicated by: {{ and }}.

{{ page.title }}
========================================================================
Will show:
Some title

Tags

Tags create logic and flow to control templates. They are marked as {% аnd %}.

Marking in the tags does not create visible text. It means that you can assign variable and create conditions and cycles, not showing any Liquid logic on a page. 

{% if user %}
  Hello {{ user.name }}!
{% endif %}
========================================================================
Will show:
Hello Adam!

Liquid: list of currently supported tags:

  • assign – creates new named variable;
  • capture – blocks tag which captures text in variable;
  • increment – Creates a new number variable and increases its value by one every output. Initial value is 0;
  • decrement – Creates a new number variable and decreases its value by one every output. Initial value is -1;
  • case – block’s tag.
  • comment – blocks tag and comments tag in block;
  • cycle – cycle is usually utilized in cycle for the alternating values such as colors and classes of DOM;
  • for – for cycle;
  • break – cycle exit;
  • continue – skips the current iteration for and continues next cycle;
  • if – standart block if / else;
  • include – turns on another template; useful for the repeating parts of code;
  • raw – temporarily turns off processing of tags to avoid syntax conflicts;
  • unlessif mirror operator.

Shopify themes

Theme kit

Theme kit – is a command line tool to build themes. You can download an application with a minimal amount of settings. Basically, the simplified Git client but for Shopify which tracks the changes of files. 

https://shopify.dev/themes/tools/theme-kit

Slate

Slate – allows you to synchronize local files with your current shop, deploy them in different environments, and organize the style sheets and scripts. 

https://shopify.github.io/slate/docs/about

Structure of a Shopify theme [ThemeKit].

Any Shopify theme includes the following catalogs:

assets – contains all the resources that are used in a theme, including images, style sheets, and JavaScript files.

config – turns on file settings_schema.json and settings_data.json files.

layout – layout templates of themes, which by default is theme.liquid file.

locales – languages and translations.

sections – theme categories that are reusable by the content modules and can be set up and reorganized by the theme users. 

snippets – all the theme fragments that represent the code fragments and can be referenced in the theme templates.

templates – contains all other Liquid temples, including the ones for the client’s accounts. 

P.s: Slate theme can be converted to ThemeKit, but with Slate, scss & js crushes more often.

P.s: Slate theme can be converted to ThemeKit but with Slate, scss & js is more crushed.

Related Articles

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments