Custom HTML & AI-Generated Sections

AI-Powered Custom HTML Generation

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:

1. AI-Generated Custom Sections: Describe what you want, and our AI creates the HTML structure for you

2. Third-Party Integrations: Seamlessly add widgets, html & javascript or other custom functionality from other apps

Note: Custom HTML is available exclusively on Professional and Enterprise plans.

How EliteCart’s Custom HTML stands out

• Generate for up to 8 different positions in the cart

• Highly performant rendering

• Widget mode for third party script

• Communicate with the cart e.g. to conditionally render HTML

• AI generation of custom sections using latest Anthropic models

  • Extended thinking for difficult cases

What is Custom HTML?

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.

AI-Generated Sections

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

Third-Party App Integration

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

Third party scripts typically require Widget Mode to be enabled.

Getting Started

Accessing Custom HTML

1. Navigate to Cart Design → Custom HTML

2. Choose to AI generate or manually enter html

3. For AI generation, describe what you want to create

4. For manual entry, simply paste your HTML/JavaScript code

AI Section Generation

Writing Effective Prompts

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)

AI Generation Options

• Create new section: Generate completely new HTML content

• Modify existing: Update or enhance your current custom HTM

Rendering behavior

Static Rendering: Your HTML is rendered once when the cart drawer opens and does not automatically re-render when the cart updates. Scripts within your HTML execute only once per drawer open, not on cart changes.

To make your custom html react to cart changes you can use the onCartChange callback:

Accessing Cart Data: Use the global window.EliteCart object to access cart information without API calls:

• window.EliteCart.getCurrentCart() - Get current cart data

• window.EliteCart.onCartChange(callback) - Listen for cart updates

Example

Display a banner if the cart is over 2000€. This was generated by our AI 🤖

<div id="cart-banner" class="tw-hidden tw-px-3 md:tw-px-5 tw-mb-4">
  <div class="tw-bg-black tw-text-white tw-p-4 tw-text-center tw-font-semibold tw-rounded-md">
    <span>🎉 Congratulations! Your cart has reached 2000€!</span>
  </div>
</div>

<script>
  function updateCartBanner() {
    const cart = window.EliteCart.getCurrentCart();
    const banner = document.getElementById('cart-banner');
    
    if (cart && banner) {
      if (cart.total_price >= 200000) { // 2000€ = 200000 cents
        banner.classList.remove('tw-hidden');
      } else {
        banner.classList.add('tw-hidden');
      }
    }
  }
  
  // Initial update
  updateCartBanner();
  
  // Listen for cart changes
  window.EliteCart.onCartChange(updateCartBanner);
</script>

Interaction with the cart is limited to EliteCart’s api. Need functionality that doesn’t exist yet? Contact us.

Translations

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-

Preview vs Live Differences

If your custom HTML looks perfect in preview but broken on your live cart:

1. Script Loading Issues: External scripts may be blocked by Shopify or other security measures

2. CSS Conflicts: Your theme's styles might override widget styling

3. 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

Getting Help

For custom HTML support:

1. Contact Support: Use our chat feature for immediate assistance

2. Include Code Samples: Share the HTML/JavaScript you're trying to implement

3. Describe the Goal: Explain what you're trying to achieve

4. Provide Error Messages: Include any console errors or error messages

5. 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.