Widget Customizations
Joshua Kye avatar
Written by Joshua Kye
Updated over a week ago

This help doc will go over the various customizations that you, as the merchant, are able to make for the loyalty widget in your store.

We have a dedicated section for this in the dashboard, and even provide default headers, descriptors, FAQs, etc. But if you believe something more custom will suit your store better, you can adjust the settings in the various tabs in this section.

Navigate to the Widget Settings section of the dashboard.

Widget Settings

Here, you can adjust what will be immediately visible in the loyalty widget. You can set the widget to show/hide, and adjust its labels, logo, and positioning, either the bottom left or bottom right of your store.

For example, changing the Widget Title field will affect the header in the loyalty widget whenever it is minimized. The default header provided says Appstle Loyalty, and it was changed to Welcome! as a simple example.



Widget Labels

This section handles the labels in the core aspects of the loyalty widget. You will notice, upon clicking this section, that there will be various dividers, and the fields in each divider will affect different parts of the widget in your store.

Widget Home Labels - Handles the home page of the loyalty widget (upon opening it).

Point Earn Labels - Handles the Ways to Earn section of the loyalty widget (activity rules).

Point Redeem Labels - Handles the Ways to Redeem section of the loyalty widget (reward rules).

Reward Details Labels - Handles the wording in the section dedicated to rewards

customers have earned (with an account in your store).

Referral Labels - Handles the wording in the Referrals section in the widget (assuming a referral program has been configured).

Note: You will not necessarily be able to see all of the labels listed here at once in your widget, as some are there by default while others need specific conditions to show (ex: The Empty Reward Rules Label in the Point Earn Labels section only shows if you have not set any reward rules).

Here is a quick example of an edit of 2 fields.




Our loyalty widget has base styling set when you install Appstle Loyalty. But if you believe it could use custom colors for your store, you can adjust them here.

Below is a before and after of changing the widget color scheme from the standard blue color to a shade of purple.



Custom CSS

Custom CSS also handles customizations, but with significantly more technical requirements. If you or a developer that you have working for you is knowledgeable about CSS, this section will be useful if you wish to make more complex customizations for the widget. Or, you can even reach out to our support team, if you need custom CSS changes as well.


If you find that your customers have questions regarding your loyalty program, how they can earn or redeem points, etc., an FAQ section can be helpful to have for them to reference. Like with the other sections we have looked at so far, there are some basic questions and answers already set, and you can update them to best suit your store’s needs. It is similar to a Shopify text editor, with the ability to format the text you write in here anyway you see fit.

This will affect the dedicated FAQ section in the loyalty widget:

Did this answer your question?