Subscription Policies for Subscriptions for Shopify Checkout

In compliance with Shopify policy when using Subscriptions for Shopify Checkout, a link to your subscription policies is included on your store. This article will show you where this link is displayed, as well as show you how to set up your subscription policy in Shopify.

Alert: It is recommended to update the policy as your store requires, as you are responsible for your published policies. For more information, please visit Shopify’s article: Adding store policies.

If you are using the Subscription widget app block (installed on Online Store 2.0 themes), your customers will be directed to a 404 error page if your subscription policy is not set up. When using the standard Subscription widget (installed on vintage themes), Shopify will display their default subscription policy text until your own policy is set up. 

Location

The link to your subscription policy is displayed in both the subscription widget and cart page when using the Subscription widget app block on a Shopify 2.0 theme. If you are using the standard subscription widget on a vintage theme, it's displayed on the cart page only.

Example

Subscription widget:



Cart page:

Setup

To add your subscription policy, please follow the steps below.

1. From the Shopify admin, navigate to Settings > Policies.
2. Scroll down to Purchase options cancellation policy.
3. Enter your policy details, or select Replace with template to amend Shopify's default template to your store's requirements.

   

4. Click Save.

Customize the Subscription details section

If you are using the Subscription widget app block installed on 2.0 themes, you can use CSS to customize the Subscription details text that appears in the subscription widget. To do this, please follow the steps below.

Step 1: Create a blank CSS file

1. From the Shopify admin, navigate to Sales channels > Online Store > Themes.
2. Click the ellipsis next to your desired theme, and select Edit code.
3. In the left menu, expand the assets folder, and click Add new asset.
4. Click Create a blank file.
5. Ensure the Extension is set to css.
6. In the File name field, enter a logical name such as bsub-custom.

Step 2: Customize the text

Follow the instructions relevant to the text area you'd like to customize, as shown in the following diagram. 

1. Subscription details

To replace the Subscription details text, add the following CSS to the file you created:

.bsub-widget__toggle-details-btn div {
  visibility: hidden;
  position: relative;
}

.bsub-widget__toggle-details-btn div:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Example text";
}

Replace Example text with your desired text.

The above CSS produces the following result:

You'll notice that this change leaves a large space between the last word and the arrow. To reduce this space, you can add the following link of code in your css file:

Note: The pixel value for the margin-right rule will vary depending on the length of the text you’ve added. Adjust the value until you are satisfied with the results on the storefront.

margin-right: -35px !important;

Here is the result:

2. Subscription details header text

To replace the subscription details header text in the subscription details area in the widget, add the following CSS to the file you created:

.bsub-widget__sub-details-heading {
  visibility: hidden;
  position: relative;
}

.bsub-widget__sub-details-heading:after {
  visibility: visible;
  position: absolute;
  top:0;
  left:0;
  content: "Example Heading Text";
}

Replace Example Heading Text with your own text.

The above CSS produces the following result:

3. Subscription details paragraph text

To replace the subscription details paragraph text, add the following CSS to the file you created:

.bsub-widget__sub-details-desc {
  visibility: hidden;
  position: relative;
}

.bsub-widget__sub-details-desc:after {
  visibility: visible;
  position: absolute;
  top:0;
  left:0;
  content: "This is an example of replacing the subscription details paragraph text. You can write as little or as much as you like in here. If you write a lot of text the widget will expand to fit it all.";
}

Replace the text after content: with your desired text. Ensure the text is wrapped in quotes.

The above CSS produces the following result:

You'll notice that because we added quite a bit of text, the paragraph text is overlapping the subscriptions policy link. To fix this, you can move the link below the paragraph text.

To move the link below the paragraph text, add the following CSS to the bottom of the file:

.bsub-widget__policy-link {
  margin-top: 5%;
}

Add line breaks

You can also add line breaks to your text by adding \a in your content rule. See the example below.

.bsub-widget__sub-details-desc {
  visibility: hidden;
  position: relative;
}

.bsub-widget__sub-details-desc:after {
  visibility: visible;
  position: absolute;
  top:0;
  left:0;
  white-space: pre;
  content: "This is an example of paragraph text with line breaks. \a We can show multiple lines of text on separate lines. \a Isn't that neat?";
}

.bsub-widget__policy-link {
  margin-top: 5%;
}

The above CSS produces the following result:

Alert: When replacing paragraph text and adding line breaks you will need to be careful about the length of each line of text. If the text is too lengthy it will get cut off once the line reaches the boundary of the subscriptions widget.

4. Subscription policy link text

To replace the subscription policy link text, add the following CSS to the file you created:

.bsub-widget__policy-link {
  visibility: hidden;
  position: relative;
}

.bsub-widget__policy-link:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "Example link text";
  text-decoration: underline;
}

Replace the text after content: with your desired text. Be sure to wrap the text in quotes.

The above CSS will produce the following results: