Plan 26/2:
learning and researching Shopify doc (architecture, Liquid)
Layouts are the base of the theme, they are liquid files allow you to include content that repeat on multiple page type
General: general layouts can apply to all non-checkout pages. Default layout file is theme.liquid
Checkout: checkout.liquid layout renders the checkout and is vailable only to Shopify Plus merchants. This type apply to checkout pages
Layout file should follow the structure of a standard HTML doc. Most layout files contain the following Liquid objects:
This variable is typically used to include content that should be placed within the <head> section of the HTML document. It allows developers to add meta tags, scripts, stylesheets, or any other content that needs to be included in the header of every page.
This variable is used to inject content into the main content area of the theme layout.
It allows developers to include dynamic content or sections that should be displayed consistently across different pages of the website.
Developers can use the "content_for_layout" variable within layout files to define where the main content of each page should be rendered.
Tags are wrapped with curly brace percentage delimiters {% %}. The text within the delimiters doesn't produce visible output when rendered.
1. 'if' : Renders an expression if a specific condition is true.
{% if condition %}
expression
{% endif %}
2. 'elsif' : check for multiple condition
{% if condition %}
expression
{% elsif condition %}
expression
{% endif %}
3. 'else' : set a default expression when no other condition are met
{% if condition %}
expression
{% else %}
expression
{% endif %}
4. 'unless' : renders an expression unless a specific condition is true
{% unless condition %}
expression
{% endunless %}
5. 'case' : Renders a specific expression depending on the value of a specific variable
{% case variable %}
{% when value1 %}
expression1
{% when value2 %}
expression2
{% else %}
expression3
{% endcase %}
6. 'multiple value' : When multiple values are provided, the expression is returned when the variable matches any of the values inside of the tag.
{% case variable %}
{% when value1 or value2 or value3 %}
expression1
{% when value4, value5, value6 %}
expression2
{% else %}
expression3
{% endcase %}
Provide the values as a comma-separated list, or separate them using an or operator.
Generate many types html <form> tag including any required <input> to submit the form.
{% form 'form_type' %}
content
{% endform %}
Form types:
activate_customer_password : activating a customer account
cart : creating a checkout based on the items currently in the cart
contact : submitting an email to the merchant
create_customer : creating a new customer account
currency : select preferred currency
customer : creating a new customer without registering a new account
customer_address : generates a form for creating a new address on a customer account, or editing an existing one
customer_login : generates a form for logging into a customer account
guest_login : Generates a form that directs customers back to their checkout session as a guest instead of logging in to an account
localization : Generates a form for customers to select their preferred country so that they're shown the appropriate language and currency
recover_customer_password