EliteCart's powerful design editor provides extensive customization options for your cart drawer. However, when you need to add completely custom sections, integrate third-party app widgets, or insert specialized HTML and JavaScript code, the Custom HTML feature gives you almost unlimited flexibility.
This advanced feature serves two primary purposes:
AI-Generated Custom Sections: Describe what you want, and our AI creates the HTML structure for you
Third-Party Integrations: Seamlessly add widgets, html & javascript or other custom functionality from other apps
The Custom HTML feature allows you to inject raw HTML, CSS, and JavaScript directly into your cart drawer. This opens up endless possibilities for customization and integration that go beyond what's possible through our visual editor.
Our AI can create custom HTML sections based on your descriptions, including:
Custom promotional banners
Special offer displays
Unique layout structures including texts, images, icons, links, and more.
Custom information sections
Many apps provide HTML or JavaScript snippets that need to be embedded in your cart:
Review widgets (Trustpilot, Judge.me, Yotpo)
Trust badges and security seals
Analytics tracking codes
Marketing widgets (exit-intent, recommendations)
Customer support chat widgets
Social proof notifications
Navigate to Cart Design → Custom HTML
Choose to AI generate or manually enter html
For AI generation, describe what you want to create
For manual entry, simply paste your HTML/JavaScript code
Describe your desired section clearly and specifically:
Good prompts:
"Create a promotional banner highlighting free shipping over $50"
"Add a customer review section showing 5 full stars and our rating of 4.9 with over 500 reviews"
"Create a trust badge area with a security icon next to the words: secure shopping"
Bad prompts:
"Add something promotional" (too vague)
"Make it look better" (not specific enough)
"Add content" (unclear what type)
Create new section: Generate completely new HTML content
Modify existing: Update or enhance your current custom HTM
You cannot currently access the cart total or similar variables in the cart. Required? Reach out to us.
If your store supports several languages using the native Shopify multi-language feature. You can also translate custom HTML sections.
Just click on Make Translatable and the available languages will automatically become visible with the original section’s html applied. You can then modify the HTML for each language, either changing things up completely or just translating visible text or links. Tip: Use AI to do that for you-
If your custom HTML looks perfect in preview but broken on your live cart:
Script Loading Issues: External scripts may be blocked by Shopify or other security measures
CSS Conflicts: Your theme's styles might override widget styling
Domain Restrictions: Some widgets only work on specific domains
Solutions:
Test widgets on your actual domain, not preview links
Contact the widget provider for domain-specific configuration
Check browser console for loading errors
Ensure all external resources are properly whitelisted
For custom HTML support:
Contact Support: Use our chat feature for immediate assistance
Include Code Samples: Share the HTML/JavaScript you're trying to implement
Describe the Goal: Explain what you're trying to achieve
Provide Error Messages: Include any console errors or error messages
Share Widget Documentation: Include links to third-party widget setup guides
Need assistance with Custom HTML? Our Professional plan support team specializes in complex integrations and custom development. We're here to help you achieve exactly what you need for your cart.
