Strategic use of form redirects is a great way to create sales funnels and increase conversion rates

This guide outlines two different ways you can use Customer Fields to convert a form submission into an order. Method A sends customers to a product detail page to encourage the purchase of a specific product, while Method B sends customers directly to the store's checkout page with multiple products pre-loaded into the cart.

Consider the following example scenario:

A local youth group offers a summer camp for kids. The youth group needs a way for parents to register their children and purchase entry to the camp for the upcoming season.
There are two camps; one for boys and one for girls. The pricing for both camps is the same, but the events and activities are different.
The youth group also sells t-shirts for campers. The t-shirts are offered in a variety of unisex sizes. (the t-shirts are handled in Method B only)

👋 Note: If you are looking to pre-load the cart with a subscription item, this works a little differently. Jump here for details.

Method A: Customer submits a form, gets sent to a product detail page

This method is great for situations where you want to encourage the purchase of a specific product, but you don't want to send the customer directly to checkout. By sending the customer to a product detail page, they can learn more about the product by viewing the product's images and description. Once the customer is ready to purchase, they can add the product to their cart and proceed to checkout, or they can keep shopping by browsing the store's other products & collections.

See the screencast below for an example of this method in action:

Steps to enable

Step 1: Get a list of product URLs

The first thing you'll need to do is get a list of the products that you want to use with the form. For this particular method we're going to use just two products, but you're welcome to implement something similar with any number of products. You can click the "View" button from the Shopify admin to get the product URLs.

In this example we're going to use the following product URLs:

/products/boys-summer-camp
/products/girls-summer-camp

Pro tip: Make sure to use a relative path for the product URLs (as shown above) instead of an absolute path. You can read more about best practices for URLs using this help article.

Step 2: Use product URLs in Form Rules

If you have multiple products, and you want to send the customer to a specific product based on certain conditions, then you can use form rules to set the form's redirect URL to the product detail page.

For this example, we have a radio button field on the form for 'Camper Gender', with options for male and female as the values:

We've also created two rules; each with a single condition and a single action, which will automatically redirect customers to either the Boys Summer Camp product or the Girls Summer Camp product based on which gender is selected on the form. Here's what these rules look like in the app admin:

Note: If you only have one product that you want to use on the form, then you can skip form rules altogether. Simply add the product URL into the 'Submission redirect URL' in the Settings tab of the form builder, like so:

Method B: Customer submits a form, gets sent directly to checkout

This method is great for situations where you want to force the customer to purchase a specific product or set of products. With the use of Shopify's cart permalinks (details here), you can send customers directly to the store's checkout page with specific products and quantities pre-loaded into the cart.

Depending on the fields that were included on the form, this means that the customer may only need to confirm their addresses and supply billing information to complete the purchase process.

See the screencast below for an example of this method in action:

Steps to enable

Step 1: Get a list of variant IDs

The first thing you'll need to do is get a list of the variant IDs that you want to use with the form. You can use the following help article from Shopify to learn how to get the variant IDs:

Get Variant IDs from Shopify

Once you have the variant IDs, we suggest using a spreadsheet or text editing program on your computer to create a list of the IDs so can easily reference them later. For this particular example we're going to use three separate products:

Boys Summer Camp (single variant ID)
Girls Summer Camp (single variant ID)
Camp T-Shirt (multiple variant IDs, one for each shirt size)

Step 2: Create permalink(s) to pre-load the cart

There are two parameters that are required when using permalinks to pre-load cart; variant ID and quantity. Here's what the syntax looks like:

Single product: /cart/{variant_id}:{quantity}
Multiple products: /cart/{variant_id}:{quantity},{variant_id}:{quantity}

For this example we're going to set the quantity of each product to 1, but of course this can be adjusted to fit your specific use case. You can even use a variable to dynamically set the quantity if needed :)

Pro tip: There are even more parameters you can add to permalinks when pre-loading the cart! You can learn more using this forum post.

Step 3: Use permalinks in Form Rules

In addition to the 'Camper Gender' field from Method A, in this particular example we've also got a field on the form which allows the customer to opt-in for the purchase of a camp t-shirt. If they opt-in for the t-shirt, then the customer is asked to select their desired size.

As you'll notice below we're using the same gender conditions from Method A, but we've also added another condition to handle the logic for the t-shirt opt-in. This time we're using a permalink for the 'set redirect URL' action in form rules, which will send the customer directly to checkout with either the Boys Summer Camp product or the Girls Summer Camp product in their cart. Here's what these rules look like in the app admin:

Without T-shirt:

With T-Shirt:

As shown above, we've set up some additional rules to conditionally load the cart with the proper size of the Camp T-Shirt product if the customer opts-in for the t-shirt. Notice that we're using a data column variable to dynamically populate the variant ID.

In our case, the values for tshirt_size are set to use the respective variant IDs, which ensures that the correct value is used when the permalink is generated:

Note: If you only have one product that you want to use on the form, then you can skip form rules altogether. Simply add the permalink into the 'Submission redirect URL' in the Settings tab of the form builder, like so:

Pre-load cart with subscription item

Shopify's cart permalinks are tricky to use with subscription products, so you will need to follow a workaround in order to implement. This accepted solution for preloading the cart with subscription items is detailed on this Shopify Community forum thread: Solved: Pre-load cart with subscription plan products

Steps to implement:

Make sure the product in question is using a selling_plan.
Create form rule to redirect customer based on the condition of your choosing.
Set the redirect URL in your rule's action and use this workaround for order conversion redirect. This will clear the cart and redirect the user to checkout upon form submission with the desired subscription product preloaded in the cart.

/cart/clear?return_to=/cart/add?items[][id]={VARIANT_ID}%26items[][quantity]={QUANTITY}%26items[][selling_plan]={SELLING_PLAN_ID}%26return_to=/checkout

📌 Important: you must change {VARIANT_ID} to use the subscription item variant found on the product. You must also change {QUANTITY} to reflect the quantity of products that should be added to the cart. Finally, {SELLING_PLAN_ID} must also be altered to use the product's selling plan ID.

See below for an example of this rule:

Please note that this type of workaround is outside our scope of support, and if you need help configuring this URL you will need to contact Shopify support.

Need help?

If you have any questions or concerns, please reach out to our support team and we'll be happy to assist 👍