Where can I Edit my Custom Reward Points Popup Modal?

If you use the Custom Event Reward Points option with your store's Rewards Program (available on Plus Plans and Higher, including the Free End-to-End eCommerce Plan), your store will have a small button at the bottom of the frame that is labeled Earn Rewards!

When clicking this button, the visitor will see a popup modal offering various enticements to earn bonus reward points.

The popup modal itself will appear differently depending on the circumstances of its appearance.

• Customer Not Logged In

  • If the customer is not logged in they will be invited to create an account to earn the points specified in your settings. They will also be given the option of logging into their account to view their accrued points.

• Customer Logged In

  • If the customer is logged into their account, they will be shown the number of accrued points and an option to view them in more detail. They will also be given the invitation to earn more points which will let them see the next iteration of the popup modal.

• Earn More Link

  • If they click on the Earn More Points option mentioned above, they will see details of additional ways for them to earn points (as per your settings in the module).

• Referral

  • Lastly, if the visitor has been referred to your site by another user, they will be enticed to register for whatever amount of points you award for new sign-ups in the module.

We've taken care of the design of the modals, but they can be further edited if you wish. Several areas control the design, so please use the following as a reference to help you.

HTML Edits

Some aspects of the popup modal are hard-coded onto the HTML template itself. Therefore, you will need to go into your store's common folder and retrieve the template to make your own changes to it.

As mentioned, the template is located in your store's common folder. It is called rewardmodal.html

As an example of the hard-coded text to this template, please refer to the image highlighted yellow.

Store Language

Some of the labels on the modals can be edited in your shop's Store Language section. This is primarily generic text, such as login prompts or labels used on buttons. You can access the store language section by taking the following steps:

1. Log into your Shift4Shop Online Store Manager

2. Using the left-hand navigation menu, go to Settings > Design > Themes & Style

3. Once the page loads, click on the More button located at the top right.

4. Select Store Language.

This page contains nearly every label found in your online shop. You will see three columns:

• Area: The general section that the label is used in.

• Label: The label tag that is used by the database to insert the specified text.

• Text: The actual text that is inserted onto the pages.

Additional Information

Here's a list of the Store Language labels for your reference.

Initial Button

As mentioned at the start of this article, the initial button labeled Earn Rewards! is clicked to open up the modal. To change the wording/label of the button, you can look in Store Language as well. The Label is called details-earn, and it is found in the rewards area.

The Module

The module itself contains certain settings like the number of points that are awarded to the user for completing an action. These are values inserted into the modal automatically.

The Store Database

Finally, some bits of information are added by the store's database. These include information that is entered by the Store Manager, such as the store name, customer name, and so on.

For Advanced Users

Here's an image showing all sections of the pop-up color-coded at once for further reference. This gives a better visual of which section is controlled by which area of the Store Manager.