In this article:

Simple widget design: 

  • Plain layout

Advanced widget design: 

  • Top panel 
  • Transparent Background
  • Side Panel
  • Background Panels
  • Border

Advanced widget text: 

  • Customize your widget text
  • Translate your widget text

📝  Note: If you don't adhere to the image size dimensions only a portion of your image will be visible. 

Basic Widget Design

Plain 

The plain layout is minimalistic and is suited to websites that have lots of large background images. Your widget will stand out against your background images without looking too crowded or busy.

You can add your theme color to the top banner and the call-to-action button to give a taste of your store's branding. Or use contrasting colors to make the loyalty widget really stand out.

Advanced Widget Design

🔓 Advanced design customization is unlocked on plans: Basic, Advanced & Pro.
You can choose a layout, add your logo, and add image panels using advanced customization.

In addition to the 6 beautiful layouts, all advanced widget designs let you add your logo to better incorporate your store branding.

logo dimensions: 114 x 114 pixels

Top Panel 

Size dimensions: 200 x 500 pixels

The top panel layout is suited to landscape images. Perfect for outdoors products so you can show off beautiful, inspiring images. 

Transparent Background

Size dimensions: 500 x 500 pixels

The transparent background layout is suited to images that have little detail or is minimalistic to ensure the text is legible. It's a great layout for adding a pattern or a bit of texture to your widget. 

Side Panel 

Size dimensions: 500 x 200 pixels

The side panel layout is suited to portrait images. This is the best layout to incorporate full-height model images for clothing stores.

Border

Size dimensions: 600 x 600 pixels

The border layout is suited to landscape images.  As the largest layout, background panel really puts emphasis on the content of the widget. Be cautious of the image you use, as it stretches across the width of the widget.

Background panel

Size dimensions: 800 x 500 pixels

The background panels layout is suited to patterned images. Similar to the transparent background, the border layout lets you add texture or patterns that reflect your brand, but with full opaque color and no chance of obscuring the body text.

💡 Quick Tip: Customers really respond to creative, well thought-out loyalty programs. If they can see you're putting an effort into designing the widget, they can be sure that you're putting effort into creating great rewards too!

Need some help designing your loyalty widget? 

We're here to help, and our designers love getting creative with widget designs!
Let us know at hello@loyalty-for-shopify.io 🎨

Advanced Widget Text

Customize your widget text

Customize your loyalty widget text to add your store's personality. 

> How to customize your loyalty widget text

Translate your widget text

Localize your loyalty program by translating your loyalty widget's text.

> How to translate your loyalty widget text 

What's next?

> Get industry specific ideas for customizing your loyalty program
> Learn more about text customization options in your loyalty widget

Did this answer your question?