Build Your Universal Footer

Create a reusable HTML footer for all your Grotto Slice Klaviyo templates in under 5 minutes.

This is outdated information. Universal Sections can now be used directly in Grotto Slice templates.

Grotto Slice turns beautiful designs into ready-to-send Klaviyo drag-and-drop templates. With the new template type, you have two good ways to handle a reusable footer:

  • Option A - native Klaviyo Universal Section: Build your footer in Klaviyo's drag-and-drop editor and save it as a Universal Section. This now works directly inside Grotto Slice templates - no rebuild needed.
  • Option B - single HTML block (what this tool does): Generate one clean, responsive HTML block from your existing footer, save it as a Universal Block in Klaviyo, and drag it into every template. Good if you want a single block to manage rather than a multi-block section.

The Footer Builder makes Option B fast and foolproof. You feed it your footer's email source code and a quick screenshot, and it returns clean, responsive HTML ready for Klaviyo's HTML block.

How to Create a Universal HTML Block in Under 5 Minutes

1

Send yourself a test email from Klaviyo

In Klaviyo, open (or create) a template that contains your footer. Click "Preview & Test" → "Send Test Email" to send it to your own email address.

2

Screenshot the footer design

Preview the template and screenshot just the footer area.

  • Mac: ⌘ + ⇧ + 4
  • Windows: Win + Shift + S
3

Copy the email's source code from Gmail

Open the test email in Gmail. Click the three dots (⋮) in the top-right corner of the email → select "Show original". In the new tab that opens, scroll down to the raw HTML content and click "Copy to clipboard". That's your source code.

4

Upload to Footer Builder

Back here in Grotto Slice → paste the email source code and upload your screenshot → click Generate Footer Code.

5

Paste generated code into Klaviyo

In the Klaviyo drag-and-drop builder: add an HTML block → paste the generated code.

6

Save as a Universal Section

In Klaviyo, save this HTML block as a Universal Section and reuse it across all future emails uploaded with Grotto Slice.

Troubleshooting

Images missing or broken?

  • Ensure your logo/socials are hosted on HTTPS and not local paths.
  • In Klaviyo, open the HTML block, confirm the src URLs are absolute (start with https://).
  • Confirm your anchor tags weren't stripped by a previous editor.

Frequently Asked Questions

Why do I need the email source code and a screenshot?

The source code preserves structure, links, and Klaviyo tags; the screenshot ensures the AI generates HTML that visually matches your approved design. This dual approach guarantees both functional and visual accuracy.

What file types can I upload for the screenshot?

JPEG, PNG, GIF, or WebP images up to 5MB. The AI uses this to understand your footer's visual layout, colors, and styling.

Will this work without Klaviyo?

Yes - it's standard email HTML. But it's optimized for Klaviyo's HTML block and works seamlessly with Grotto Slice templates. The generated code includes proper Klaviyo tags and responsive design.

Can I still use Klaviyo's native Universal Sections?

Yes - this changed with Klaviyo's updated template type. Native Universal Sections (built from drag-and-drop blocks) now work inside Grotto Slice templates. The Footer Builder is still useful if you prefer managing a single HTML block, but it's no longer required for compatibility.

What if my footer has complex layouts or multiple columns?

The AI is specifically trained to handle multi-column layouts, button grids, and responsive designs. It will maintain your layout structure on both desktop and mobile devices using email-safe table-based CSS.

How do I handle images and links in the generated footer?

The AI automatically converts image URLs to absolute paths and replaces standard links with Klaviyo tags (like {% unsubscribe_link %}). Make sure your images are hosted on HTTPS for best compatibility.

Can I edit the generated HTML after it's created?

Absolutely! The generated code is clean, well-structured HTML that you can modify in Klaviyo's HTML block editor. The AI provides a solid foundation that you can customize as needed.