This article covers connecting an existing site to Cratejoy’s subscription checkout tools. This works for sellers who use a different platform for their frontend website and Cratejoy as the backend checkout and management system. 

In this article:

What do I need in order to integrate Cratejoy into an existing site?
How do I integrate Cratejoy into a third party site?
Linking to a Product and its subscribe flow (easy method)
Using add-to-cart URLs (advanced method)

What do I need in order to integrate Cratejoy into an existing site?

Here is what's needed to get started with integrating Cratejoy to an existing site:

• Site on a third-party platform.
• Cratejoy seller account on either the Checkout-Only or All-in-One plan. More about plans here.
• Installed and published theme on Cratejoy. More about installing themes here.
• At least one active Subscription Product. More about setting up Subscription Products here
• Optional: Access to the domain used on the third-party site. Sellers can set up a subdomain (i.e.: subscribe.yourstore.com) specifically for the Cratejoy subscribe and checkout process. More about custom domains here.

How do I integrate Cratejoy into a third party site?

Through custom development, there are a number of ways a site can integrate with Cratejoy. This section goes over the two main ways. 

Easy Method: Linking to a Product and its Subscribe Flow

This method uses the installed theme within Cratejoy to guide customers through the subscribe flow. This will include the product's Subscribe Flow including variant, survey, and term steps.

Advanced method: Using add-to-cart URLs

This method requires using add-to-cart URLs. These are links that will automatically add a product to a cart and take the customer to checkout. 

If you want to change your site's logo link to link back to your third party website, check out Changing Your Site's Logo Link. 

Linking to a Product and its subscribe flow (easy method)

These steps will walk you through how to integrate a Cratejoy product using the theme installed on Cratejoy.

Setup the Design

Step 1: Go to Design in the lefthand sidebar and click on Designer for the theme that needs to be modified. We always recommend making copies of a theme before modifications.

Step 2: Under Viewing on the upper right, select Subscribe.

Step 3: Using the Designer tools, style this page as desired.
Other pages that will need review include the following as these are the pages customers will access during checkout: Checkout, Account Details, Account and Thank You Page.

Determine the product's link

After the design has been set up for the customer-facing pages, the next step is to get the links needed to integrate with the third-party site.

Step 1: Determine the product subscribe flow link by going to Platform Settings > Domains 

The specific link is determined based on whether the Cratejoy subdomain or custom domain is being used. 

Step 2: The subscribe flow link can be accessed adding "/subscribe" to the end of the domain name.

The URL would depend on if the Cratejoy Subdomain or a Custom Domain is being used.
Here's how the links would be formatted using the example domains above:

• Cratejoy Subdomain format: test-store.cratejoy.com/subscribe 
• Custom Domain format: subscribe.my-test-store.com/subscribe

Step 3: On the third-party site, there would need to be a call to action such as a button or link to Subscribe. This action would link to the page accessed by using the steps above. 

Using add-to-cart URLs (advanced method)

This advanced method is for sellers wanting to use an existing site for as much of the purchasing process as possible.

Please note that with this method, the Cart page will still be used to checkout. Customers will also use the Customer and Account pages to manage subscriptions, so extra styling for these pages may be needed.

How it works

This method uses only the Cratejoy Checkout and Customer pages in the subscribe process. Sellers essentially link to Cratejoy backend, but only to pages that result in a product being added to the cart. The product in the cart will include all product information including variant selections, term length and any other steps in the Subscribe Flow for this product. 

Why it's more complicated

This method is more complicated because, for any product, the number of add-to-cart links grows depending on the number of terms and variant options. For example: If a product has to variants (i.e.: size, color, genre) and each variant has 3 options, there are 9 potential links generated to add the product to the cart.

How to format and generate add-to-cart URLs

The basic format for  add-to-cart URLs is:

(yourstore.cratejoy.com/subscribe/<PRODUCT_ID>/<VARIANT_CHOICE_1_ID>/<VARIANT_CHOICE_2_ID>/)

Generate the add-to-cart URL

Here's how to generate the add-to-cart URL:

Step 1: Go to Design in the lefthand sidebar.

Step 2: Click on the thumbnail image next to the installed theme. This will open a preview of the site. 

Step 3: Click on the subscribe button

Step 4: In the subscribe flow, make the product, variant, and term selections that lead you to the last step before the product is added to the cart.

Step 5: Right-click on the final option call-to-action and select 'Copy Link Address'.

This copied link will be the URL that takes customers to checkout with the product and all of the options selected already added. This process needs to be repeated for all of the possible combinations of choices.