Shopify Liquid Development - Custom Templates

1. Shopify Liquid Development - Custom Templates This document provides an overview of developing custom templates in Shopify using Liquid, Shopify's templating language. It covers the fundamental concepts, best practices, and practical examples for creating tailored storefront experiences. By understanding Liquid and its capabilities, developers can build unique and engaging online stores that meet specific business requirements. Introduction to Shopify Templates Shopify themes are built using a combination of HTML, CSS, JavaScript, and Liquid. Liquid is a template language created by Shopify and written in Ruby. It is used to load dynamic content on the storefront. Templates are the core building blocks of a Shopify theme, defining the structure and content of different page types, such as product pages, collection pages, and blog posts. Understanding Liquid Liquid is a server-side templating language, meaning that the Liquid code is processed on Shopify's servers before the HTML is sent to the user's browser. Liquid code is enclosed within double curly braces {{ }} for outputting variables and values, and within curly braces and percent signs {% %} for logic and control flow. Key Liquid Objects Liquid provides access to various objects that contain data about the store, products, collections, customers, and more. Some of the most commonly used objects include: • shop: Contains information about the store, such as its name, URL, and currency. • product: Contains information about a specific product, such as its title, description, price, and images. • collection: Contains information about a collection of products, such as its title, description, and products. • customer: Contains information about the currently logged-in customer, such as their name, email, and order history. • cart: Contains information about the customer's shopping cart, such as the items in the cart and the total price. • page: Contains information about a specific page, such as its title and content. • blog: Contains information about a blog, such as its title and articles. • article: Contains information about a specific blog article, such as its title, content, and author. Liquid Tags Liquid tags are used to control the flow of logic within a template. Some common tags include: • {% if %} / {% else %} / {% endif %}: Used for conditional logic. • {% for %} / {% endfor %}: Used for looping through arrays or collections.

2. • {% assign %}: Used to assign a value to a variable. • {% capture %}: Used to capture the output of a block of code into a variable. • {% include %}: Used to include another template file. • {% section %}: Used to render a section. • {% schema %}: Used to define settings for a section. Liquid Filters Liquid filters are used to modify the output of variables. They are applied using the pipe character |. Some common filters include: • date: Formats a date. • money: Formats a number as currency. • capitalize: Capitalizes the first word of a string. • downcase: Converts a string to lowercase. • upcase: Converts a string to uppercase. • truncate: Truncates a string to a specified length. • strip_html: Removes HTML tags from a string. Creating Custom Templates Shopify allows you to create custom templates for various page types. This enables you to design unique layouts and functionalities for specific products, collections, or pages. Template Types • Product Templates: Used to customize the appearance of individual product pages. • Collection Templates: Used to customize the appearance of collection pages. • Page Templates: Used to customize the appearance of static pages. • Blog Templates: Used to customize the appearance of blog index pages. • Article Templates: Used to customize the appearance of individual blog posts. Creating a New Template 1. Navigate to the Theme Editor: From your Shopify admin, go to Online Store > Themes. 2. Edit Code: Click "Actions" > "Edit code". 3. Create a New Template File: In the "Templates" directory, click "Add a new template". 4. Select Template Type: Choose the type of template you want to create (e.g., "product"). 5. Enter Template Name: Enter a name for your template (e.g., "custom-product"). Shopify will automatically append the .liquid extension. 6. Add Liquid Code: Write the Liquid code for your template. You can start by copying the code from the default template for that page type and then modifying it to suit your needs. Assigning a Template Once you've created a custom template, you need to assign it to a specific product, collection, or page. • For Products: Go to Products in your Shopify admin, select the product, and choose your custom template from the "Theme template" dropdown in the "Organization" section.

3. • For Collections: Go to Collections in your Shopify admin, select the collection, and choose your custom template from the "Theme template" dropdown in the "Theme template" section. • For Pages: Go to Pages in your Shopify admin, select the page, and choose your custom template from the "Theme template" dropdown in the "Template" section. • For Blogs: Go to Online Store > Blog posts > Manage blogs in your Shopify admin, select the blog, and choose your custom template from the "Template suffix" dropdown in the "Optional template suffix" section. • For Articles: Go to Online Store > Blog posts, select the article, and choose your custom template from the "Theme template" dropdown in the "Template" section. Example: Custom Product Template Let's create a custom product template that displays a product's description in a more prominent way and adds a custom banner. 1. Create a new template file: Create a new template file named custom-product.liquid in the "Templates" directory. 2. Add the following code to the template:

4. {% layout 'theme.liquid' %} <div class="product-template"> <div class="custom-banner"> <h2>Special Offer!</h2> <p>Limited time only - get 10% off this product!</p> </div> <h1>{{ product.title }}</h1> <div class="product-description"> {{ product.description }} </div> <div class="product-images"> {% for image in product.images %} <img src="{{ image | img_url: 'medium' }}" alt="{{ product.title }}"> {% endfor %} </div> <p>Price: {{ product.price | money }}</p> <form action="/cart/add" method="post"> <input type="hidden" name="id" value="{{ product.variants.first.id }}"> <input type="submit" value="Add to Cart"> </form> </div> <style> .custom-banner { background-color: #f0f0f0; padding: 20px; text-align: center; margin-bottom: 20px; } </style> 3. Assign the template: Assign the custom-product template to a specific product in your Shopify admin. This example demonstrates how to create a custom product template with a unique layout and styling. You can further customize this template to add more features, such as product reviews, related products, or custom product options. Best Practices • Use Sections and Blocks: Leverage sections and blocks to create modular and reusable components. This makes it easier to manage and update your templates. • Keep Code Clean and Organized: Use proper indentation and comments to make your code more readable and maintainable. • Optimize for Performance: Minimize the use of complex Liquid logic and optimize images to improve page load times. • Test Thoroughly: Test your templates on different devices and browsers to ensure they are responsive and function correctly.

5. • Use Version Control: Use Git or another version control system to track changes to your templates and collaborate with other developers. • Follow Shopify's Documentation: Refer to Shopify's official documentation for the latest information and best practices. Conclusion Creating custom templates in Shopify using Liquid allows you to build unique and engaging storefront experiences. By understanding the fundamentals of Liquid and following best practices, you can create tailored templates that meet the specific needs of your business and customers. Remember to test your templates thoroughly and optimize them for performance to ensure a smooth and enjoyable shopping experience.