Using a different version of Infusionsoft? Click Here to learn more

Set Up A Shopping Cart Theme And Thank You Page

 
  1. Go to E-Commerce > E-Commerce Setup
     
  2. Go to Design and click on Shopping Cart Themes.
     
  3. Click the Create New Theme button.
     
  4. Choose the one or two column layout.
     
  5. Choose from one of the default themes by clicking Use this theme. You can click on the image thumbnail to preview each theme.
     
  6. Name your theme and click Save.
     
  7. Now you can customize your theme by navigating to the various tabs.
    • Images: All of the default themes have a custom banner area. This is often used to display a company logo in your Infusionsoft storefront and shopping cart. Click on edit to replace the default image with a custom image that is up to 960 pixels wide. The image is aligned to the left by default and displays above the cart header.
    • HTML Areas: Click on the HTML Areas tab to insert images and text into predefined areas of the storefront and shopping cart. HTML areas include header, footer, sidebar navigation, and more. View the diagrams to see where the area shows up on the storefront or cart and see code examples below for basic HTML directions. Click on the Preview button to view the change, and the Save button when you are finished.
    • Labels: Click on the Labels tab to customize the text labels in the storefront and shopping cart. Enter new label text, then scroll to the bottom of the page and click Save. In the example below, we change the word, "Products" to "Golf Accessories."

  8. Click on the Edit CSS tab for more advanced customization. If you have a basic knowledge of CSS, the comments throughout the code will help you change the colors of the cart to match your branding. If you need help, you may need to contact your webmaster or check out the marketplace for a design consultant. Click Preview to view your changes and Save when you are finished.
     
  9. The Appearance CSS controls the look and feel of the navigation, background, fonts, and more.
    • Top navigation and header
    • Left sidebar and main navigation (2 column layout)
    • Navigation (1 column layout)
    • Font color, size, and type
    • Background images and/or colors
    • Link behavior (e.g. color change on hover)
    • Category and product pages in the storefront
    • Cart and checkout pages in the shopping cart
    • Upsell boxes
    • Typography in the storefront and shopping cart
    • Link and button appearance throughout the storefront and cart
    • Footer display

  10. The Layout CSS allows you to customize the size and positioning of the various storefront and shopping cart elements, including:
    • Top navigation and header
    • Left sidebar and main navigation (2 column layout)
    • Navigation (1 column layout)
    • Category and product pages in the storefront
    • Cart contents in the shopping cart
    • Form fields and labels
    • Table displays
    • Containers
    • Forgot Password
    • Upsells
    • Typography in the storefront and shopping cart
    • Link and button appearance throughout the storefront and cart
    • Footer
    • HTML Areas
    • Settings

  11. Click on the Settings tab to configure optional settings.
    • Hide Promo Code: If you do not offer promo code discounts, mark this checkbox to hide it from the shopping cart checkout page.
    • Hide "Continue Shopping" Label: Mark this checkbox if you do not want customers to go back to your storefront during the purchase process.
    • (Optional) Continue Shopping URL: The continue shopping button takes customers back to the Infusionsoft storefront by default. Enter a custom storefront URL if you created a storefront on your website instead of using the Infusionsoft storefront.
    • (Optional) Thank You URL: Infusionsoft provides a default thank you page with a purchase confirmation summary. Enter a custom web page URL if you have created a custom thank you message on your own website.
    • Finished URL: This setting only applies if you are using the Infusionsoft default thank you page (above.) Enter a finished URL to direct customers back to your website after the purchase process is completed.

  12. After you save the custom theme, it will show up in the Shopping Cart Themes area. Click on the Use Theme link under the theme thumbnail to set it as the default shopping cart theme.