Everything you need to add custom code to your store using the Custom Liquid section — from understanding what Liquid is and how to use it, to configuring layout, padding, and color scheme settings.
Liquid is the templating language used by Shopify to display dynamic content on your store. It acts as the bridge between the data in your Shopify admin (like products, collections, and pages) and the HTML that visitors see in their browser. With Liquid, you can pull in store information, create conditional content, loop through lists of items, and build layouts that update automatically when your data changes.
Liquid code is written using special tags wrapped in curly
braces. Output tags like
{{ product.title }} display a piece of data on
the page. Logic tags like
{%- if ... -%} let you show or hide content based
on conditions. You can also use filters to
format text, dates, prices, and more.
In the Boardwalk theme, the Custom Liquid section gives you a dedicated space to write your own Liquid code directly within the Theme Editor. This is useful for adding custom content, embedding app snippets, or creating advanced layouts that go beyond what the standard sections offer. Whatever you type into the Custom Liquid field is rendered directly on your page, giving you full control over the output.
Use with care: Liquid code runs directly on your live storefront. Incorrect or broken code can cause parts of your page to display incorrectly or not appear at all. If you're not comfortable writing code, consider reaching out to a Shopify developer for help. Always preview your changes before publishing them to your live store.
Follow these steps to add and configure the Custom Liquid section on any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to add custom code using the page selector
dropdown at the top center of the editor.
Click Add section in the Theme Editor sidebar and choose Custom liquid from the list under the Advanced category. The section will appear on your page ready for you to enter your code.
Click the Custom liquid section in the sidebar. You'll see a text field labeled Custom Liquid where you can write or paste your Liquid code, HTML, or app snippets.
For example, you could display a custom message using
basic HTML, output dynamic store data with Liquid tags
like {{ shop.name }}, or embed a snippet
provided by a third-party app.
Note: The Custom Liquid field supports standard HTML, CSS, and Liquid code. JavaScript is not supported in this field. If you need to add JavaScript to your store, you'll need to edit your theme files directly.
Adjust the section width, color scheme, and padding to control how your custom content fits within the rest of your page layout. These settings are covered in detail in the next section of this guide.
The Custom Liquid section supports app blocks, which let compatible Shopify apps inject their own content directly into the section. Click Add block inside the section settings to see available app blocks from your installed apps.
Click Save in the Theme Editor. Preview your page to verify that your custom code is rendering correctly. Always check both desktop and mobile views to make sure the output looks right on all screen sizes.
These settings apply to the entire Custom Liquid section and are accessible by clicking the top-level section in the Theme Editor sidebar.
A text field where you write or paste your Liquid code, HTML, or app snippets. Whatever you enter here is rendered directly on the page. You can use Liquid output tags, logic tags, and filters to create dynamic content.
Controls the maximum width of the section content.
Options: Page (matches your theme's content
width) or Full (stretches to 100% of the
browser window). Use Page to keep your
custom content aligned with the rest of your store
layout, or Full for full-bleed designs.
Select any defined color scheme to style the section background and text. Color schemes are defined in your theme settings and apply consistent colors across your store.
Controls the top and bottom padding of the section on desktop screens. Range: 0px to 100px.
Controls the top and bottom padding of the section on mobile screens. Range: 0px to 100px.
The Custom Liquid section supports Shopify app blocks. App blocks are content modules provided by third-party apps that you've installed on your store. When an installed app offers an app block, it will appear as an option when you click Add block inside the section.
App blocks are rendered below your custom Liquid code in the order they appear in the sidebar. You can reorder them by dragging and dropping within the section. This makes the Custom Liquid section a flexible container for combining your own code with app-provided content in a single area of the page.
Note: App blocks only appear if you have compatible apps installed on your store. If no apps support app blocks, the Add block option may not show any choices.
Here are some popular ways store owners use the Custom Liquid section to add unique content and functionality to their pages.
Many Shopify apps provide Liquid snippets that you can paste into a Custom Liquid section. This is useful for adding things like trust badges, countdown timers, review widgets, or social feeds without editing your theme code files directly.
Use Liquid output tags to display information from your
store, such as your shop name, the current customer's
name (if logged in), or details about the current page.
For example, {{ shop.name }} outputs your
store's name wherever the section is placed.
Add custom HTML directly — things like styled banners, embedded maps, iframes, or informational callouts that aren't covered by the theme's built-in sections.
Use Liquid logic tags to show or hide content based on conditions. For example, you could display a special message only to logged-in customers, or show different content based on which page the visitor is viewing.
Add <style> blocks with custom CSS
to adjust the appearance of your content. This is
helpful when you need specific spacing, colors, or
typography that aren't available in the section settings.
Keep these points in mind when working with the Custom Liquid section to avoid issues on your live store.
Before saving changes to your live store, use the Theme Editor's preview mode to check that your Liquid code renders correctly. Broken code can cause layout issues or blank areas on your storefront.
The Custom Liquid field accepts HTML, CSS, and Liquid code, but it does not run JavaScript. If your customization requires JavaScript, you'll need to add it to your theme's code files directly through Online Store → Themes → Edit code.
The section uses your theme's color schemes for background and text colors. These are defined in Online Store → Themes → Customize → Theme settings → Colors. Make sure you've configured the color schemes you want to use before setting one on this section.
If you're embedding app snippets, make sure the app is installed and active in your Shopify admin. Some apps require their own setup steps (like creating an account or configuring settings within the app) before their Liquid snippets will produce any output.
If your Liquid code contains a syntax error, Shopify may
display an error message on the page or simply show
nothing. Check that your tags are properly opened and
closed (e.g., every {%- if -%} has a
matching {%- endif -%}). Shopify's
Theme Inspector browser extension can
help identify issues.
{{ shop.name }}), logic tags (like
{%- if -%} and
{%- for -%}), filters, and app snippets
provided by installed apps. JavaScript is not supported
in this field.
<p>Hello</p>) to confirm the
section is working, and then build up your code from
there.
{%- render 'snippet-name' -%} tag in the
Custom Liquid field instead.
theme.liquid file
through the code editor.