How to Configure the Loyalty Page (General & Hero Sections)

Ensure you are logged in to your 99minds account and are on the main dashboard.

On the left-side menu, open the Widgets section.

In the Widgets area, locate Loyalty Page and click Customize.

This opens the Loyalty Page Builder, where you will see multiple configuration tabs. For now, focus on the General and Hero sections.

In the General tab, you can manage global display settings for your loyalty page, including typography and section order.

Choose the font family to be used across the loyalty page. You can select either the Store font or Custom fonts.

If using custom fonts, select the desired font from the font family dropdown.

Any change you make here will update the preview so you can see how the fonts will look.

You can also enable a shadow effect for the text or containers if desired.

To show the shadow, toggle the corresponding setting to Enable.

Under the Order or Sections list (e.g., Hero section, How it works, Ways to redeem), you can rearrange the display order using drag and drop.
Drag and drop the Hero section or any other section to the preferred position.

This completes the General section configuration for the loyalty page.

Go to your Shopify store to verify how the loyalty page appears to customers.

On the store, navigate to the Rewards page. Ensure you are logged in as a user who has rewards, loyalty points, and VIP tiers so you can see all details.

In this example, log in as the user John.

After logging in, you will see John’s Rewards page, including a welcome message and points summary such as “Welcome back, John. You have 151 points.” All labels like Earned Points, Redeem Rewards, Rewards History, etc., will be configured from 99Minds.

In the Loyalty Page Builder, go to the Hero section settings.

Enable the option to show the Hero section on the loyalty page.
Also enable Show text container to display the text block within the hero area.

Configure the text shown when the user is not logged in (sign-out state). Here you can set:

When the user is logged in (as in the John example), configure:

On the store, this appears as:

In the description area, you can show the user’s points, e.g., “You have 151 points.”

Below the text, configure the labels for the action buttons:

All four button labels (Earn Points, Redeem Rewards, Reward History, Store Credit) are controlled from these 99minds Hero section settings.

In the Hero section’s Style settings, configure the look and feel of the hero banner.

You can adjust:

Changing the background color may cover or hide the background image.

If you want to show the uploaded hero background image instead of a solid color, disable or clear the background color setting so the image becomes visible again.

You can also configure:

Additionally, you can adjust text container position within the hero section. For example, choose a layout option and set it to left-aligned.

You can align the text container to the right or left as required.

Set the text alignment inside the container (center, right, or left).

For instance, choose middle alignment,

or right,

or left, based on your design preference.

When finished, click the Save button to store all your Hero section configurations.

After saving, ensure all settings are stored successfully.

Return to your Shopify store’s Rewards page and refresh it to see the updated loyalty page design.

You should now see the configured Rewards Program hero section along with other sections such as Ways to redeem and Ways to earn, ordered as defined in the General settings.

This completes the configuration of the General and Hero sections for the loyalty page.