Affinity Home Page Builder

The Affinity Home Page Builder gives you full control over your customer portal home page, without code. Design a branded entry experience that surfaces key actions, reduces friction, and aligns with your retention strategy using a visual page builder.

This guide provides information about the Affinity Home Page Builder.

Key features

No-code home page customization

Design your Affinity home page using a visual page builder, no development required. Add, remove, and reorder sections, and include static content like banners or informational blocks to match your brand and customer experience.

Mobile-friendly navigation

Use a condensed top navigation for a cleaner, more intuitive experience, especially on mobile. Choose whether navigation appears only on the home page or persists across the portal.

Centralized style, copy, and translations

Manage styles, copy, and translations for your Affinity home page from one place. Updates apply across other onsite experiences that use Affinity styling, helping you maintain consistent branding.

Highlight important customer actions and messages

Surface key information, such as credits, referral links, or announcements, directly on the home page so customers understand what’s available and can take action quickly.

Set up the Affinity customer portal using the Home Page Builder

Step 1 - Access the page builder in the merchant portal 

Access the page builder from your customer portal settings:

1. In the merchant portal, click Storefront, then select Customer portal.

2. Under Themes, click your theme’s Home page to expand the options.

3. From the expanded list, choose Recommended: Design your own custom home page under the Affinity customer portal theme.

4. Click Customize.

Step 2 - Customize the experience

Use the page builder to customize the following sections of the home page:

Header

• Welcome message: Update the message customers see when they first access the portal.

• Navigation: Control how and where menu items appear. You can:

  • Show navigation on all pages or only on the home page

  • Reorder items using the six-dot menu

  • Edit labels or remove items

  • Add custom links using Add a block

• Callout: Highlight important information or actions for customers.

Main column

• Next order detail: Customize the upcoming order experience. You can:

  • Update headings and savings text

  • Show or hide actions like Send now, Reschedule, and Skip at the order level

  • Configure order offers and offer strip titles

  • Update product titles and enable swaps or cancellations at the line-item level

  • Add an Add product button and customize the label

  • Allow product-level Skip and Reschedule now options

• Order summary: Update titles and discount-related labels.

• Credit balance

• Shipping and payment: Update the section title.

• Also on this date: Customize headings, labels, and button text.

Right column

• Announcement: Customize an announcement.
• Referrals: Add a referrals section to promote your referral program in the customer portal.
• Cross-sell carousel: Display recommended products to encourage additional purchases.
• Not in your next order: Show products that customers have removed or skipped from their next order.
   

Add a section

In each of the sections listed above, you can also select Add a section to add one or more of the following to any section:

• Custom HTML
• Video
• Callout
• Columns
• Text and image
• Image
• Announcement
• Credits balance
• Referral link

Image requirements: Images must be square and no larger than 60 x 60 pixels.

Global styles

Click on Edit global styles, colors, and layout to edit all styles of your pages. You can set the font type and add custom CSS to your pages. 

Updating and saving your global styles immediately affects all pages using those styles across your store, including active and draft versions.

Changes to global styles apply instantly; there’s no separate publish or activation step. This means that editing global styles within a draft flow will still update the live pages using those styles.

Optional - Preview the customer portal

You can preview your customer portal home page as a customer directly in the editor. Recharge recommends using a test customer to preview the portal, as any changes you make during testing apply to that customer.

1. Click Preview in your store.
   
2. Choose your test customer, then click Save & preview.
3. Preview your updated customer portal in the new tab that opens automatically.

Step 3 - Enable the customized home page

When you're ready, switch your live customer portal to your newly customized Affinity portal:

1. Click Done to save your changes.
2. Click Update home page to publish your changes.

Market-specific content by language

You can show different content to customers in different markets using the language selector in the Home Page Builder.

All changes you make in the builder are scoped to the selected locale, not just translated copy. This lets you fully customize the layout, sections, and content of the home page for each language.

For example, you could:

• Display a promotional banner only for customers viewing the page in French
• Show different messaging and sections to customers viewing the page in Spanish
• Customize calls to action based on market needs

Languages available in the drop-down are based on the languages you've configured in Shopify. Recharge pulls these languages from your Shopify settings and ensures customers see the correct version based on their Shopify locale. If Recharge can’t read your shop locales, you’ll be prompted to update your Shopify permissions to enable language-related features.

Considerations

Consider the following when using the Affinity Home Page Builder: