Daily Report
  • Day 1 - 22/8
  • Day 2 - 23/8
  • Day 3 - 24/8
  • Day 4 - 25/8
  • Day 5 - 26/8
  • Day 6 - 28/8
  • Day 7 - 29/8
  • Day 8 - 30/8
  • Day 9 - 4/9
  • Day 10 - 5/9
  • Day 11 - 6/9
  • Day 12 - 7/9
  • Day 13 - 8/9
  • Day 14 - 9/9
  • Day 15 - 11/9
  • Day 16 - 12/9
  • Day 17 - 14/9
  • Day 18 - 15/9
  • Day 19 - 18/9
  • Day 20 - 19/9
  • Day 21 - 20/9
  • Day 22 - 21/9
  • Day 23 - 22/9
  • Day 24 - 23/9
  • Day 25 - 25/9
  • Day 26 - 26/9
  • Day 27 - 27/9
  • Day 28 - 28/9
  • Day 29 - 29/9
  • Day 30 - 2/10
  • Day 31 - 3/10
  • Day 33 - 7/10
  • Day 32 - 4/10
  • Day 34 - 9/10
  • Day 35 - 10/10
  • Day 36 - 11/10
  • Day 37 - 16/10
  • Day 38 - 17/10
  • Day 39 - 18/10
  • Day 40 - 19/10
  • Day 41 - 20/10
  • Day 42 - 21/10
  • Day 43 - 23/10
  • Day 44 - 25/10
  • Day 45 - 26/10
  • Day 46 - 27/10
  • Day 47 - 30/10
  • Day 48 - 31/10
  • Day 49 - 1/11
  • Day 50 - 2/11
  • Day 51 - 3/11
  • Day 52 - 5/11
  • Day 53 - 6/11
  • Day 54 - 7/11
  • Day 55 - 8/11
  • Day 56 - 9/11
  • Day 57 - 10/11
  • Day 58 - 13/11
  • Day 59 - 14/11
  • Day 60 - 15/11
  • Day 61 - 16/11
  • Day 4/12
  • Day 6/12
  • Day 7/12
  • Day 8/12
  • Day 12/12
  • Day 13/12
  • Day 14/12
  • Day 15/12
  • Day 16/12
  • Day 18/12
  • Day 19/12
  • Day 20/12
  • Day 21/12
  • Day 25/12
  • Day 26/12
  • Day 27/12
  • Day 28/12
  • Day 29/12
  • Day 3/1
  • Day 4/1
  • Day 5/1
  • Day 8/1
  • Day 10/1
  • Day 11/1
  • Day 12/1
  • Day 13/1
  • Day 15/1
  • Day 16/1
  • Day 17/1
  • Day 18/1
  • Day 19/1
  • Day 23/1
  • Day 24/1
  • Day 27/1
  • Day 29/1
  • Day 30/1
  • Day 1/2
  • Day 2/2
  • Day 5/2
  • Day 6/2
  • Day 15/2
  • Day 16/2
  • Day 17/2
  • Day 19/2
  • Day 20/1
  • Day 21/2
  • Day 22/2
  • Day 23/2
  • Day 26/2
  • Day 27/2
  • Day 28/2
  • Day 29/2
  • Day 1/3
  • Day 4/3
  • Day 5/3
  • Day 6/3
  • Day 7/3
  • Day 8/3
  • Day 9/3
  • Day 11/3
Powered by GitBook
On this page
  • Directory structure and component types
  • Liquid
  • Template language
  • Liquid
  • Defining logic with tags
  • Modifying output with filters
  • Referencing objects
  • Handles

Day 23/2

Plan 23/2:

  • learning and researching Shopify

Directory structure and component types

Themes must follow this directory structure:

  • assets

Assets are files (such as images, CSS, JavaScript) used in themes for customization. They have unique URLs generated by asset_url Liquid filter and are managed through the Theme Editor. Assets enhance the store's appearance and functionality.

  • config

contain the config files for a theme. Config files define settings in the Theme settings area of the theme editor, as well as store their values.

  • layout

The layout directory houses layout files for a theme, facilitating the rendering of template files. Layouts, written in Liquid, centralize content meant for multiple page types. They're ideal for content like <head> elements and section groups for headers and footers. A theme.liquid file is mandatory in this directory for Shopify theme upload.

  • locales

contains the locale files which allow you to provide a translated experience in the theme editor, provide translations for the online store, and allow merchants to customize text in the online store.

  • sections

are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section.

  • snippets

Contains reusable pieces of Liquid code that can be included in different templates or sections of a theme. It allows you to modularize your code and avoid duplication. Snippets are commonly used for components that appear on multiple pages.

  • templates

Contain a template file that control layout and structure of a specific type of page in your online store.

  • template/customers

Store template files related to customer-specific pages and actions (login, account overview, ...).

Liquid

Template language

Which allow creating a template to host static content, and dynamically insert information depending on where the template is rendered.

Liquid

Liquid is used to dynamically output objects and their properties. You can further modify that output by creating logic with tags, or directly altering it with a filter.

Defining logic with tags

Liquid tags are used to define logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered.

{% if product.title == 'Health potion' %}

This is a rare potion. Use it sparingly!

{% endif %}

{% %} Curly brace percentage delimiters denote logic and control flow.

Modifying output with filters

To apply filters to an output, add the filter and any filter parameters within the output's curly brace delimiters, preceded by a pipe character.

{% # product.title -> Health potion %}

{{ product.title | upcase | remove: 'HEALTH' }}

{{ | }} Filters are placed within an output tag and denoted by a pipe character.

Referencing objects

Liquid objects are often used to represent data, such as product information, customer details, or configuration settings. Liquid provides various filters, tags, and objects to manipulate and display this data within templates.

Some objects can be accessed globally, and some are available only in certain contexts.

{{ }}Double curly brace delimiters denote an output.

Handles

Object handling involves manipulating and interacting with objects that represent data within templates.

1. Creating and modifying handles

Handles are automatically generated based on the resource title, follow the rules:

  • always lowercase

  • whitespace and special characters (include multiple consecutive whitespace and special characters) are replaced with a single hyphen -

  • whitespace and special characters at the beginning are removed

  • handles need to be unique from each other

After a resource has been created, changing the resource title doesn't update the handle.

2. Handle 's tasks

Here are some common tasks involved in object handling in Liquid:

  • Accessing Object Properties

  • Iterating Over Object Properties

  • Conditional Logic

  • Using Filters

  • Creating Custom Objects

3. Referencing handles

All objects that have a handle have a handle property. You can reference an object, from within its parent object, by its handle in two ways:

  • Square bracket notation [ ]: Accepts a handle wrapped in quotes ', a Liquid variable, or an object reference.

  • Dot notation .: Accepts a handle without quotes.

Referencing an object by its handle is similar to referencing array elements by their index.

4. contains

You can use contains to check for the presence of a string within an array, or another string. You can’t use contains to check for an object in an array of objects.

5. Order of operations

When using more than one operator in a tag, the operators are evaluated from right to left, and you can’t change this order.

6. Liquid output types

  • string

  • number

  • boolean

  • nil : undefined value, treated as false

  • array : list of variable of any types

  • empty : returned when an object is defined but has no value

Beside 'false' and 'nil' are treated as False, every others output types are treated as True. You need to be careful how you check values in Liquid.

7. Whitespace control

Even if no text is displayed, every line of Liquid code contributes to the rendered content. Hyphens in Liquid tags remove generated whitespace. To remove whitespace from one side of a tag, add a hyphen to either the opening or closing tag.

{%- something in here -%}

PreviousDay 22/2NextDay 26/2

Last updated 1 year ago