Day 26/2
Plan 26/2:
learning and researching Shopify doc (architecture, Liquid)
customize speed
Layouts
Layouts are the base of the theme, they are liquid files allow you to include content that repeat on multiple page type
Layout type
General: general layouts can apply to all non-checkout pages. Default layout file is
theme.liquidCheckout:
checkout.liquidlayout renders the checkout and is vailable only to Shopify Plus merchants. This type apply to checkout pages
Schema
Layout file should follow the structure of a standard HTML doc. Most layout files contain the following Liquid objects:
content_for_header
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.
content_for_layout
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.
Liquid
Tags
Tags are wrapped with curly brace percentage delimiters {% %}. The text within the delimiters doesn't produce visible output when rendered.
Conditional tags
1. 'if' : Renders an expression if a specific condition is true.
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
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.
HTML tags
form
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
new_comment
product
recover_customer_password
reset_customer_password
storefront_password
Last updated