Sevemth > Sections > Custom HTML/Liquid

Custom HTML / Liquid

The Custom HTML / Liquid section allows you to add custom HTML and Liquid code directly to your theme. Perfect for advanced customization, third-party integrations, or custom functionality that isn't available through standard blocks.

What It Does

This section provides a flexible container for:

• Custom HTML code
• Liquid template code
• Third-party integrations
• Custom JavaScript
• Advanced styling
• App blocks from installed apps

Section Settings Explained

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section
• Options: None, Smaller, Default, Larger, Largest

Bottom Padding

• Controls space below the section
• Options: None, Smaller, Default, Larger, Largest

Show Media Background

• When enabled: You can add a background image or video
• When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

• Upload an image or video for the section background

Background Overlay (Only appears when background is set)

• Add a color overlay on top of the background
• Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

• Adds a scrolling parallax effect to the background
• Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

• Adjusts how content sits on the background

Make Section Full Height

• Makes the section fill the entire viewport height

Available Blocks

The Custom HTML / Liquid section supports:

Custom Block:

• Custom HTML/Liquid - Add your own HTML and Liquid code

App Blocks:

• Blocks from installed Shopify apps
• Third-party integrations
• App-specific functionality

Theme Blocks:

• All standard theme blocks
• Common blocks (Heading, Text, Image, Button, etc.)
• Specialized blocks as available

Custom Block Options

The Custom HTML/Liquid block allows you to add custom code:

Custom Liquid

• Enter HTML and Liquid template code
• Access to all Liquid objects and filters
• Can include JavaScript and CSS
• Supports Shopify theme variables

Common Use Cases

Third-Party Integrations

• Add custom tracking codes
• Integrate external services
• Embed widgets or tools
• Connect to APIs

Custom Functionality

• Add custom forms
• Create unique layouts
• Implement special features
• Build custom interactions

Advanced Styling

• Add custom CSS
• Create unique designs
• Override theme styles
• Implement custom animations

App Integrations

• Use blocks from installed apps
• Integrate app functionality
• Display app-specific content
• Connect app features

Tips for Success

Code Organization

• Keep It Clean - Write clean, readable code
• Comments - Add comments for complex code
• Testing - Test thoroughly before publishing
• Backup - Keep backups of custom code

Performance

• Optimize Code - Keep code efficient
• Minimize JavaScript - Avoid heavy scripts
• Cache Considerations - Be aware of caching
• Mobile Testing - Test on mobile devices

Security

• Sanitize Input - Always sanitize user input
• Avoid Sensitive Data - Don't expose sensitive information
• Validate Code - Check code for errors
• Follow Best Practices - Use Shopify best practices

Liquid Code

• Use Theme Objects - Leverage Shopify Liquid objects
• Filters - Use Liquid filters for formatting
• Conditionals - Use conditionals for logic
• Loops - Use loops for repetitive content

Troubleshooting

Code Not Displaying

Problem: Custom code doesn't appear on the page.

Solutions:

1. Check Syntax - Verify code syntax is correct
2. Liquid Errors - Check for Liquid template errors
3. HTML Validation - Validate HTML structure
4. Browser Console - Check browser console for errors

Styling Issues

Problem: Custom styles don't apply correctly.

Solutions:

1. CSS Specificity - Check CSS specificity
2. Theme Styles - Be aware of theme CSS conflicts
3. Inline Styles - Use inline styles if needed
4. CSS Scope - Scope CSS to avoid conflicts

JavaScript Not Working

Problem: Custom JavaScript doesn't execute.

Solutions:

1. Script Loading - Ensure scripts load correctly
2. DOM Ready - Wait for DOM to be ready
3. jQuery - Check if jQuery is available
4. Console Errors - Check browser console for errors

Liquid Variables Not Working

Problem: Liquid variables don't output correctly.

Solutions:

1. Syntax - Check Liquid syntax
2. Variable Names - Verify variable names
3. Object Access - Check object property access
4. Filters - Verify filter usage

Quick Reference

Code Examples

Basic HTML:

<div class="custom-content">
  <p>Your custom content here</p>
</div>

Liquid Code:

{% if shop.name %}
  <h2>Welcome to {{ shop.name }}</h2>
{% endif %}

JavaScript:

<script>
  // Your custom JavaScript
</script>

Best Practices