Knowledgebase: Site Design

Where can I edit my Custom Reward Points Popup Modal?


If you are using 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 this button is clicked, the visitor will see a popup modal that offers them 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 they have as well as an option to view them in more detail. They will also be given an 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 is someone who 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. There are several areas that control the design, so please use the following as a reference to help you.

Please note
The information in this article is provided solely as a courtesy and to offer basic instructions on making changes to your store's HTML templates.

Please understand that - regardless of how simple or complex the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don't work as you wanted.

If you are uncomfortable with making changes to your site's HTML, please contact our Support Team and inquire about our HTML and design services which can make these changes for you.

Thank you for your understanding

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 text that is hard-coded to this template, please refer to the following image:

Store Language

Some of the labels on the modals can be edited in your shop's Store Language section. 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 navigaiton 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 on 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.

Please refer to the following image to see the sections of the modal that can be edited via Store Language

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

rewards details-continue Continue Shopping
rewards details-earn-more Earn Rewards!
rewards details-have-account Already have an account? Login here
rewards details-points-type Reward Points
rewards details-referral-link Referral Link to earn
reward details-view Look at Your Reward Point
mailinglist text Subscribe to our Newsletter
reviews new Write a Review

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 following image will show you these values for your reference.

In the above example, the "an invitation" label is found in the module under the "Reward Referral Popup Text" field. It can also be edited in Store Language in the rewards area under the "details-promo-text" label.

The Store Database

Finally, some bits of information are added by the store's database. These are marked below.

For Advanced Users

Here's an image showing all sections at once for further reference.

Help Desk Software by Kayako fusion