Introduction
Liquid is Shopify's templating language for dynamic e-commerce theme rendering.
Read more →Welcome to Liquid Toolkit - Your Gateway to Mastering Liquid Code
Unlock the power of liquid with our free tutorials and resources. Perfect for beginners and intermediate coders eager to enhance their liquid skills.
Basics
Setup
Liquid setup uses Shopify's theme editor with .liquid files for customization.
Read more →Syntax
Liquid syntax uses {% %} for logic and {{ }} for output in Shopify themes.
Read more →Variables
Liquid variables use assign or capture for dynamic data in Shopify.
Read more →Data Types
Liquid data types include strings numbers and arrays with dynamic typing.
Read more →Operators
Liquid operators include comparison and logical for Shopify theme logic.
Read more →If Else
Liquid if-else statements control theme rendering with Shopify data.
Read more →Unless
Liquid unless statements render blocks when conditions are false in Shopify.
Read more →Case
Liquid case statements handle multiple conditions for Shopify theme logic.
Read more →Loops
Liquid loops use for to iterate Shopify collections or arrays.
Read more →Comments
Liquid comments use {% comment %} for non-rendered notes in Shopify themes.
Read more →Errors
Liquid errors use default values or try-catch-like logic in Shopify.
Read more →Debugging
Liquid debugging uses {{ content | json }} for Shopify theme inspection.
Read more →Best Practices
Liquid best practices include minimal logic, reusable snippets.
Read more →Security Basics
Liquid security ensures safe input handling in Shopify themes.
Read more →Objects
Objects
Liquid objects access Shopify data like product and cart in themes.
Read more →Product Object
Liquid product object accesses Shopify product data like title and price.
Read more →Collection Object
Liquid collection object retrieves Shopify collections for display.
Read more →Cart Object
Liquid cart object manages Shopify cart items and totals.
Read more →Customer Object
Liquid customer object accesses Shopify customer data like email.
Read more →Order Object
Liquid order object retrieves Shopify order details for checkout.
Read more →Shop Object
Liquid shop object provides Shopify store metadata like name.
Read more →Page Object
Liquid page object accesses Shopify page content and titles.
Read more →Blog Object
Liquid blog object retrieves Shopify blog posts and metadata.
Read more →Tags
Tags
Liquid tags use {% %} for Shopify theme logic like if and for.
Read more →If Tag
Liquid if tag controls rendering based on Shopify conditions.
Read more →For Tag
Liquid for tag iterates Shopify collections with limit and offset.
Read more →Case Tag
Liquid case tag handles multiple Shopify conditions with when clauses.
Read more →Unless Tag
Liquid unless tag renders when Shopify conditions are false.
Read more →Comment Tag
Liquid comment tag hides code in Shopify theme templates.
Read more →Raw Tag
Liquid raw tag escapes Liquid delimiters in Shopify content.
Read more →Cycle Tag
Liquid cycle tag alternates values in Shopify loops for styling.
Read more →Paginate Tag
Liquid paginate tag splits Shopify collections into pages.
Read more →Include Tag
Liquid include tag embeds Shopify snippets with deprecated syntax.
Read more →Render Tag
Liquid render tag embeds Shopify snippets with improved performance.
Read more →Section Tag
Liquid section tag defines Shopify theme sections for customization.
Read more →Layout Tag
Liquid layout tag specifies Shopify theme layouts for pages.
Read more →Filters
Filters
Liquid filters modify Shopify data output like date or capitalize.
Read more →String Filters
Liquid string filters format Shopify text with append and split.
Read more →Number Filters
Liquid number filters format Shopify numbers with round and money.
Read more →Array Filters
Liquid array filters manipulate Shopify arrays with join and sort.
Read more →Date Filters
Liquid date filters format Shopify dates with date and time.
Read more →URL Filters
Liquid URL filters generate Shopify URLs with asset_url.
Read more →HTML Filters
Liquid HTML filters format Shopify HTML with strip_html.
Read more →Theme Development
Theme Development
Liquid theme development customizes Shopify storefronts with .liquid files.
Read more →Theme Structure
Liquid theme structure uses templates and sections for Shopify layouts.
Read more →Templates
Liquid templates define Shopify pages like product.liquid and cart.liquid.
Read more →Sections
Liquid sections create reusable Shopify content blocks with schema.
Read more →Snippets
Liquid snippets embed reusable code in Shopify themes.
Read more →Layouts
Liquid layouts define Shopify theme frameworks with theme.liquid.
Read more →Assets
Liquid assets manage Shopify CSS JS and images in theme assets.
Read more →Settings
Liquid settings use settings_schema.json for customizable Shopify themes.
Read more →Localization
Liquid localization uses t filter for multilingual Shopify themes.
Read more →Checkout Customization
Liquid checkout customization modifies Shopify checkout with limited access.
Read more →Integration
Storefront API
Liquid Storefront API integrates Shopify data with headless frontends.
Read more →Admin API
Liquid Admin API accesses Shopify data with script restrictions.
Read more →Ajax API
Liquid Ajax API handles Shopify cart updates with asynchronous calls.
Read more →Webhooks
Liquid webhooks trigger actions on Shopify events like order creation.
Read more →Script Tags
Liquid script tags inject JavaScript into Shopify storefronts.
Read more →Customization
Metafields
Liquid metafields extend Shopify data with custom fields.
Read more →Custom Pages
Liquid custom pages create unique Shopify content with templates.
Read more →Product Variants
Liquid product variants manage Shopify product options and prices.
Read more →Dynamic Sections
Liquid dynamic sections allow Shopify merchants to reorder content.
Read more →Custom Forms
Liquid custom forms handle Shopify input with validation.
Read more →Cart Customization
Liquid cart customization modifies Shopify cart with dynamic logic.
Read more →Checkout Forms
Liquid checkout forms enhance Shopify checkout with limited fields.
Read more →Performance
Performance
Liquid performance minimizes Shopify theme logic for faster rendering.
Read more →Minification
Liquid minification removes whitespace in Shopify themes for speed.
Read more →Asset Optimization
Liquid asset optimization compresses Shopify CSS and JS files.
Read more →Lazy Loading
Liquid lazy loading defers Shopify image loading for performance.
Read more →Testing
Testing
Liquid testing uses Shopify’s theme preview for functionality checks.
Read more →Theme Testing
Liquid theme testing validates Shopify layouts across devices.
Read more →Error Testing
Liquid error testing checks Shopify theme logic with default data.
Read more →Logging
Logging
Liquid logging uses {{ content | json }} for Shopify debugging.
Read more →Error Logging
Liquid error logging captures Shopify rendering issues with filters.
Read more →Request Logging
Liquid request logging tracks Shopify API calls with Ajax.
Read more →Examples
Product Page
Liquid product page displays Shopify product details with variants.
Read more →Collection Page
Liquid collection page lists Shopify products with pagination.
Read more →Cart Page
Liquid cart page manages Shopify cart items with dynamic updates.
Read more →Checkout Page
Liquid checkout page customizes Shopify checkout with limited fields.
Read more →Blog Page
Liquid blog page displays Shopify blog posts with comments.
Read more →Custom Form
Liquid custom form handles Shopify input with validation logic.
Read more →Dynamic Section
Liquid dynamic section creates customizable Shopify content blocks.
Read more →Metafield Display
Liquid metafield display shows Shopify custom data in themes.
Read more →Localization
Liquid localization enables multilingual Shopify themes with t filter.
Read more →Ajax Cart
Liquid Ajax cart updates Shopify cart with asynchronous API calls.
Read more →Theme Settings
Liquid theme settings customize Shopify themes with schema JSON.
Read more →Explore Our Tools
Liquid Code Commenter
This page provides the Liquid Code Commenter tool. Utilize it for your tasks.
Go to tool →Liquid Code Formatter
This page provides the Liquid Code Formatter tool. Utilize it for your tasks.
Go to tool →Liquid Error Explainer
This page provides the Liquid Error Explainer tool. Utilize it for your tasks.
Go to tool →Liquid Filter Reference
This page provides the Liquid Filter Reference tool. Utilize it for your tasks.
Go to tool →Liquid Object Reference
This page provides the Liquid Object Reference tool. Utilize it for your tasks.
Go to tool →Liquid Snippet Validator
This page provides the Liquid Snippet Validator tool. Utilize it for your tasks.
Go to tool →Liquid Theme Variable Analyzer
This page provides the Liquid Theme Variable Analyzer tool. Utilize it for your tasks.
Go to tool →Liquid to Twig Converter Preview
This page provides the Liquid to Twig Converter Preview tool. Utilize it for your tasks.
Go to tool →