Customize Your Storefront Widget

Modified on Fri, 14 Jun at 1:32 AM

Overview

SC Loyalty Rewards 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

  1. From the Shopify Admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Storefront Widget.

    From the side navigation bar, select Settings. From within the Settings dropdown menu, select Storefront Widget (second option down)

  4. 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.

    Choose the colors for your foreground, background, and accent

  5. Select Save Changes.

Widget Position

  1. From the Shopify admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Storefront Widget.

    From the side navigation bar, select Settings. From within the Settings dropdown menu, select Storefront Widget (second option down)

  4. Select the widget position and widget style. Then, choose the logged in app bar greeting.

    In the Display Settings section, select the dropdown menu for the Widget Position on the left-hand side (bottom-left, bottom-center, or bottom-right). To the right of that dropdown menu, choose the Widget Style (another dropdown menu: icon and text, , text only, or icon only). Underneath the Widget Position, select the Logged In Appbar Greeting (text, icon, or none)

    • 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.

      Logged in appbar greeting: Text

    • IconThis will display the floating widget icon that you have uploaded in the Custom Icons section.

      Picture of the floating widget icon at the top of the widget

    • None: This won't display anything at the top of the bar.

      Picture of no appbar greeting

  5. Select Hide widget on mobile devices. (optional)

    Picture of the hide widget checkbox

  6. Select Save Changes.

Remove Branding

  1. From the Shopify Admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Storefront Widget.

    From the side navigation bar, select Settings. From within the Settings dropdown menu, select Storefront Widget (second option down)

  4. Select Remove Shop Circle branding. (optional)

    Note: This feature is only available with certain price tiers.

    Picture of the remove branding checkbox

  5. Select Save Changes.

Custom Styling

  1. From the Shopify Admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Storefront Widget.

  4. Adjust the widget's custom styling. (optional)

    Within the Custom Styling section, you can adjust the following, in pixels (left to right, top to bottom): side margin, bottom margin, border radius button, border radius widget (and, at the bottom, the page depth)

  5. Select Use different settings for mobile users.(optional)

    Select the Use different settings for mobile users checkbox in the Widget Positioning section

  6. Adjust the widget's mobile styling.

    Make changes to the Mobile Styling if you want it to look different on mobile (left to right, top to bottom): mobile screen position (bottom-left, bottom-center, bottom-right), mobile widget style (icon and text, text only, icon only), side margin (pixels), bottom margin (pixels), fullscreen margin (pixels)

  7. Select Save Changes.

Upload Your Own Logo

  1. From the Shopify Admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Storefront Widget.

  4. Select Choose File to upload your own logo. (optional)

    Note: This feature is only available with certain price tiers.

    First set of custom icons list

    • Floating widget icon: This is what will appear at the top of your SC Loyalty Rewards 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.
  5. Second set of custom custom icons list

    • 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.
  6. Select Save Changes.

Change the Language

  1. From the Shopify Admin, select Apps.
  2. Select SC Loyalty Rewards.
  3. Select Settings, then Language Settings.

  4. 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.

    LP Language Settings

  5. Select Save Changes.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article