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
*
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.
*
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
*
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
*
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
*
These can be configured on the page and reflects on how the widget is presented to the user
*
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
*
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
*
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.
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 .
*
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
Prerequisites
Customize the Standard Widget to Your Liking
Make your own Custom Widget using Loop
Build your own flow with support from Loop
*
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.
*
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
*
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
*
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 .
*
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
Updated on: 07/08/2024
Thank you!