Editor

The Editor is a visual customization tool available for admins and developers. Use it to design how subscribers see and interact with the Customer Portal, create custom blocks, and ensure the whole subscription experience is perfectly aligned with your brand.

​

Editor layout

​

Sidebar tabs

When you select a block (or the page root), the sidebar offers up to three tabs:

1. Controls — Settings for that block: toggles, dropdowns, colors, and layout options.
2. Styles — Global theme for the portal (available on the main page root): density, surface style, corner shapes, and colors.
3. Translations — Override text for the current language at theme level or for the selected block.

Some text can also be edited directly in the preview. Click the text in the preview; it highlights as editable without using the sidebar.

​

Working with blocks

• Select — Click a block in the preview.
• Add — Use Add block on the page. Blocks are grouped as Juo Blocks (built-in), My blocks (your published custom blocks), and Integrations (partner blocks), when available.
• Reorder — Drag blocks in the sidebar composition list.
• Remove — Delete a block from the composition panel.
• Undo / redo — Revert recent layout and style changes.

​

Pages

In the current version of the Editor, you can edit the Main Customer Portal view and the Login page view. You can also edit views created by Workflows.

​

Built-in blocks

These are the standard blocks you can add, remove, and configure on the Main subscription page.

​

Header

Top of the portal: greeting, subtitle, and navigation actions.

• Edit greeting and subtitle inline
• Show or hide the customer name
• Choose menu layout: links or icon menu
• Reorder built-in actions (e.g. View orders, Log out) and add up to two custom links (label + URL)

​

Banner

A custom banner that can contain text, media, and applicable discount codes. Controls let you change presets, height, alignment, image placement, and CTA URL.

​

Renewal summary

A flexible renewal hub with status labels, next payment/delivery callouts, price breakdown, and actions (skip, renew now, pause, and more).

​

Upsell

Product recommendations carousel for add-ons, samples, and discounted items. Works with Upsells configured in Admin.

​

Upcoming order items

Line items for the next scheduled order. Customers can change products and add a discount code.

​

Customer subscriptions

Shows the customer’s other subscriptions when they have more than one.

​

Payment method

Section designed to view or update the payment method on file.

​

Delivery section

Shows shipping and delivery address details.

​

Subscription history

Shows past orders and billing history for the subscription.

​

Login

This block is dedicated for the Customer Portal login page. It allows you to customize the email sign-in flow and optional social providers. Many labels, buttons, and error messages support inline editing. Use presets to preview steps: email entry, code verification, validation errors, and social redirect.

​

Discount

Discount-related UI. See discounts for setup details.

​

Workflow action blocks

When you use Workflows for retention, cancellation saves, dunning, polls, and similar flows, each interactive step has a matching action block in the flow overlay. Open a workflow in the builder and click Preview in Editor to customize how that step looks to subscribers.

​

Global styles

At the Main page root, the Styles tab controls the theme applied across all blocks: Global styles are saved and published together with block layouts when you Publish.

​

Translations

The Translations tab lets you:

• Switch locale (language) for editing
• Override theme-wide strings
• Override strings for the selected block only

If you don’t override a string, the default translation is used. Overrides are stored per locale and published with the rest of your theme.

​

Draft and publish

Publish is enabled when there are unsaved changes or unpublished drafts. Review the preview on desktop and mobile, and check data with preview customer, before publishing. There is no partial publish per block—all draft changes go live together when you publish.

​

Tips

1. Use preview customer to verify renewal dates, Upsells, and notification banners with real data.
2. Use presets on blocks like Subscription notifications, Renewal summary v2, and Upsell to design for edge cases—not only the happy path.
3. Block order matters for subscriber scanning: header → alerts → renewal → upsell → details. Remove blocks you do not need.
4. Management options (what subscribers can do in the portal) are still configured in General settings—the Editor controls layout and presentation.

---

​

Custom blocks (for developers)

Merchants can extend the portal with custom blocks built by a development team or agency. Custom blocks appear in the Editor under My blocks after they are published to your shop.

​

When to use custom blocks

• Brand-specific widgets (loyalty, calculators, third-party embeds)
• Unique layout or data not covered by built-in Juo blocks
• Elements injected from external integrations, grouped as Integrations

Built-in product features (renewal, upsell, login, workflows) should stay on Juo Blocks unless you are intentionally replacing a section with a maintained custom implementation.

​

How it works

1. A developer creates a block theme project (React or Preact components by default).
2. Each block defines a name, merchant-editable settings (shown in the Controls tab), a renderer for the Customer Portal, and optional presets and locale files.
3. The project is built and published to Juo’s block registry for your shop.
4. The Customer Portal loads the registry alongside built-in blocks; the Editor discovers new blocks automatically.

To learn more about the implementation of custom blocks, please consult our detailed developer documentation here: Blocks