The Freedom theme includes comprehensive "Custom Liquid" and "Custom HTML" tools. These allow you (or your developer) to inject custom code, third-party scripts, or advanced formatting directly through the Theme Editor without modifying the theme's source files.

Block vs. Section

Depending on where you need the code, you can use either the Section or the Block version.

1. Custom Liquid Section

Use this when you want to add a standalone element that spans the width of the page or exists independently of other content.

• Location: Can be added anywhere on the Homepage, Product Page, or custom Pages via "Add Section".

• Settings: Includes options for padding, margins, and full-width toggles.

• Use cases:

  • Embedding a Google Map <iframe>.

  • Adding a third-party widget (e.g., an Instagram feed or booking calendar) that needs its own row.

  • Creating a custom banner using your own HTML/CSS.

2. Custom Liquid Block

Thanks to the Theme Blocks architecture, you can drop a Custom Liquid block inside other sections (e.g., within the Product Information section or a Multicolumn section).

• Location: Can be nested inside supported sections.

• Use cases:

  • Looping through Lists: Standard text blocks cannot display "List" type metafields (e.g., a list of ingredients or features). Custom Liquid allows you to loop through them and render a bulleted list.

  • Dynamic Calculations: Performing math operations that aren't possible in standard text blocks (e.g., calculating savings percentage or "Buy 2 and save $X").

  • Third-Party App Snippets: Injecting code snippets provided by apps that do not yet support App Blocks (e.g., specific review stars or installment widgets).

  • Advanced Logic: Showing content based on complex conditions (e.g., "Show this banner only if the product has tag 'Final Sale' AND the customer is logged in").

How to use it

1. Add the Custom Liquid section or block.

2. In the settings panel, paste your code into the Liquid code or HTML field.

3. The editor will render valid HTML and Liquid immediately.

Examples

Example A: Looping through a List Metafield
If you have a metafield defined as a "List of single line text" (e.g., custom.ingredients), a standard text block will not display it correctly. Use Liquid to create a list:

<p><strong>Ingredients:</strong></p>
<ul>
  {% for item in product.metafields.custom.ingredients.value %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

Example B: Dynamic Math Calculation
Display how much a customer saves compared to the compare-at price:

{% if product.compare_at_price > product.price %}
  <p class="savings-text">
    You save {{ product.compare_at_price | minus: product.price | money }}!
  </p>
{% endif %}

⚠️ Important Disclaimer

This feature is intended for users with knowledge of Shopify Liquid, HTML, and CSS.

• No Validation: The code is rendered exactly as you type it. Errors in your code can break the layout of the page.

• Support: Our support team cannot debug, write, or fix code placed within these sections. If your custom code causes issues, please remove the block to restore functionality.