Skip to main content
Feature availability: Loyalty landing page is available on Essential, Standard, Growth, Plus, and Enterprise plans for merchants on Shopify only.

Create a loyalty landing page

To create a landing page:
  1. From Smile Admin, navigate to On-site content > Landing page.
  2. Click Set up.
  3. Click Create landing page.
  4. Enter a title, description, and review the default URL for your landing page.
  5. Click Create and start editing.
After creating the page, you’ll be taken to the landing page editor where you can customize its appearance.
Example loyalty landing page showing how a loyalty program can appear on a Shopify storefront.

Customize the landing page

Your landing page content is automatically generated from your loyalty program, while its appearance can be customized in the landing page editor.

Program content

The landing page automatically displays content from your loyalty program, including ways to earn points, rewards, referrals, and VIP tiers. On your published landing page, program sections only appear when the relevant program is active and there’s content to display. For example, if you haven’t configured any ways to earn points, that section won’t appear. You can also hide any section yourself. See Hide a section below. The VIP section only appears when your VIP program is active and you have at least one VIP perk or entry reward configured. In the landing page editor, program sections remain visible even when the related program is turned off. This lets you customize them before turning the program on. Content shown in the editor for a program that is turned off won’t appear on your published landing page until that program is turned on. You don’t need to update program content separately on your landing page. Changes to your loyalty program, including turning programs on or off, are automatically reflected on the published page.

Highlight earning, redeeming, and free product rewards

Add visual sections to show customers how they can earn and redeem points:
  • Earning highlight — Show an example of earning points on an order. Customize the text, values, and product image.
  • Redeeming highlight — Show an example of applying a reward to an order. Select the reward and customize the order values.
  • Points shop — Display free product rewards as product cards with the product image, name, points cost, and a button to redeem. This section appears automatically when at least one free product reward is available.
Note: Free product rewards appear in both the Points shop and Ways to spend by default. To show them only in the Points shop, turn off Show free product rewards in the Ways to spend section.

Add FAQs to your landing page

Add your own frequently asked questions and answers to the FAQ section in the landing page editor. The FAQ section only appears on your published landing page after you’ve added at least one question with text. Unlike program sections, FAQ content isn’t generated from your loyalty program. You add and manage this content directly in the landing page editor.

Customize the page design

Use the Sections tab to customize the appearance of individual sections on the landing page. You can customize the available settings for each section, but you can’t add your own sections. Select a section to see the customization options available for it, such as:
  • Text — edit headings, subheadings, descriptions, and other copy for the section
  • Colors
  • Buttons — most sections let you choose whether the button opens the Smile panel, links to a custom URL (such as your Loyalty Hub), or is hidden. You can also customize the button text. The Referrals section button only supports a style choice.
  • Images — add or replace images, including the step icons in the How it works section
Some sections have additional layout options. For example, the Referrals section lets you choose whether the image appears on the left or right side of the content. Images must be PNG or JPG files. There’s no required image size, but for best results, use a 16:9 image for the header and a square (1:1) image for the Referrals section. For styles that apply across the entire page, use the Global settings tab.
Note: Your published landing page uses the font from your Shopify theme. The Font family setting only changes the font in the editor preview. All other Global settings, like font size and weight, apply to your published page.
Important: Custom text applies to your loyalty program’s default language. Other languages use Smile’s default translations. The editor displays your landing page in your Smile Admin language, so if your Admin language is different from your program’s default language, you may not see your custom text in the preview.

Hide a section

You can hide any section of your landing page. To hide a section, you can:
  • Click the eye icon next to the section in the Sections tab.
  • Turn off the visibility switch in the section’s settings.
  • Select the section in the preview, then click Hide.
Hidden sections remain in the Sections list with a line through their name. To show a section again, click Show next to it under Hidden. Hiding a section only affects its visibility on the landing page. Your loyalty programs continue running in the Smile panel and Loyalty Hub, and the section’s settings are preserved. Hidden sections are removed from the preview immediately. Click Publish to apply your changes to the live landing page.

Preview the page

Use the preview at the top of the editor to see how the landing page will appear to customers. Toggle between Guest and Logged-in views to preview each experience. Logged-in customers may see personalized loyalty information based on their account.

Save changes

Changes made in the landing page editor are saved automatically as you customize your page. You don’t need to manually save your work.

Publish the landing page

Creating your landing page doesn’t automatically make it available to customers. When you’re ready for customers to access the page, click Publish at the top of the landing page editor. Once published, add the landing page URL to your store navigation so customers can access it. See Add the landing page to store navigation below.

Add the landing page to store navigation

Shopify doesn’t automatically add the loyalty landing page to your store navigation. Copy your landing page URL from On-site content > Landing page and add it to your store navigation in Shopify. You can also add the URL to other places where customers access your loyalty program, such as marketing materials. Your default loyalty landing page URL depends on when you installed Smile. It uses one of these formats: • yourstore.com/apps/s/rewards
• yourstore.com/apps/loyalty/rewards

The URL shown in Smile Admin is the correct one for your store.
Tip: We recommend keeping your default landing page URL. Changing the URL in Shopify can cause previously shared links to stop working.

Change the page title or description

To update your landing page title or description:
  1. From On-site content > Landing page, open More actions.
  2. Click Edit page details.
  3. Update the page title or description.
  4. Click Save changes.

Edit the landing page

Your landing page is managed in Smile, not in Shopify. It doesn’t appear in your Shopify theme editor, and cannot be modified there. To make changes to your landing page:
  1. From Smile Admin, navigate to On-site content > Landing page.
  2. Click Set up.
  3. Click Edit page.
  4. Make your changes in the landing page editor.

Unpublish the landing page

Landing pages can’t be deleted. If you no longer want customers to access your landing page, unpublish it instead:
  1. From On-site content > Landing page, open More actions.
  2. Click Unpublish.

Troubleshoot your landing page URL

If the landing page URL shown in Smile Admin isn’t working, check that:
  • Your landing page is published.
  • You’re on the Essential, Standard, Growth, Plus, or Enterprise plan. The loyalty landing page isn’t available on the Free plan.
  • Make sure at least one program — points, referrals, or VIP — is turned on. If all programs are turned off, your loyalty landing page will return a 404 even if the page is published.
  • If you changed your app proxy URL in Shopify, go to Shopify Admin → Settings → Apps → Smile.io to find your current app proxy URL. The URL shown there is not your full loyalty landing page URL. Add /rewards/ to the end of the app proxy URL to get the URL for your landing page.

Already using a legacy loyalty landing page?

If you previously created a loyalty landing page using Smile’s theme app blocks in Shopify, see Move from a legacy loyalty landing page to learn how to move to the new experience.