100+ Widget Designs
- Overview
- Prerequisites
- Customize the Standard Widget to Your Liking
- Make your own Custom Widget using Loop
- Build your own flow with support from Loop
Overview
A widget is the first point of interaction and the most impressionable part of your Store. So it’s important to be able to design a functional and cohesive widget which adheres to your brand principles and philosophy.
We at Loop understand this requirement, and hence we provide the flexibility to configure the Standard Widget to your liking. If that doesn’t satisfy your design requirements, we allow you to completely design your own custom widget using Loop.
Prerequisites
These steps have to be performed before configuring the Widget, else it will not be visible on the Store.
- Set up Selling Plans
- Map Product to Selling Plans
- Widget Installation
Ways you can configure your widget
There are three potential methods to design a widget of your liking.
- Customize the Standard Widget to Your Liking
- Make your own Custom Widget using Loop
- Build your own flow with support from Loop
Customize the Standard Widget to Your Liking
This guide will guide you through how to configure the Standard widget to your requirements. You can access the configuration page for the Standard Widget by going to Loop > Subscription Widget > Standard Widget
These are the configurable options present in the Standard Widget pane
- Settings
- Translation
- Styles
–> Learn more about Installing Loop Widgets.
Settings
These can be configured on the page and reflects on how the widget is presented to the user
| Setting | Description |
|---|---|
| Option selected by default | Choose which option is selected by default in your widget |
| Purchase options order | Allows you to choose which purchase option is displayed first |
| Show purchase options label | Enables/Disables the text “Purchase Options” |
| Hide the “each” label shown below the price amount | Enables/Disables the “each” label below the price |
| Show the discount badge for subscription option | Enables/Disables the discount badge on subscription plan groups |
| Show subscription details popup | Enables/Disables the Subscription details popup |
| Hide plan selector if only one selling plan is available | Disables the plan selector when Enabled |
| Show plan selector as text if only one selling plan is available | Enabling this setting will replace the plan selector dropdown with a text if there is only delivery option available for selection |
| Hide whole widget if only one selling plan is available | For subscription-only products, Enabling this setting will hide the Loop widget when only one selling plan is available for selection |
| Hide radio button if only one selling plan group is available | Enabling this setting will hide the radio button if the product is subscription only and there is only one selling plan group available |
Translations
Change the text on your store’s widget to your native language. You can change the text by heading to the Translations page. This section allows you to change every bit of text that is being displayed on the Widget.
- Purchase option label
- One-time purchase label
- Discount badge text
- Price label text
- Subscription details text
- Subscription details description (HTML enabled)
- Add to cart button text
- Add subscription to cart button text
Styles
You can configure the appearance of the widget on this page. Loop provides you with multiple options on the UI to configure your widget to your liking
- Purchase Options Label
- Widget Container
- Selling Plan Container
- Selected Selling plan
- Radio button group
- Selling Plan Name
- Discount Badge
- Plan Selector Title
- Plan Selector
- Price Label
- Price Subtitle
- Plan Description
- Subscription details label
- Subscription details popup
- Additional CSS
Make your own Custom Widget using Loop.
Custom widget feature grants you the flexibility to design and style your widget on CSS. You can find the Custom Widget feature in
Loop App > Subscription Widget > Custom Widget
Note: Custom Widget feature is part of the GROWTH plan and above.
How to configure the Custom Widget
- Step 1: Go to the Custom Widget page in the Subscription Widget section on the Loop App
- Step 2: Select the theme you would like to activate the widget on and click the activate button
- Step 3: Now make any changes you’d like to the CSS, then save your changes
- Step 4: These changes will reflect on the Widget on the Store.
Feel free to customize the widget to anything that you’d like. We’ve packed it to the brim in terms of customizability. Here is a demo that showcases the Custom Widget feature.
–> Learn more about Customizing Subscription Widget .
Build your own widget with support from Loop
If the above-mentioned options do not suit your use case, and you are willing to go for something custom which suits your approach on subscriptions. We are happy to collaborate with you to help you set up your unique flow. Reach out to us at contact@loopwork.co in this case.
If you have any queries or doubts about any of these steps. Please reach out to support@loopwork.co.
Thanks
Loop Subscription Team