Customize Your Storefront Widget

Modified on Mon, 15 Apr 2024 at 03:39 AM

Overview

SC Loyalty Rewards Referrals allows you to change the look of your storefront widget to better suit your store's branding and color scheme.

You can even add your own logo and preview the widget that will be shown to your customers.

Alert

The SC Loyalty Rewards Referrals widget must remain as a widget and cannot be moved or placed onto a separate page.

Change the Color

From the Shopify Admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Storefront Widget.
Select the colors you want to use.
Note: Selecting the color boxes under the Custom Theme section allows you to choose a custom color, using either a hexadecimal (HEX) color code or from a color wheel.
Select Save Changes.

Widget Position

From the Shopify admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Storefront Widget.
Select the widget position and widget style. Then, choose the logged in app bar greeting.
- Text: This will display a message to the sign-in user, pulling the [first_name] information from your store's data. You can adjust the message in the app's language settings.
- Icon: This will display the floating widget icon that you have uploaded in the Custom Icons section.
- None: This won't display anything at the top of the bar.
Select Hide widget on mobile devices. (optional)
Select Save Changes.

Remove Branding

From the Shopify Admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Storefront Widget.
Select Remove Shop Circle branding. (optional)
Note: This feature is only available with certain price tiers.
Select Save Changes.

Custom Styling

From the Shopify Admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Storefront Widget.
Adjust the widget's custom styling. (optional)
Select Use different settings for mobile users.(optional)
Adjust the widget's mobile styling.
Select Save Changes.

Upload Your Own Logo

From the Shopify Admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Storefront Widget.
Select Choose File to upload your own logo. (optional)
Note: This feature is only available with certain price tiers.
- Floating widget icon: This is what will appear at the top of your SC Loyalty Rewards Referrals widget, if you chose Icon for the logged in app bar greeting.
- Initial program icon: This will show to customers in the widget, when they click to sign up for your program.
- Logged in program icon: This will show up in the widget beside your program overview. It is essentially your loyalty program's logo.
- Reward icon: This will appear in your widget under Rewards.
- Reward claimed icon: This will appear in your widget under Rewards, beside any rewards a customer has claimed.
- Earning icon: This appears in the widget underneath the Ways to Earn section.
- Social media icon: This will appear next to any social media-related earning rules within the widget.
- New referral image: New, successful referrals will see this image on a landing page.
Select Save Changes.

Change the Language

From the Shopify Admin, select Apps.
Select SC Loyalty Rewards Referrals.
Select Settings, then Language Settings.
Adjust the language as you see fit.
Note: The merge fields at the top of this page can be used to reference specific information about the customer.
Select Save Changes.