How To Get To Code On Shopify Template

Your Shopify theme defines your brand. It decides how your customers collaborate with your shop and has limited options for customization.

Unless you choose to go beyond the UI and dig into the code.

Doing so can allow yous to alter design elements or add functionality that your theme does not include.

By manually editing Shopify's template code—called Liquid—yous can customize your shop to your liking. You may kickoff feeling more powerful, just know that you'll also have the power to break your store.

If you are dead assault editing your Shopify store's Liquid lawmaking, y'all'll want to know how it works offset.

Shopify Liquid logo

Image: Shopify

Luckily, you don't need to be a coder to tinker with your shop's Liquid code.

This Shopify Liquid tutorial is meant for beginners, avoiding technical jargon where possible and including definitions equally needed throughout.

In this mail service, we'll cover:

Shopify Liquid basics
An instance of Liquid code changes
Objects in Liquid
Tags in Liquid
Filters in Liquid

So, buckle up. It's time to learn about Liquid!

#cta-visual-pb#<cta-title>Edit your Shopify store the simple way<cta-championship>Customize your Shopify store with Shogun Page Builder's powerful drag and drop editor, with custom code blocks and xxx+ free templates.Start building for gratis

What is Shopify Liquid: The basics

Shopify Liquid is an open-source template language that serves every bit the framework for all Shopify themes. In short, information technology is the language Shopify is written in.

However different all of Shopify's themes expect, each boils downward to this primal codebase.

Liquid is purposely more than limited than other programming languages, acting as a simple bridge between store data and HTML.

For this reason, it is as well described as a template engine or syntax instead of a language. Merely, just like any other coding language, it uses if/then statements, logic, and loops.

Originally created by Shopify co-founder and CEO Tobias Lütke and written in Ruby, Liquid is now used by other major platforms such every bit Salesforce and Zendesk.

Static content vs. dynamic content on Shopify

When looking at a website, you won't be able to tell the departure betwixt static and dynamic content.

Simply, static content is hard-coded into the folio, whereas dynamic content is pulled into a folio from a database.

Web developers employ template languages to seamlessly combine static content with dynamic content on a page, and so you lot can't tell the deviation.

Static content stays the same from folio to page but dynamic content changes. In your Shopify store, static elements are written in HTML, and dynamic elements are written in Liquid.

The Liquid lawmaking is essentially a placeholder.

It's used to retrieve specific referenced data from your Shopify store—like your store name, product details, images, etc.—when the lawmaking is compiled and sent to the browser.

This allows Shopify themes to be agnostic, meaning the same lawmaking can work for many stores without adjustments.

This makes changing your Shopify theme a rather painless process.

liquid in action flow — Epitome Source: ShopifyDevs

Liquid delimiters

Liquid is an like shooting fish in a barrel language to recognize.

Beyond its very identifiable .liquid file extension, Liquid also uses two unique delimiters—characters used to separate independent parts in a piece of lawmaking—to ascertain objects and tags within template files.

Objects, which are outputs, are indicated by double curly braces: {{ … }}
Tags, which create logic and control flow, are indicated past a curly caryatid and a percentage sign on each side: {% … %}

Filters can be used within the double curly braces to alter the output of an object.

Objects, tags, and filters in Liquid

Liquid is characterized by three key parts: objects, tags, and filters.

Objects (besides known as variables) represent one or more values. They can stand in for anything from titles to numbers to calculation results to database query results.

In Liquid, objects (wrapped in double curly braces) output pieces of data onto the page.

A single object can support many unlike backdrop, and a dot syntax system separates the object from its property.

For example, in the object {{ page.title }}, the term earlier the dot is the object, and the term after the dot is the property. And so, this would output the championship holding of the page object.

This uncomplicated Liquid syntax makes using information technology super user-friendly.

Tags (wrapped in curly braces and percentage signs) are used to create logic for templates.

While tags are themselves not rendered on the page, they make up one's mind how objects are displayed on the folio or whether they are displayed at all.

For example, a tag could instruct your shop folio to evidence the toll of an detail if information technology'south available and if it isn't bachelor, to brandish a "sorry, this item is currently sold out" message.

Filters are used to alter outputs. Indicated by the piping character, filters tin can practice many things to change how an object is displayed on the page.

For example, to maintain sentence case for certain objects, you could apply the capitalize filter like and so: {{ "a badly CAPITALIZED Title" | capitalize }} outputs A badly capitalized title.

Liquid code case: Shopify contact page template

To bring all these concepts together, permit's look at the Liquid code for the pre-formatted contact page of Shopify's Debut theme.

Objects and tags are bolded to show the Liquid code more than conspicuously.

---------------------------------------------

<h1>{{ page.championship }}</h1>

</div>

{% if folio.content.size > 0 %}

{{ page.content }}

</div>

{% endif %}

{%- assign formId = 'ContactForm' -%}

{% form 'contact', id: formId %}

{% include 'form-condition', form_id: formId %}

<characterization for="{{ formId }}-name">{{ 'contact.form.proper noun' | t }}</label>

</div>

<label for="{{ formId }}-email">{{ 'contact.course.email' | t }} <span aria-hidden="truthful">*</span></label>

<input

type="email"

id="{{ formId }}-email"

name="contact[email]"

autocorrect="off"

autocapitalize="off"

value="{% if course.email %}{{ class.email }}{% elsif customer %}{{ customer.email }}{% endif %}"

aria-required="true"

{%- if form.errors contains 'electronic mail' -%}

class="input--error"

aria-invalid="true"

aria-describedby="{{ formId }}-electronic mail-error"

{%- endif -%}

{%- if form.errors contains 'electronic mail' -%}

<span id="{{ formId}}-email-error" class="input-error-message">{% include 'icon-mistake' %} {{ form.errors.translated_fields['e-mail'] | capitalize }} {{ form.errors.messages['email'] }}.</bridge>

{%- endif -%}

</div>

<label for="{{ formId }}-phone">{{ 'contact.grade.phone' | t }}</label>

<characterization for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>

<textarea rows="x" id="{{ formId }}-message" proper noun="contact[body]">{% if class.trunk %}{{ form.body }}{% endif %}</textarea>

{% endform %}

</div>

---------------------------------------

Nosotros can see examples of the 3 Liquid features throughout this slice of lawmaking:

Object: The {{ page.content }} object is a stand-in for the page'due south body content, which is defined in the Shopify user interface.

Tag: The {% grade %} tag is used to insert a grade into the page, and the {% endform %} tag is used to close it out (this structure for opening and closing is used for all tags).

Filter: A filter is used for capitalization in the object {{ class.errors.translated_fields['electronic mail'] | capitalize }}

This is what the code translates to on the front end:

Using Liquid to customize pages

To show how your store'due south front-end is afflicted by your theme's Liquid lawmaking, allow's supercede the form on this contact page with some text.

Footstep 1: Duplicate your theme

Before y'all edit your theme code, duplicate your theme and make your changes in the duplicate version.

That mode, any mistakes you make can be easily reversed.

But click "Actions" on the theme and choose "Duplicate" from the dropdown bill of fare.

Step ii: Navigate to the code editor

Open the "Actions" carte on your duplicate theme and select "Edit Code" to open the Shopify code editor.

Footstep three: In your page.contact.liquid file, highlight the contact form code section

In the code editor, open the page.contact.liquid file.

Highlight the portion of the code that creates the form. It begins with a div and ends with an endform tag.

shopify code editor highlight liquid code

Step four: Delete the code block and relieve your changes

Ensure you've highlighted the correct code and delete it. Salvage your changes.

Step five: Go to Online Store > Pages and find your Contact folio

Dorsum in your dashboard, navigate to your Contact page.

Footstep 6: Add together your contact details to your Contact page

In the body section of your Contact page, add in the details that will supercede the form.

The page.contact.liquid file will pull this info with the {{ page.content }} object.

Click "Salve."

When y'all preview the page, you'll see that the class is gone and your new information has been added in its place.

shopify new contact page after editing liquid code

#cta-visual-pb#<cta-title>Customize Shopify themes without code<cta-title>Build your Shopify shop with Shogun Folio Architect to create on-make and powerful store pages without all the fuss.Start building for free

‍

Shopify Liquid objects: A closer look

Objects are the foundation of Liquid.

Later on all, they are the feature that determines what visitors to your shop can actually run into.

Content objects

Content objects output template and section file content for your Shopify store, plus any stylesheets or scripts created by Shopify or apps.

{{ content_for_header }} - This object must be included in theme.liquid, which functions every bit the master template file in Shopify (all themes are rendered in theme.liquid). Information technology's located inside the HTML <caput> tag and loads all the scripts required for Shopify apps, including Shopify analytics and Google Analytics.

{{ content_for_layout }} - This is another object that must exist included in theme.liquid. It retrieves content from other templates.

{{ content_for_index }} - This object must be included in templates/index.liquid. Information technology retrieves the sections that are to be rendered on your homepage.

Global objects

Global objects (AKA global variables) are accessible from any Liquid file in your theme.

They are used to pull the following pieces of information from your store:

{{ all_products }} - A list of all the products in your store (up to 20).

{{ articles }} - A listing of all the articles on your site.

{{ blogs }} - A list of all the blogs on your site.

{{ canonical_url }} - The URL of the current page with all parameters removed.

{{ cart }} - Your shop'due south cart.

{{ collections }} - A listing of all the collections in your store.

{{ current_page }} - The number of the current page (used for paginated content).

{{ current_tags }} - A listing of tags (the specific tags retrieved depends on the template you lot're using).

{{ customer }} - The client that is logged in (if the customer is non logged in, cipher is retrieved).

{{ linklists }} - The menus and links in your store.

{{ handle }} - The title (also known as a handle) of the current page.

{{ images }} - Access an image with its filename.

{{ pages }} - A list of all the pages in your store.

{{ page_description }} - The description of the current page.

{{ page_title }} - The championship of the current page.

{{ recommendations }} - Product recommendations.

{{ shop }} - Information about your store.

{{ scripts }} - Information near all active scripts. To access information most a particular script, add the type of script to this object as a belongings in dot syntax (script.type).

{{ settings }} - A list of the settings in your electric current theme.

{{ template }} - The proper name of your current theme.

{{ theme }} - Your current theme.

Remember that all of these objects have upwardly to dozens of properties, which each have a function of their own.

Too, many objects aren't considered content objects or global objects.

Tags are a petty more active than objects. They tin can create loops, run conditional if/so statements, and change how objects are displayed.

There are four types of tags:

Theme tags: Output template-specific HTML markup, tell your theme which layouts and snippets (files containing chunks of reusable code) to apply and break up arrays (lists of variables) into more than i page. For example: the {% form %} tag can be used to add together a form to a page.

Variable tags: Create new variables. For example: the {% assign %} tag allows you to create and name a new variable.

Iteration tags: Echo blocks of lawmaking. For instance: the {% for %} tag volition repeatedly execute a cake of code. This is useful when you want to display a collection of products on a folio, as it saves you from having to add code for each individual item. Notation that these loops are limited to l results, and so you'll need to utilize pagination if yous have more than than 50 products.

Control period tags: Make up one's mind whether blocks of code are executed or not depending on the situation. For instance: the {% if %} tag will only execute a piece of code if sure conditions are met.

Shopify Liquid filters

Filters live inside an object's curly braces, augmenting its output based on many different deportment.

The dissimilar types of filters include:

Color filters: Change, lighten, darken, saturate, or desaturate the colour of objects.

Font filters: Change text style (normal or italic/oblique) or text weight (calorie-free, normal, bold, and anything in between). With the font_face filter, you can besides add custom fonts to your theme.

HTML filters: Add HTML elements to objects, such as payment buttons and timestamps.

Math filters: Incorporate math equations into your objects. One application of this filter is showing a visitor how much they could save (list cost multiplied past percentage discount) past taking advantage of a specific deal.

Money filters: Format currency as specified in your Shopify store's settings.

Date filters: Make up one's mind the date format used within objects.

Highlight filters: Highlight text that matches search terms to meliorate the functionality of your search feature.
String filters: Alters a given cord (a sequence of characters inside quotation marks) to produce a consequent effect. This could be to change cases, prepend characters, append characters, remove words, truncate strings, etc.
Array filters: Changes an inputted data assortment to output in a specific way. This includes reversing, concatenating, sorting, and more.

Some Shopify Liquid resources to learn more

Past at present, you lot have learned a lot about what Liquid is and how it works from this lovely Shopify Liquid tutorial.

If you lot would like to acquire more virtually this subject, nosotros recommend the post-obit resources:

GitHub: This page contains more Liquid code and data.

Shopify Liquid lawmaking examples: See how different website elements tin can be written in Liquid.

Learning Liquid: This series of manufactures published by Shopify covers many topics related to Liquid.

By understanding the code behind your Shopify theme, you lot'll be able to plough your ideas for pages into a reality.

If you'd rather skip the lawmaking, you can always beginning customizing your Shopify store with Shogun Page Architect. Drag and drib folio elements together—customize each i to your brand specifications—to elevate your current theme'due south functionality.

Y'all can fifty-fifty create custom lawmaking blocks to utilise across your Shopify shop.

‍

#cta-visual-pb#<cta-title>Want to edit your Shopify store the uncomplicated way?<cta-championship>Customize your Shopify store with Shogun Folio Builder'south powerful drag and drop editor, plus add together your ain custom code where you similar.Get-go building for free