Custom liquid

The Custom Liquid block allows users to add custom Liquid code into specific sections of their theme, providing flexibility for integrating third-party applications or displaying dynamic content using metafields. This block can be used in sections such as Featured Product, Blog Post, and Product Information, enhancing the customization capabilities of your theme.

Users can control the visibility of the Custom Liquid block, choosing to hide it on specific devices like desktop or mobile, or keep it visible across all platforms. This ensures that content is displayed appropriately based on user preferences and device types.

Practical usage examples include integrating third-party applications by adding code snippets for chat widgets or analytics tools, displaying dynamic content from metafields such as personalized product recommendations, and customizing product information with additional details not available through default settings.

Overview #

The Custom Liquid block is designed to allow users to add custom Liquid code into specific sections of their theme. This functionality is particularly useful for integrating third-party applications or displaying dynamic content using metafields. The block can be utilized in various sections such as Featured Product, Blog Post, and Product Information, providing flexibility in content customization.

Key components and functionality #

Custom Liquid

This setting allows users to input custom Liquid code, enabling the integration of dynamic content or third-party applications directly into the theme. This feature is essential for users who need to extend the functionality of their theme beyond the default capabilities.

Visibility

The visibility setting controls when and where the block is displayed. Users can choose to hide the block on specific devices, such as desktop or mobile, or keep it visible across all platforms. This flexibility ensures that the content is displayed appropriately based on the user's preferences and the device being used.

• Options:
  1. Do not hide
  2. Hide on desktop
  3. Hide on mobile
• Default: Do not hide

Available in sections #

• Featured product
• Blog post
• Product information

Usage notes #

• Responsive design: Ensure that the Liquid code used is responsive and adapts well to different screen sizes to maintain a consistent user experience across devices.
• Performance: Be mindful of the complexity and size of the Liquid code to avoid negatively impacting the page load times.
• Accessibility: Ensure that any dynamic content added through the Custom Liquid block is accessible to all users, including those using assistive technologies.

Usage examples #

1. Integrating a third-party application: Use the Custom Liquid block to add code snippets provided by third-party applications, such as chat widgets or analytics tools, to enhance the functionality of your store.

2. Displaying dynamic content: Utilize Liquid code to pull and display dynamic content from metafields, such as personalized product recommendations or user-specific messages, directly within the sections where the block is used.

3. Customizing product information: In the Product Information section, use the Custom Liquid block to add additional product details or specifications that are not available through the default settings.