What are the Shopify code languages?

Tweet LinkedIn
LiquidJSHTMLCSS

This is a full guide for full stack developers of all programming languages used in the Shopify platform.

Shopify, the popular e-commerce platform, has become a cornerstone for online retail businesses.

I remember in the past when self hosted platforms ruled the e-commerce side of businesses, not in today’s world.

These days due to simplicity, setup and use, the cloud platforms are taking e-commerce by storm leaving behind self hosted platforms.

As a full-stack web developer understanding the intricacies of Shopify’s programming languages is crucial to effectively develop and customize online stores.

This article delves into the core languages that make up Shopify’s backbone, highlighting their functions and relevance to developers.

Back-end programming languages

For the platform back-end Shopify uses only one language and that is Ruby.

Ruby

Though not directly interacted with by Shopify developers, Ruby on Rails is the framework upon which Shopify is built.

It handles the server-side operations and database management.

As a full-stack developer, understanding Ruby on Rails can be beneficial, especially when working with Shopify’s APIs or creating custom applications, but not necessary since apps are self hosted by developers because you can use whatever language you are comfortable with to interact with the APIs.

Front-end programming languages

Like most web development, Shopify heavily relies on HTML, CSS, and JavaScript.

These languages are essential for the aesthetic and interactive elements of a Shopify store.

Liquid (Mandatory)

Liquid is a template language created by Shopify and used extensively in Shopify themes to load dynamic content.

It’s an open-source template engine written in Ruby, primarily utilized for web development.

Liquid is executed on the back-end but you’ll write in the front-end inside the theme.

It actually takes care of the theme logic and is the only way to pull data from the database in the Shopify front-end.

Below I’ll list the key characteristics of the Liquid code language:

Dynamic Content Rendering

Liquid allows the use of placeholders in the HTML code of a Shopify theme.

These placeholders are replaced by actual data (like product details, prices, etc.) when the page is loaded.

This capability is essential for displaying information unique to each user or context.

Tag-Based Syntax

Liquid code uses a combination of objects, tags, and filters.

Objects tell Liquid where to show content on a page, tags create the logic and control flow for templates, and filters change the output of Liquid objects.

Safe and Secure

Being a server-side language, Liquid is processed on the server before it’s sent to the user’s browser. This makes it secure, as it doesn’t expose the underlying code or structure to the end user.

Extensible and Customizable

Developers can create complex themes with custom functionalities using Liquid. 

It’s designed to be flexible, allowing for a high degree of customization while keeping the syntax relatively straightforward.

In the context of Shopify, Liquid is used to build and customize themes.

It connects the store’s data with the HTML of the theme, allowing developers to create rich, interactive, and personalized shopping experiences.

Since Liquid is integral to Shopify, understanding and utilizing it is essential for any developer working on custom Shopify theme development.

It is not possible to build Shopify themes without understanding the Liquid language.

For a full-stack developer like yourself, with experience in web languages and e-commerce development, Liquid offers a familiar yet specialized tool for creating and customizing online storefronts on the Shopify platform.

Liquid examples

Example 1: Title Tag
<title>
  {{ page_title }}
</title>

This part sets the title of the HTML page.

The {{ page_title }} is a Liquid output statement that inserts the value of the “page_title” variable into the HTML.

If “page_title holds” the title of the page, it will be displayed in the browser’s title bar or tab.

Example 2: Description Meta Tag
{% if page_description -%}
  <meta name="description" content="{{ page_description | truncate: 160 }}">
{%- endif %}

This section conditionally adds a meta tag for the page description.

The {% if page_description -%} checks if the “page_description” variable exists and has content.

If it does, the <meta> tag is included in the HTML output.

{{ page_description | truncate: 100 }}: This outputs the page_description variable, but with the truncate filter applied to limit its length to 100 characters.

This is commonly used for SEO purposes, ensuring the description is not too long for search engine snippets.

Example 3: if/else
{% if product.available %}
  <p>This product is available for purchase.</p>
{% else %}
  <p>Sorry, this product is currently out of stock.</p>
{% endif %}

{% if product.available %} – This line checks if the product.available variable is true, which usually means the product is available for sale.

If “product.available” is true, the content within the if block (<p>This product is available for purchase.</p>) is rendered.

{% else %} – This part is executed if “product.available” is not true (e.g., the product is sold out or not available for some reason).

In the else case, the message <p>Sorry, this product is currently out of stock.</p> is displayed.

{% endif %} – This ends the “if/else” block.

HTML (Mandatory)

HTML, or HyperText Markup Language, is the fundamental building block of the web.

It is not something specific to Shopify.

As a full-stack web developer your journey in creating web applications and websites invariably begins with HTML.

It’s essential for structuring the content of web pages and serves as the backbone upon which more complex functionalities and styles are added.

Unlike programming languages like JavaScript, HTML is not used for scripting or creating complex functionality, rather, it is primarily intended for structuring and presenting content on the web.

Below I’ll list the key characteristics of the HTML markup language:

Elements and Tags

HTML consists of a series of elements used to enclose or wrap different parts of the content to make it appear or behave in a certain way.

The enclosing tags can make a bit of text appear as a hyperlink, italicize words, and so on.

Simplicity and Ease of Use

One of the reasons for HTML’s widespread adoption is its simplicity.

Even with basic knowledge, one can create a simple web page.

Versatility

While HTML forms the structure of a webpage, it can be combined with CSS (Cascading Style Sheets) for styling and JavaScript for functionality, allowing for the creation of complex, interactive web applications.

HTML forms the basic structure of web pages on Shopify.

It defines the content layout, ensuring that text, images, and other elements are properly placed.

In HTML you’ll integrate the Liquid code with which you’ll pull data from the database.

Examples of HTML code used inside Liquid

Example 1: Product Details

<div class="product">
  <h1>{{ product.title }}</h1>
  <img src="{{ product.image | img_url: '300x300' }}" alt="{{ product.title }}">
  <p>{{ product.description }}</p>
  <span>Price: {{ product.price | money_with_currency }}</span>
</div>

This example displays product details.

It uses Liquid variables ({{ product.title }}, {{ product.description }}, {{ product.price }}) within HTML tags to show a product’s title, image, description, and price.

The “img_url” filter modifies the product image URL to get a specific size.

Example 2: Looping over collections

<ul>
  {% for collection in collections %}
    <li>
      <a href="{{ collection.url }}">{{ collection.title }}</a>
    </li>
  {% endfor %}
</ul>

Here, a for loop is used to iterate over a list of collections.

For each collection, it creates a list item “<li>” with a link “<a>” to the collection.

Example 3: Conditional Display of Messages

{% if customer %}
  <p>Welcome back, {{ customer.first_name }}!</p>
{% else %}
  <p>Welcome, guest! <a href="/login">Log in</a> or <a href="/register">register</a>.</p>
{% endif %}

This snippet checks if a customer is logged in ({% if customer %}) and displays a welcome message.

If not, it provides links to log in or register.

Example 4: Displaying Blog Posts

<div class="blog-posts">
  {% for post in blog.posts %}
    <div class="post">
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      <p>{{ post.summary }}</p>
    </div>
  {% endfor %}
</div>

This example loops through blog posts, displaying each post’s title and summary.

The for loop in Liquid ({% for post in blog.posts %}) iterates over the posts.

In each of these examples, Liquid syntax is seamlessly integrated with HTML to create dynamic, data-driven elements on a webpage.

This blend of HTML and Liquid is essential for building interactive and personalized user experiences in web development, especially on platforms that support Liquid, like Shopify.

CSS (Mandatory)

Cascading Style Sheets (CSS) is an essential technology in the realm of web development, acting as the stylist that brings beauty and form to the structure created by HTML.

It is not something specific to Shopify.

As a full-stack web developer, your expertise in CSS is crucial for crafting visually appealing and responsive websites.

CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML).

CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Below I’ll list the key characteristics of the CSS language:

Separation of concerns

CSS allows for the separation of presentation from content, which means you can change the look of a website without altering the HTML structure.

Styling and Formatting

With CSS, you can define the layout of multiple web pages with a single stylesheet.

Colors, fonts, sizes, spacing, and positioning are all controlled with CSS.

Responsive Design

CSS plays a pivotal role in responsive web design.

Through media queries, CSS allows different styles to be applied depending on the device’s screen size, resolution, and other factors.

CSS has evolved from a simple styling language into a powerful tool for creating sophisticated web designs.

CSS latest standard, introduces many new capabilities like animations, transitions, gradients, and flexbox layout.

These features enable you to create super complex designs that were previously only possible with JavaScript.

CSS frameworks like Bootstrap provide ready-to-use components, which can significantly speed up development.

Libraries like Tailwind CSS offer utility-first approaches, allowing rapid, in-line styling with a focus on responsive design.

In Shopify you’ll use CSS to style and layout the theme elements.

Here I can’t offer examples of CSS embedding inside Liquid.

I’ve written a tutorial here on how to add a custom CSS file to your theme: How to add a custom CSS file to Shopify in Liquid?

JavaScript (Mandatory)

JavaScript (JS) is an indispensable tool in the arsenal of a full-stack web developer like yourself.

It’s the scripting language that brings interactivity and functionality to the web, transforming static HTML pages into dynamic and engaging web applications.

JavaScript is a high-level, interpreted scripting language used to create and control dynamic website content. This includes everything that moves, refreshes, or changes on your screen without requiring you to manually reload a web page.

Below I’ll list the key characteristics of the JavaScript language:

Interactivity

JavaScript allows users to interact with web pages.

From simple actions like pressing a button to more complex operations like submitting forms and live content updates, JS makes it possible.

Versatility

It works across all modern web browsers and is versatile enough to be used for both client-side and server-side development (thanks to environments like Node.js).

Asynchronous Programming

With features like AJAX and Fetch API, JavaScript can update parts of a web page asynchronously without reloading the whole page, enhancing user experience and app performance.

I’ve written a tutorial here on how to add a custom JS file to your theme: How to add a custom JS file to Shopify in Liquid?

SASS (Optional)

In Shopify, developers often use SASS, a preprocessor scripting language that enhances CSS with variables, nested rules, and mixins, facilitating more efficient styling.

SASS code is compiled to CSS which then will be used by the Shopify theme.

The processing of Shopify SASS files needs to be made locally and CSS files will be uploaded to Shopify via the Shopify CLI.

You can’t upload SASS files to Shopify servers and compile them on the fly. It was allowed in the past but today is no longer possible. You need to serve the raw CSS files.

CSS and JavaScript files do not need to be compressed since Shopify will compress them before sending them to the browser.

SASS extends CSS with variables, nesting, mixins, and more, making the code more maintainable and easier to write.

Though much of the stuff SASS offers is already available in CSS, still SASS is a powerhouse that helps to better organize your code.

Using SASS it’s optional but as a web developer proficient in CSS, incorporating Sass into your workflow can offer several benefits:

Variables for Reusable Values

Sass allows you to use variables for storing colors, fonts, and other CSS values.

This feature makes it easy to update and maintain styles across a project.

For instance, you can define a color scheme in variables and change it throughout your site by simply updating the variable values.

Nesting for Better Structure

Sass enables you to nest CSS selectors, which mirrors the hierarchical structure of HTML.

This results in more readable and maintainable code, as it’s clear which styles apply to nested elements.

Mixins for Reusable Code

Mixins let you create groups of CSS declarations that you want to reuse throughout your site.

They can even accept arguments, making your styles more flexible and reducing the repetition of code.

Extend/Inheritance

This feature lets you share a set of CSS properties from one selector to another.

It helps in keeping your Sass very DRY (Don’t Repeat Yourself).

Inheritance in Sass can help reduce the amount of CSS you need to write and maintain.

Operators for Mathematical Operations

Sass allows arithmetic operations like addition, subtraction, multiplication, and division to be performed directly in your stylesheets.

This is particularly useful for creating complex layouts or adjusting sizes and margins with precision.

Control Directives for Advanced Logic

Sass offers control directives like @if, @for, @each, and @while for writing complex styles with standard logic statements.

This can be particularly useful when creating themes or styles that need to change based on certain conditions.

Improved Organization

With the ability to split your Sass into multiple files (partials) and import them into a main file, you can keep your stylesheets organized, modular, and easier to manage.

Compatibility with CSS

Since Sass is a superset of CSS, you can use any valid CSS within a Sass file.

Plus, it compiles back to standard CSS, ensuring compatibility across browsers.

Efficiency and Productivity

With features like mixins and variables, Sass reduces the time and effort required to write and manage styles, leading to more efficient and productive development processes.

APPS

Can be written in languages like JavaScript with Node.js, PHP, Ruby, GO & .NET .

These languages are the most well supported on the Shopify documentation and you can find frameworks, libraries and so on.

Conclusion

For a full-stack web developer Shopify presents a familiar yet unique landscape.

By leveraging knowledge of Liquid, HTML, CSS, JavaScript, and understanding the role of Ruby on Rails, one can craft bespoke e-commerce experiences.

This mix of technologies makes Shopify a flexible platform suitable for a wide range of online retail solutions.

As the e-commerce world evolves, proficiency in these languages will continue to be a valuable asset for any developer looking to specialize in Shopify store development.