Custom liquid

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Custom liquid section allows you to enhance your storefront with custom code and bespoke content. This section is perfect for users who want to introduce dynamic features, custom banners, unique integrations, or interactive widgets that go beyond standard options. By using this section, you can create a highly personalized experience for your shoppers.

⚠️ Important: The Custom liquid section offers advanced control over your storefront content. Always preview and test your updates across all devices to ensure they look and function as intended.

Key components and functionality

About the Custom liquid section

The Custom liquid section gives you a dedicated space to add Liquid code, HTML, or scripts right to your page. You can display tailored announcements, product details, unique widgets, or content elements designed for your brand. This section puts you in full control of custom content display.

Custom liquid code

The custom liquid code field is a flexible area where you can add any valid Liquid, HTML, or JavaScript code. By default, this field is empty. As you add your code here, your changes will appear wherever the section is placed.

1. Add your Liquid code, HTML, CSS, or JavaScript in this section.

2. Create custom messages, show or hide content based on logic, or embed other services as needed.

3. Your updates will render instantly after saving and will be visible wherever the section is used.

💡 Tip: Try building your custom content in small increments and verify that each addition displays correctly. This approach helps avoid unexpected issues and makes troubleshooting easier.

Visibility settings

Visibility settings allow you to control whether this section appears on desktop devices, mobile devices, or both. This is especially useful when you want to tailor your message or content for specific devices.

Select one of these options:

1. Do not hide

   1. Default value. Section is shown everywhere.

2. Hide on desktop

   1. Section is hidden from desktop users and shown only to mobile visitors.

3. Hide on mobile

   1. Section is hidden from mobile users and shown only to desktop visitors.

The default visibility setting is do not hide, so your section will be visible to all unless changed.

📝 Note: Use these visibility controls to create mobile-only messaging, desktop-specific banners, or device-adapted features for your customers.

Supported block types

This section does not support additional blocks. All customization and content updates are handled within the main section settings.

Usage notes

1. Ensure your custom code is valid, secure, and efficient to preserve your storefront’s layout and performance.

2. Always preview your content on both desktop and mobile devices before publishing changes to catch any display issues.

3. Avoid using heavy scripts or resource-intensive features so your site loads quickly and reliably.

4. Write accessible and semantic HTML, including headings and ARIA attributes, to support users who rely on assistive technology.

   1. Provide clear text, proper hierarchies, and easy-to-understand navigation wherever possible.

⚠️ Important: Use the Custom liquid section thoughtfully. Responsible customization protects performance, keeps your storefront accessible, and ensures the best experience for all visitors.