Add another customizable page before checkout

Store Design
, ,

Topic summary

A user wants to add a customizable page before checkout where customers can fill out 10-12 text fields and dropdowns with product-specific information for a DIY website.

Key Challenge:
Shopify restricts direct checkout customization for most plans, requiring workarounds.

Proposed Solutions:

  1. Custom Page Approach: Create a standalone page with HTML forms using Shopify’s properties attribute to capture custom data, then redirect the “Add to Cart” button to this page before proceeding to checkout.

  2. Cart Page Modification: Add customization fields directly to the cart template (cart.liquid) with JavaScript validation to ensure all required fields are completed before checkout.

  3. Third-Party Apps: Use apps like Infinite Options, Customify, or Bold Product Options for no-code implementation of advanced customization features.

All approaches include code examples for form creation and validation. The discussion remains open for the original poster to select their preferred solution.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am trying to create an online Do it yourself site, will add products on the website, but before checkout, the client needs to complete 10-12 textbooks with different information, is there any way to add another page before checkout with texts, drop downs, so the client can choose some types for their products before going to check out.

Thank you

2

Hi @PCCPitesti ,

I am from Mageplaza - Shopify solution expert.

To create a custom page before checkout, note that Shopify’s checkout process is restricted for most plans, so you’ll need to implement a workaround. Here are some suggestions to help you achieve this:

Approach 1: Use a Custom Page Before Checkout1. Create a Custom Page in Shopify

  • Go to your Shopify admin.
  • Navigate to Online Store > Pages > Add Page.
  • Create a page with a form for the customizable fields (e.g., text boxes, dropdowns, checkboxes).

  1. Add Inputs for Customization

    • Use the HTML form to collect customer input. For example:

  • The properties attribute lets you capture custom data and pass it to the cart.

  • Redirect Customers to This Page

    • Update your theme’s Add to Cart button to redirect users to this new page instead of directly to the cart or checkout.
    • Example:
document.querySelector('.add-to-cart').addEventListener('click', function(e) {
  e.preventDefault();
  window.location.href = '/pages/customization';
});

Approach 2: Use the Cart Page for Customization1. Customize the Cart Page

  • Add inputs (like text boxes, dropdowns) directly to the cart page.
  • Edit your cart template file (e.g., cart.liquid) in your theme to include customization options.

  • Validate Before Checkout

    • Use JavaScript to ensure all fields are filled before proceeding to checkout.
    • Example:
document.querySelector('.checkout-button').addEventListener('click', function(e) {
  const customText = document.querySelector('#custom_text').value;
  if (!customText) {
    e.preventDefault();
    alert('Please fill out all required fields.');
  }
});

Approach 3: Use a Shopify App

If you prefer not to code, you can use apps to add a customizable page:

  • Infinite Options
  • Customify
  • Bold Product Options

These apps allow you to create advanced customization options with minimal effort.

There are several approaches to meet your requirements; choose the one that works best for your store. I hope this helps! Feel free to leave a comment if you need further assistance.