Custom liquid

Overview

The Custom liquid block enables you to add custom Liquid code or HTML directly into your chosen section. This is especially valuable for users seeking advanced storefront customization, allowing for unique content, dynamic logic, or third-party integrations without changing the fundamental layout of a section. The flexibility of this block supports a wide range of enhancements across the storefront.

⚠️ Important: Always preview and test your Custom liquid code before publishing. Errors may affect layout, performance, or accessibility on both desktop and mobile devices.

Custom liquid settings

Settings in the Custom liquid block give you control over injected content and device-specific display. This helps deliver the right custom experience to the right audience without adding unnecessary bloat sitewide.

Custom liquid code

The custom liquid code setting provides a freeform field to enter your own Liquid or HTML. You can use this to insert personalized messaging, data-driven banners, embedded widgets, or any specialized content not built into the section by default. The field starts out empty, so no content is added unless you provide your code.

📝 Note: The block will render whatever valid HTML or Liquid you supply in its designated place. Check for typos or errors and always preview your edits for best results.

Visibility settings

Visibility controls determine when and where your Custom liquid block appears, based on the user’s device. This ability to fine-tune block display targets your code to the right audience regardless of how they access your storefront.

1. Do not hide

   1. The block is shown on all devices.

   2. Default value

2. Hide on desktop

   1. The block appears only on mobile devices, hidden from desktop.

3. Hide on mobile

   1. The block appears only on desktop and larger screens, hidden from mobile.

Use these settings to tailor custom content for mobile-only audiences, desktop users, or all visitors.

💡 Tip: Review block display on both desktop and mobile after changing any visibility settings. Device-specific previews help ensure your messaging and layout work seamlessly everywhere.

Available in sections

The Custom liquid block can be used in the following sections throughout your theme:

1. Featured product

2. Blog post

3. Product information

4. Page content

Deploying the block in these areas helps you bring custom enhancements where they matter most, whether broadly or in specific section instances.

📝 Note: Some sections are alternate layouts or earlier versions. Always test your custom code in the context of the intended section to verify correct output and placement.

Usage notes

Responsive design is important—use visibility to ensure your custom content suits every device experience.
Performance matters; keep your custom code lean and efficient to avoid unnecessary delays.
Accessibility remains essential. Use semantic tags, provide alternative text, and ensure the block content is functional for keyboard and assistive technologies.
Thorough testing across all intended sections and device types helps prevent surprises post-launch.

⚠️ Important: By following best practices and testing extensively, the Custom liquid block provides a safe, flexible way to enrich your store’s user experience while maintaining accessibility and speed.