Customizing Your Store Checkout Pages

Elevate your customers' checkout experience with SHOPLINE's Custom Checkout feature! Tailoring your checkout page not only maintains brand consistency but also builds trust with your customers, resulting in a more engaging and reliable shopping journey. 

Follow this guide to create an enticing checkout page that enhances customer satisfaction and boosts conversion rates.

 

---

 

Accessing SHOPLINE Checkout Editor

Take control of your store's checkout pages with the powerful SHOPLINE Checkout Editor! This section will lead you through accessing and utilizing the editor, empowering you to optimize checkout features and craft a seamless experience for your customers.

 

What is SHOPLINE Checkout Editor?

SHOPLINE’s checkout editor is a backend tool that enables customization of your online store's checkout pages. It consists of two main sections:

• Checkout App: In this section, you can install checkout apps to customize the features of your checkout pages. 
  

  Note: The Checkout App function is exclusive to stores with an Enterprise subscription plan.

• Brand marketing: In this section, you can choose to have a one-page or a three-page checkout style and design the appearance of your checkout page using the provided features.

 

Accessing the Checkout Editor

1. From your SHOPLINE admin panel, go to Settings > Checkout Settings.
   
   
   
2. Locate the Custom checkout section, then click the Customize checkout button.
   
   
   
3. For the Checkout App function, click the app icon . To access the Brand marketing section, click the palette icon .

 

Handy Tools in the Header Bar

The header bar in your SHOPLINE checkout editor houses a few essential features to ensure your checkout pages look polished and function smoothly.

1. Undo/Resume Buttons: If you've made a mistake or want to revert, use Undo to go back a step, or Resume to pick up where you left off.
2. Page Selector: This dropdown menu lets you easily switch between different checkout pages for individual configuration. The available options depend on your chosen checkout style (3-step with separate pages for information, shipping, and payment, or 1-step with all details on one page).
3. Display Screen Icons: Click the display screen icons to see how your layout looks on different devices.
4. View online store: Click this button to have quick access to your online store.
5. Save: Click the Save button to save your changes and ensure they're applied to your checkout page.

 

---

 

Customizing Checkout Features with Checkout Apps 

To enhance customer experience, increase brand visibility, and streamline operations, add or design necessary apps using the Checkout App function.

 

Adding and Using Apps

To add checkout apps for feature customization, access the checkout editor by following the steps outlined in the Accessing SHOPLINE Checkout Editor section. Once in the editor, proceed as follows:

1. Select your preferred checkout step style: Click the palette icon, locate the Checkout steps section, and choose between one-step checkout and three-step checkout.
   
   
   
2. Switch to the Checkout App feature by clicking the app icon, then click Add an app.
   
   
   
3. Applicable checkout apps that have been installed will be displayed on the app list. Click the desired app to access its editor.
   
   
   

   Important: Ensure that you have installed the checkout apps in your admin panel before adding and using them in the Checkout App section. The following demonstrates how to install checkout apps using the Extra checkout field PLUS app as an example Click SHOPLINE App Store in the bottom left corner to access recommended apps for customizing checkout pages. Select the desired app. In this example, we will select the Extra Checkout Field Plus app. Click Install. Enable the app by switching the toggle to ON. Once installed, the app will appear on the app list in the Checkout App section of the checkout editor, ready for use.

 

4. Make desired modifications using the app’s editor.
   
   
   
5. Drag and drop the app to the preferred position on the checkout page. Note that certain apps can only be placed in specific positions.
   
   
   
6. Click Save to save the settings.
   

 

Developing Apps

If you have your development team, you can create an application to customize the checkout page according to your preferences.

 

Deleting Apps

To remove an app from the app list, follow these steps:

1. In the checkout editor, choose the app you want to delete.
   
   
   
2. Click Delete app > Confirm.
   
   
   
3. Click Save to save the changes.
   
   

 

---

 

Enhancing Your Checkout Pages

With the Brand marketing section of your checkout editor, you can create a unique checkout page by adding a page banner, brand logo, and custom message content. 

 

To customize your checkout pages:

1. In the checkout editor, click the palette icon to access the Brand marketing section.
   
   
   
2. Use the editing modules on the left panel to customize your checkout pages:

• • Checkout steps: Choose between one-step checkout and three-step checkout styles.
  • Banner: Add a banner to the checkout page for PC and mobile modes, select the image height and display area, and enable full-screen width on PC if necessary. 
  • Logo:  Upload your brand logo to the checkout page, adjust the logo size and alignment, and choose its display position.
  • Content: Upload a background image, select a background color, and choose the color of the input fields.
  • Order summary: Upload a background image, select a background color, and choose whether to collapse or expand it in mobile mode.
    

    Note: Please ensure the checkout fields are visible after making changes to the background image, background color, and field color.

• • Typography: Change the font for titles and main texts. You can restore to default settings if the modifications are unwanted.
  • Color: Select colors for buttons, error messages, and highlighted notifications.

3. Click Save in the upper right corner to save your changes.

 

---

 

Managing Your Checkout Editors

After you create and save a checkout editor for the first time, it will be stored in the Checkout Settings section of your admin panel for management.

 

Managing Live Checkout

The published checkout page is stored in the Live checkout module. You can view, rename, copy, and customize the live checkout page using the following steps:

1. From your SHOPLINE admin panel, go to Settings > Checkout Settings.
   
   
   
2. Find the Custom Checkout section > Live Checkout module. Then, configure the following settings as needed:
   

• • Customize: Access the checkout editor of the live page for configuration. 
  • Copy: Make a copy of the published page. The created draft will be displayed in the Draft module below. 
  • More options: Click the more options icon and select View to see your store's live checkout page. To change the live page’s name, select Rename.

 

Managing Drafted Checkouts

Draft checkout pages allow you to try out different feature configurations and page designs before publishing. Follow these steps to access the settings and make the necessary configurations: 

1. From your SHOPLINE admin panel, go to Settings > Checkout Settings.
   
   
2. Find the Custom checkout section > Draft module. Then, configure the following settings as needed:
   

• • Customize: Access the checkout editor of the draft page for configuration. 
  • Publish: Click to publish the selected checkout draft. This action will make this checkout version go live.
  • More options: Click the more options icon to Preview, Copy, Rename, or Delete the draft page.