Enable prepaid subscriptions on your product details page

This guide is the first step to adding prepaid subscriptions to your store. We cover how you can add code to your product details page (PDP) so your enrollment widget can display prepaid options.

1 - Confirm with Ordergroove that you are on the latest version of the offers-library

If you are part of our Open-Beta program for prepaid subscriptions, Ordergroove has already verified you have been upgraded to the appropriate version. Skip to step 2 to continue.

If you have been on Ordergroove’s platform for some time, you may need to be upgraded to a more recent version of the Offers library. Please reach out to customer success.

2 - Modify your Shopify theme to properly leverage the latest version of Ordergroove offers

If you are already using cart opt-in on your site, then you can skip this step. If not, then you will likely need to make some small changes to your Shopify theme.

1. Log in to Shopify, go to Online Store and Themes.
2. Click Actions and Edit Code.
3. Look under assets for the file ordergroove.js. Delete all contents of ordergroove.js so that the file is empty and click Save.
4. Open the ordergroove_static_asset.liquid file. Add attribute data-shopify-selling-plans to the script tag containing src=”https://static.ordergroove.com/”. It will look like this:

<script type="text/javascript" data-shopify-selling-plans src="https://static.ordergroove.com/{Ordergroove Merchant ID} /main.js"></script>

This change upgrades you to the latest version of Ordergroove offers for Shopify. If you have built customizations based on the older version, they may no longer be supported. Please thoroughly check that all custom functionality works as expected.

3 - Create a prepaid-enabled enrollment template

With the changes made to your Shopify theme, it's time to setup the code in Ordergroove. Like the last step, we recommend creating a new enrollment template. That way you can test out how your prepaid-enabled enrollment template is functioning on your site before making it publicly accessible to all customers.

1. Open up your Ordergroove Admin, and go to Subscriptions > Enrollment.
2. Click Create. There will be several templates to choose from, some of these templates will have a badge that indicates the template is Prepaid Enabled. All available templates can support prepaid subscriptions, but the prepaid enabled templates will skip step 4 down below. Select a template to proceed.
3. Give the template a descriptive name. We also suggest giving the template a location such as prepaid-pdp so that you can test the enrollment template on the duplicate Shopify theme you created. Write down the location and keep it handy, we're going to need it later.
4. If you selected a Prepaid Enabled enrollment template, skip this step. Click the Advanced tab on the top-right to bring up the code editor.
5. Look for the HTML Source heading. Find the place in the existing html element where you would like the prepaid opt-in section to appear, and paste the following code there:

<og-when test="subscribed&prepaidEligible">
<div class="og-prepaid">
<og-prepaid-toggle>
<span slot="append">and save <b><og-prepaid-data percentage-savings></og-prepaid-data></b>, delivered monthly.</span>
</og-prepaid-toggle>
<og-when test="prepaidSubscribed">
<div class="og-prepaid-explainer">You will be billed <og-prepaid-data total-price></og-prepaid-data> today (<og-prepaid-data per-delivery-price></og-prepaid-data>/delivery)</div>
</og-when>
</div>
</og-when>

Optional - Update text and styling

1. Locate the <og-prepaid-toggle> element, and the span that contains text delivered monthly.
2. Replace this text with language that reflects the delivery frequency you are offering for prepaid subscriptions. For example, replace delivered monthly with delivered every two weeks if you are going to offer a two-week delivery frequency.
3. Next let's add some additional styling. Scroll down to the CSS Source section in the code editor. Create the following CSS rules and modify them to match your brand. Note: if you selected a PrepaidEnabled base template, these styles will already be pre-populated with default styling.

.og-prepaid

Create a CSS rule for this class to style the opt-in section of your enrollment widget for prepaids.

Example code:

.og-prepaid {
margin-left: 2.2em;
max-width: 380px;
padding: 0.7em0.5em0.7em2em;
font-family: inherit;
color: inherit;
font-size: 15px;
background: #f6f4ef;
line-height: 1.3;
display: flex;
flex-direction: column;
gap: 0.3em;
--og-select-padding: 0.1em2.5em0.1em0.5em;
}

.og-prepaid-toggle

Create a CSS rule for this class to customize the styling of the content inside the dropdown where a customer selects the number of shipments they would like to prepay for.

.og-prepaid-explainer

Create a CSS rule for this class to customize the styling of the content that appears when a customer has opted-in to prepaid.

4 - Add your prepaid enabled enrollment template to Shopify theme

With the prepaid enabled enrollment template finished and stylized, it's time to test it out with some code added to your Shopify theme.

1. Log in to Shopify, go to Online Store > Themes > The duplicate theme you created.
2. Click Actions and Edit Code.
3. Look through your liquid code files for ordergroove_offer.liquid - the file name varies by theme, but is most likely located in a product-related display file. 
4. Locate the line that starts with {%- render 'ordergroove_offer'
5. Add or modify the location attribute. The location should match the location selected when you made the enrollment template. Take a look below for an example, you can copy this code directly or replace 'prepaid-pdp' based on your selected location. 
6. Save your changes.

{%- render 'ordergroove_offer' location: ‘prepaid-pdp’ -%}

Until you have completed the other required steps to set-up prepaid on your site, you will not see the prepaid portion of your enrollment template while previewing the product-display-page with the new template.

Keep in mind that only products that are prepaid eligible will display the prepaid portion of the enrollment template when their corresponding product-display-page is viewed. We recommend making a single product prepaid eligible, and testing against that product specifically while going through this process.

5 - Modify Cart Opt-In

If you use Ordergroove Offers to power a cart opt-in experience, we need to make a small change to the enrollment template so so that it does not appear when customers have already opted into a prepaid subscription. If you use a 3rd party cart opt-in experience, skip this step.

1. Open up your Ordergroove RC3 Portal, and go to Subscriptions > Enrollment.
2. Select the template you've been working on, and click Advanced on the top right to edit the code.
   
3. Locate the HTML line <og-when test="regularEligible"> and replace it with <og-when test="regularEligible&!prepaidSubscribed">
4. Save.

6 - Finalize Changes and Publish Theme

Once you are confident with the changes, you are ready to publish the theme and start selling prepaid subscriptions on your site. After publishing the theme and making it publicly accessible, we recommend taking a few moments to run a test to sanity-check that everything is behaving as expected.

Need Help?

The prepaid team is here for you during this setup process! Please don’t hesitate to reach out to support@ordergroove.com if you are experiencing any issues.