How to Customize my Checkout-Page?

IWD Checkout allows you to have a Default Configuration Design for all your store's checkout-pages or to configure each Checkout-page individually.

To configure the checkout-page design:


  1. Access your IWD Checkout account here: https://www.iwdagency.com/account
  2. If you want to change the default checkout-page configuration:
    • Go to IWD Checkout -> Configurations -> Design / Look & Feel


  3. If you want to customize each integration/store checkout-page individually:
    1. Go to IWD Checkout -> Integrations 
    2. Click Edit Store icon and click on the Design / Look & Feel section



    3. Set to No the Use General Default Settings option.


  4. Customize:
    1. Select the Checkout-Page Layout you want to use per device:
      1. Multi-step layout
      2. One Page Checkout 
    2. Select the Address Type Order, that will dictate which Address field needs to be filled out first on your checkout page.


    3. Select your store's Font that will be used on your Checkout-Page. IWD Checkout uses Google fonts.


    4. Select your preferred colors for the following sections/buttons:
      1. Page Background: This color will be applied to the Checkout Page Background.
      2. Sidebar Background: This color will be used to the Checkout Right Sidebar Background.
      3. Heading Text Color: This color will be applied to Headings and Titles.
      4. Body Text Color: This color will be applied to any Body or Informational Text
      5. Link Color: This color will be applied to all Links on the Checkout Page.
      6. Highlight Color: This color will be used to Highlight Chosen Options and Focus Input Fields
      7. Primary Button Background: This color will be used to Primary Action Buttons Background. Ex: Continue To Delivery Method, Continue To Payment, Place Order.
      8. Primary Button Text Color: This color will be applied to Primary Action Buttons Background. Ex: Continue To Delivery Method, Continue To Payment, Place Order.
      9. Secondary Button Background: This color will be applied to the Secondary Action Buttons Text. Ex: login, Reset, Apply a Promo Code.
      10. Secondary Button Text Color: This color will be applied to the Secondary Action Button Text. Ex: login, Reset, Apply a Promo Code.
    5. Click the Save button.