🔓  Advanced loyalty widget customization is unlocked on: Basic, Advanced and Pro

In this article:

  • How to choose your store's theme color
  • How to choose your widget layout
  • How to add your store's logo
  • How to choose your background image
  • How to choose your widget font
  • How to customize or translate your loyalty widget text 

How to choose your program theme color

1. In your Beautiful Loyalty Programs for Shopify admin, go to Display > Widget

2. Under Theme Color, add your store's brand color by either entering your color hex code or simply click the color box to select your color

3. Click Save changes & Publish

📝  Note: Don't forget the '#' before the hex code. Don't know what your brand color hex code is? This HTML Color Code tool will tell you. 

How to choose your widget layout

1. In your Beautiful Loyalty Programs for Shopify admin, go to Display > Widget

2. Click Layout

3. In the Layout in drop-down there are 6 different widget layouts to choose from. Click your chosen layout type

Need some help choosing a layout? Here's how to find the right layout for your store.

How to choose your background image

1. Under Background Image, click Choose File

2. Select your image from your computer. Ensure the image you select is appropriate for the type of layout you are using

You will be able to see how your selected image looks on the widget preview to the right.

3. Click Save changes & Publish

💡 Quick tip: Make sure your image looks perfect by uploading it according to the recommended size. Need help re-sizing your image? Try the online tool Picresize

How to add your store's logo

1. Click Logo

2. Click Choose File

3. Select your store's logo image from your computer  

You will be able to see how your selected image looks on the widget preview to the right.

4. Click Save changes & Publish

📝  Note: The recommended logo size is 114 x 114 pixels. Need help re-sizing your logo? Try the online tool Picresize.

How to choose your widget font

1. Click Font

2. Click Default

3. From the drop-down menu, click your chosen font

You will be able to see how your selected font looks on the widget preview to the right.

4. Click Save changes & Publish

How to customize or translate your widget text

1. Click Customize Text

2. Click Go to text editor > to open the customization page

3. Next to Customize text for: click Rewards tab to open the drop-down

4. Select the widget page you want to edit 

5. Edit (or translate) the text boxes to your preferred text

6. Click Save & Publish

> Learn more about customizing your loyalty widget text

How to publish your widget on your online store

1. Next to Add your loyalty widget tab to your eCommerce site, toggle widget to ON

2. Click Save and Publish

To preview your new widget on your online store, click the View in new tab icon.

What's next

> Choose which widget design layout is best for your type of store
> How to customize your loyalty widget tab

Did this answer your question?