Custom Liquid

The Custom Liquid Section is a versatile section type that allows you to inject custom Liquid code into your Shopify theme. Liquid is Shopify’s templating language that lets you access dynamic content, including product information, collections, blog posts, and more. With the Custom Liquid Section, you can create highly customized content and functionality without the need for third-party apps.

This section is ideal for adding advanced features or content that doesn't fit into predefined sections, such as integrating custom code snippets, displaying specific dynamic content, or creating custom layouts.

Features of the Custom Liquid Section

1. Flexibility in Content Display

   • The Custom Liquid Section provides you with the flexibility to display any content, including product details, blog excerpts, customer reviews, or special offers, using Shopify’s Liquid language.

   • You can access store data (like collections, products, or customer information) directly within the section to tailor content based on your store’s current offerings.

2. Customizable Layout

   • You can design the layout of the section using HTML, CSS, and JavaScript, alongside Liquid. This allows you to create entirely custom visual displays for your content.

   • This section can be used to add forms, embeds, or dynamic content like live sales notifications or promotions.

3. Integration of Dynamic Data

   • The section can be used to display dynamic content such as product recommendations, featured collections, or any data pulled from Shopify’s backend using Liquid. You can use Liquid filters to manipulate data for custom display, such as sorting or formatting product listings.

4. Full Control Over Section Content

   • Unlike other sections that use a fixed set of fields (like image uploads or text inputs), the Custom Liquid Section allows you to write and display any Liquid code that suits your needs.

   • You can also use Shopify’s built-in metafields or third-party app data for additional customization.

5. Advanced Customization

   • For advanced users, this section is ideal for integrating third-party scripts, widgets, or other external content that requires custom coding.

How to Add the Custom Liquid Section

1. Access the Theme Editor

   • From your Shopify Admin, go to Online Store > Themes.

   • Select your theme and click Customize to open the Theme Editor.

2. Navigate to the Page or Template

   • Choose the page or template where you want to add the Custom Liquid Section. This could be the homepage, a product page, or any custom page where you want to insert dynamic content.

3. Add the Custom Liquid Section:

   • In the Theme Editor, click on Add Section in the left-hand sidebar.

   • Scroll down through the available sections and select Custom Liquid. This section will now be added to your page.

4. Insert Your Custom Liquid Code

   • Once added, you’ll see a text box where you can insert your Liquid code. You can write any Liquid logic you need here, such as:

     • Displaying a collection of products.

     • Accessing product attributes like price or availability.

     • Showing blog post previews.

     • Embedding a custom widget or script.

   Example Liquid code for displaying a list of products from a collection: liquid

   

   {% for product in collections['frontpage'].products %}

   <div class="product">

   <h2>{{ product.title }}</h2>

   <p>{{ product.price | money }}</p>

   <a href="{{ product.url }}">View Product</a>

   </div>

   {% endfor %}

5. Customize the Layout with HTML and CSS

   • You can combine your Liquid code with HTML for structuring the content and CSS for styling it.

   • For example, you can create custom buttons, product grids, or even dynamic filters depending on the Liquid logic you implement.

6. Configure Optional Settings

   • Some themes may provide additional settings to configure the behavior of the section (e.g., background color, margins, or visibility). Customize these settings based on your store’s design needs.

7. Preview and Adjust

   • After inserting the code and making any adjustments, preview the section to ensure it appears as you expect.

   • You may need to adjust your CSS or Liquid code based on how it renders in different screen sizes or on different pages.

8. Save and Publish

   • Once you're satisfied with the Custom Liquid Section, click Save to apply the changes.

   • The section will now be live on your store.

Examples of Use Cases for the Custom Liquid Section

1. Displaying Dynamic Product Information

   • Use Liquid to pull specific product details dynamically based on the current product page or cart contents.

   • Example: Display product recommendations or "You May Also Like" sections.

2. Promotions or Announcements

   • Use this section to display promotional content such as banners, flash sales, or limited-time offers with dynamic content pulled from the store’s discount codes or special promotions.

3. Custom Forms or Integrations

   • If you need to embed a custom form or third-party integrations (like a custom newsletter signup, survey, or custom widget), this section can be used to insert the necessary code.

4. Embedding Custom Widgets or Scripts

   • If you have third-party scripts or widgets (e.g., Instagram feeds, live chat, or other integrations), the Custom Liquid Section is the perfect place to insert the HTML and JavaScript required for these elements.