100+ Widget Designs

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
Hide bundle selling plan on widget Enabling this setting will hide the bundle selling plan from your widget

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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us