Order form themes allow you to customize the appearance of an order form to match your style and branding. There are several pre-designed themes to choose from or you can create and modify your own themes.
Warning! If the CSS is changed for one theme, those changes will apply to all order forms using that theme!
The Edit CSS tab is divided into two sections: Appearance CSS and Layout CSS.
- Go to E-Commerce > E-Commerce Setup
- Click on Order Form Themes
- Click the Create New Theme button.
- Choose a mobile responsive, one-column, or two-column layout. You can hover over the thumbnail to see more information.
Note: Any order forms you have created with a one-column or two-column layout can be converted to a mobile responsive layout in the Theme tab of the existing order form.
- Choose an existing theme to use as your base theme.
- Click on the Use This Theme button to select the theme to use.
- Name your theme and click Save.
- Upload your company logo image that will be present in the top banner area of the order form. Please note that banners will display a maximum width of 960 pixels.
- Click Edit then Browse. Once you have chosen the image you would like to use, click Save.
- (Optional) Click over to the HTML Areas tab. The HTML Areas allow you to customize different locations of the order form with your own custom HTML. Each area is accompanied by a thumbnail image illustrating the exact location, as well as a Preview and Save button. Each HTML area is referenced in Layout.css. This section requires advanced knowledge of HTML. If you require a professional to help you modify the theme to fit your style and branding, take a look at our Marketplace for a Keap certified design consultant.
Pro Tip! Certain themes will include sample images that are pre-loaded into the design. Go to the HTML areas to either change out the images via code or delete the code entirely to remove the sample images.
- (Optional) Click on the Labels tab. This gives you the flexibility to change the default label names on the order form.
- (Optional) Click the Edit CSS tab. This section allows a web developer to customize the layout to match your website. It also allows for more custom and complex designs. This section requires advanced knowledge of CSS. If you would like to learn more about CSS, check out W3schools for instructions and tutorials. If you would like to hire a professional to help you modify the theme to fit your style and branding, take a look at our Marketplace for an Keap certified design consultant.
- Appearance.css controls colors, fonts, borders, background images and background colors. It contains the following subsections:
- Product Grid
- Forms
- Upsells
- Typography
- Links and Buttons
- Misc
- Layout.css controls margins, padding, width, height, positioning, floats and alignment. It contains the following subsections:
- Product Grid
- HTML Areas
- Forms
- Form fields and labels
- Tables
- Upsells
- Typography
- Links and Buttons
- Appearance.css controls colors, fonts, borders, background images and background colors. It contains the following subsections:
- You can change the font to another Google Web Font by replacing the link, or delete this line entirely and choose a standard web font such as Georgia or Verdana. This can be accomplished by changing the fonts specified throughout Appearance.css. Follow the link for more information on web safe fonts. The order form contains a header, content area and footer. It might also contain a right column depending on the layout chosen. You can create your own custom header either by inserting the appropriate HTML under Custom Header in the HTML Areas tab, or replacing the current header image in the Images tab.
This is the basic code structure for an order form:
<html>
<body>
<wrapper> (wraps around the entire order form and centers it)
<div id=”header”> (contains header image from images tab)
</div>
<div id=”content”> (contains all the content of the order form)
</div>
<div id=”rightCol”> (contains anything entered in ‘Right Column’ HTML area)
</div>
<div id=”bottomCustomHTML”> (Contains anything entered in ‘Footer’ HTML area)
</div>
</body>
</html>