Shopify Development - Learn Shopify Liquid Programming

Explore liquid objects as containers for data, learn how attributes provide dynamic content via dot notation, and distinguish static from dynamic values using the product object as examples.

Explore global objects in Shopify liquid, using all_products to access any product across templates via a product handle and dot notation, contrasting with regular product objects.

Explore content objects in liquid that output template and section content using header, index, and layout objects. See how they load scripts, enable sections, and render pages in Shopify themes.

Fix the content for index bug by adding a hero section and wiring it through settings data and the content_for_index array, restoring the add section button.

Learn how to fix the missing add section button in Shopify themes by using JSON templates, defining sections and orders, and wiring section IDs like main-index-section and example-section.

Explore liquid tags in Shopify themes, including control flow tags, iteration tags, theme tags, and variable tags. Learn to use tags to make decisions, loop code, and render content conditionally.

Explore Shopify Liquid control flow tags, including if, unless, case, when, else, and end tags, plus and or operators, to conditionally render content.

Explore logical and comparison operators in Shopify Liquid, such as is equal, is not equal, greater than, less than, and learn to combine them with if and unless tags.

Learn how Liquid iteration tags drive repeated blocks with the for tag and its loop object, cycle, and table row tags, and how to build ranges and IDs.

Learn how Shopify theme tags control template html output, switch layouts, render snippets or sections, paginate collections, and use comment, echo, form, render, and style tags.

Explore how liquid filters modify object outputs by applying and chaining filters—from uppercase and remove to money and replace—demonstrating left-to-right execution and practical formatting examples.

Learn to create variables in Shopify liquid with assign, capture, increment, and decrement tags, handling strings, numbers, booleans, and arrays, and use global objects like all products with if tags.

Learn how to use the capture tag in Liquid to create string variables, concatenate strings, and interpolate variables to produce dynamic outputs in a Shopify theme.

Learn how Shopify Liquid increment and decrement tags modify variables by one, with examples showing separate variables for assign and increment tags, and how decrement yields negative values.

Shopify liquid handles let you access attributes of specific objects, distinguishing singular products from the all_products global, using bracket notation for variables and dot notation for fixed handles.

Learn how to access files in the Shopify theme assets folder using the asset_url filter, reference them in HTML, and upload new assets like images.

Learn to create a custom pagination in liquid for Shopify, including previous, next, and page links, and reuse it across collections and orders via a pagination snippet with render.

Learn to build and render a nested navigation in Shopify using the link list object, main menu handles, and Liquid loops to create multi-level menus.

Learn how sections in Shopify theme development are reusable, customizable modules you add with the section tag and schema. Practice creating and editing sections in Liquid files and theme editor.

Learn to create and use input settings in a section schema to customize Shopify theme content, using type, id, and label for the theme editor.

Learn to customize a Shopify section by using the section object's id and its settings to output the text_input value via section.settings.text_input and render content.

Learn to add sections to a Shopify theme via the theme editor by using presets with a name and settings, creating text sections, and styling content like font size.

Learn to build an FAQ section in Shopify using section blocks and blocks, arrange and customize questions and answers, and implement a Bootstrap accordion in the theme editor.