The Subscription Enrollment widget is what customers will see on your site and use to subscribe to your products. Ordergroove includes a standard widget, but you can customize and style it to better match your brand.
Configuring & Styling Your Subscription Enrollment
Depending on the user’s comfortability with HTML and CSS, they can choose whether they want to edit each offer variation using the Basic or Advanced mode.
- Basic mode provides a quick and easy way to edit offer text and some styling changes like coloring, font, format; (i.e., dropdown vs. radio buttons, etc.)
- Advanced mode provides users the option to configure their offer variation by editing the HTML and CSS text. Using advanced mode, users can configure their offers in more ways than the basic mode provides.
You can access this page in Ordergroove by going to Subscription > Enrollment.
The first offer you are seeing is the default offer, provided by Ordergroove. You will find more information on how to customize that offer further down within this article.
Price Transparency in Your Subscription Enrollment
Displaying price and subscription discount applied to price directly within the subscription enrollment widget is currently only available for merchants on Shopify. To access this feature you must meet the following credentials:
- Use Shopify as your ecomm platform
- Make sure you have 'set up an Initial Offer Incentive' under Promotions in Ordergroove
- Please note: the discounted price displayed within your subscription widget will use the incentive you have set for first subscription order, not the discount applied to recurring subscription orders. You are provisioned with both initial incentive and recurring incentives matching. Should you change these incentives to be different, it is good practice to communicate to your customers within the subscription enrollment widget that a different price/discount will be applied after the first order.
- Below is an example of an offer with a different initial incentive (15%) than recurring incentive (free shipping) and how you can communicate that within the enrollment widget:
Creating New Enrollment Variations Using Templates
Should you wish to create variations of your subscription enrollment offer, you have the option to do that.
- Click the + button, as per the screenshot below.
- The template library will open for you to select from a variety of layouts you want your offer to have, select one of the templates.
- Name the offer variation you are about to configure.
- Select from the dropdown the location of where this offer is going to live. This should be the location attribute you designate when setting up the page tagging during the integration process.
- Add the new offer variation.
Now you can make edits using either the basic configuration or advanced configuration modes.
Note: Some templates can only be edited in Advanced mode. Should you wish to edit in Basic mode, create a new offer variation using the above steps and select a template that isn't labeled Advanced.
The preview at the top of the page will show how the changes you make in either basic or advanced mode will appear in the offer.
- In Basic Mode, you can see all the configurations you can use for your offer. If you feel there are additional ways you want to configure than Basic mode provides, you can select advanced mode.
-
In Advanced Mode, you can edit the markup using HTML, CSS, and/or JS. The preview will also reflect the changes you make.
Once you feel the offer variation looks how you’d like, save it!
The offer will show live on your site once the page tagging is complete, your offer variation is saved, and the location attribute of that offer variation matches the attribute on the pages you’ve tagged with it.
Styling Your Subscription Enrollment
At the top of the configuration page, you will find a preview of the subscription widget. Any custom styling or settings you apply can be viewed here before saving to ensure that your changes look great.
Should you wish to preview your offer live on your site, you can select the Live Preview button and enter the URL of either your staging or production site. This allows you to make real-time changes to your offer and see them directly on your site before being pushed to production. Just note that if you are utilizing a staging URL and there is authentication required, you must enter your credentials into your staging site first to log in, and then you can enter your staging URL into the live preview URL field.
You will have control over the recommended frequency that Ordergroove will use to place orders into your system on your customers’ behalf. This is just a starting point — customers may also choose to adjust the frequency after they have subscribed to fit their own needs.
The default frequency selection is located on the subscription enrollment configuration for a Basic offer. You can configure the other frequencies you want to make available for customers to choose from on the Subscription > Enrollment page.
Using Basic Styling
Ordergroove also offers several user interface options to fit your store’s style - you can choose from a few different selection controls that customers can use to subscribe (radio buttons, checkboxes, or dropdown selectors). You can also edit the copy and style of the incentive you have defined and the copy and style of the tooltips that will help guide your customers through the subscription process.
Using Advanced Styling
If you're comfortable with HTML/CSS, you can click the Advanced button and directly edit the HTML/CSS of your subscription enrollment. This will give a user much more freedom and flexibility to design the enrollment in any way they see fit.