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 -%}
Last updated