The Custom Liquid element allows you to embed any HTML, CSS, and Liquid-based code to enrich your store and expand on the default capabilities of Instant.
Overview
With Custom Liquid, you can add custom functionality, third-party integrations, or specialized features that aren't available through standard Instant elements.
Common Use Cases
Use Case | Description |
Custom widgets | Add specialized functionality not available in Instant |
Third-party embeds | Integrate external services and tools |
Advanced styling | Apply custom CSS for unique designs |
Liquid logic | Use Shopify's Liquid templating for dynamic content |
Custom scripts | Add JavaScript for interactive features |
Plan Availability
Note: The Custom Liquid element is part of the Business plan. For access, reach out to the support team at [email protected]
Support Limitations
Important: Instant does not offer custom code support. While you can use the Custom Liquid element to add your own code, our support team cannot assist with writing, debugging, or troubleshooting custom HTML, CSS, JavaScript, or Liquid code.
Supported | Not Supported |
Access to the Custom Liquid element | Writing custom code for you |
Element placement and settings | Debugging your custom code |
Publishing layouts with custom code | Troubleshooting code errors |
General product questions | Code optimization or best practices |
Getting Started with the Custom Liquid Element
Step 1: Insert the Element
Open the Insert panel in the left sidebar
Navigate to Embed
Select the Custom Liquid element
Drag it onto the canvas where you want to utilize custom code
Step 2: Open the Code Editor
Select the Custom Liquid element on the canvas
In the right sidebar, click Open editor
A popover appears where you can insert and edit your code
Step 3: Write and Preview Your Code
Enter your HTML, CSS, or Liquid code in the editor
The code results are directly reflected on the canvas
Make adjustments as needed
Supported Code Types
Code Type | Description |
HTML | Structure and content markup |
CSS | Styling and visual appearance |
Liquid | Shopify's templating language for dynamic content |
JavaScript | Interactive functionality (inline or embedded) |
Quick Reference
Task | Action |
Insert Custom Liquid | Insert panel → Embed → Custom Liquid |
Open code editor | Select element → Right sidebar → Open editor |
Preview changes | Code reflects directly on canvas |
Get element access | Contact [email protected] (Business plan required) |
Requirements
Requirement | Details |
Plan | Business plan or higher |
Knowledge | Understanding of HTML, CSS, and/or Liquid |
Support | Custom code support not included |