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 is content to display. For example, if you don’t have any ways to earn points configured, the ways to earn section won’t appear. 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: Typeface settings are used for preview purposes in the editor. Your published landing page inherits its typeface from your Shopify theme.
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.

​
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. By default, your loyalty landing page URL uses: yourstore.com/apps/loyalty/rewards
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

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.