Customizing the Checkout Page in Ecommerce Stores

Enhance your Stack ecommerce store’s checkout experience by customizing various elements to suit your business needs and improve customer satisfaction.

Making Shipping Details Hidden, Optional, or Mandatory

Customizing the Shipping Details section on your checkout page can significantly enhance the customer experience by streamlining the process and ensuring you collect only the necessary information.

Why Customize Shipping Details in Checkout?

• Faster Checkouts: By requesting only essential information, you can speed up the checkout process.
• Improved Conversion Rates: A simplified checkout can lead to higher conversion rates.
• Accurate Shipping Rates: Ensure all required fields are filled for precise shipping rate calculations, especially when integrating with platforms like Shippo.

Step-by-Step Guide

1. Access the Checkout Page Editor:

   • Navigate to Sites > Stores > Select your Store.
   • Choose to edit the Checkout Page.

2. Select the Checkout Element:

   • Click on the Checkout element in the page editor to open the settings menu.

3. Navigate to the Advanced Settings:

   • In the settings menu, find and click on the Advanced Section.
   • Look for the Form Options subsection.

4. Customize the Fields:

   • In Form Options, adjust the fields under Shipping Details:

     • Phone Number
     • Address
     • Country/State
     • City
     • Zip/Postal Code

   • Set each field as Hidden, Optional, or Mandatory based on your requirements.

5. Save and Publish:

   • After customizing, click Save and publish the changes to update your live store.

Key Considerations

• Impact on Shipping Rates: Ensure necessary fields are mandatory for accurate rate calculations.
• Live Rates Compatibility: Complete all fields to retrieve live rates from multi-carrier platforms like Shippo.
• Faster Checkout Process: Fewer mandatory fields can lead to a quicker checkout, boosting conversion rates.

Additional Notes in Checkout Page

The Additional Notes feature allows customers to provide specific instructions or details during checkout, enhancing their shopping experience.

Feature Overview

• Enable/Disable Toggle: Easily activate or deactivate the Notes section in Checkout Settings.
• Notes Checkbox Flow: A checkbox appears between Shipping Details and Payment Options, allowing customers to add notes if desired.
• Customizable Text Options: Tailor the Notes section to match your store’s branding.

How to Enable and Customize Additional Notes

1. Access Store Builder:

   • Open the Store Builder and edit the Checkout Page.

2. Enable the Notes Section:

   • Select the Checkout element and go to the Advanced Section.
   • Toggle on Enable Notes at Checkout.

3. Customize Notes Text Options:

   • Under Text Options in General Settings, adjust the Notes Heading Label Text and Textbox Placeholder Text.

4. Save and Publish:

   • Save your changes and publish them to activate the feature.

Key Points to Remember

• Optional for Customers: The Notes section is optional, and customers can choose to provide additional details.
• Blank Notes: If no notes are entered, the section remains empty in Order Details.

Country Selection at Checkout

Manage shipping locations and default customer locations effectively with the Country Selection feature.

Key Features

• Shipping Locations: Choose to ship globally or to specific countries.

  • Ship to all locations: Enable global shipping.
  • Ship to specific countries: Select specific countries for shipping.

• Default Customer Location: Customize how customer location is handled.

  • No default location: Customers choose their location.
  • Geolocate: Automatically detect location based on IP.
  • Show all countries: Display all available countries for selection.

How to Use It

1. Edit the Checkout Page:

   • Open the Store Builder and edit the Checkout Page.

2. Customize Shipping Locations:

   • Select the Checkout element and go to the Advanced Section.
   • Under Form Options, choose your shipping location preference.

3. Set Default Customer Location:

   • Choose the desired option under Default Customer Location.

4. Save and Publish:

   • Save your settings and publish the changes.

Key Points to Remember

• Country/State Field: If hidden, country selection options won’t appear.
• Geolocate Feature: Provides a seamless experience by automatically detecting the customer’s location.

Auto-Complete Address at Checkout

Enhance the checkout process with the Auto-Complete Address feature, providing real-time, Google-powered address suggestions.

Feature Details

• Faster Checkout Process: Real-time address suggestions speed up order completion.
• Improved Accuracy: Reduces manual entry errors, ensuring reliable shipping information.
• Seamless Integration: Works across all checkout flows in ecommerce store pages.

Address Fields Supported

• Address
• City
• Country
• State
• Postal Code

How to Enable & Use

1. For Store Owners:
   • Navigate to Store > Checkout Page > Advanced Settings.
   • Enable the Auto-Complete Address toggle.
   • Save and publish to activate the feature.

Key Notes & Considerations

• Powered by Google: Ensures fast, accurate address suggestions.
• Seamless Experience: Enhances customer experience by reducing friction in address entry.