Overview
The Custom CSS Editor provides ClickBank Sellers with the flexibility to customize their order form beyond the capabilities of the Order Form Customizer. With this editor, users can employ custom CSS as well as leverage a code editor featuring predefined classes to modify areas of the order form that are not accessible through the standard customization options. This empowers sellers to tailor the appearance and functionality of their order forms to better suit their branding and business needs.
NOTE: In order to properly customize your order form with CSS, you must be proficient with HTML and CSS. If you do not feel comfortable with these skills, we recommend that you seek out the help of a developer.
Noted Differences With Legacy Advanced Order Forms
This article refers to ClickBank's new order form tools, not the legacy basic or advanced custom order forms covered in other areas. These tools allow for much more fluid, accessible, on-page order form customization. In many cases, you may be able to style and build your desired order form without the use of CSS using the primary Order Form Customizer, Exit Offer Customizer, and upcoming Countdown Timer feature.
- Use built-in style options in addition to CSS
- CSS added in the editor, not uploaded separately
- Images are not uploaded and approved separately, they are added within the form
- Preview the CSS while building
- Layout selection is done through the editor, not modified with CSS
This article covers the following topics. Use the outline to navigate to the section that best fits your needs.
Creating a Custom Template With CSS
- How to Customize With CSS on the New Order Form
- Using Classes Not Contained Within the Editor
- Adding Images Using CSS
- Selecting Classes
- How to Modify Content for Specific Products
- How to Modify Content for Specific Bumps
- Frequently Asked Questions
How to Customize With CSS on the New Order Form
The Custom CSS Editor is a feature located in the New Order Form Tools section of your My Order Form Page located under the Vendor Settings tab of your account nickname.
To start customizing with CSS, open the Style tab from within the Custom CSS Editor and click ‘Add Custom CSS’ at the bottom of the panel.
Using classes not contained within the editor
The Custom CSS Editor contains preset classes. However, the editor is also compatible with classes not contained in the editor. Use the browser’s developer tools to inspect the order form to see which classes are available to be customized using CSS that might not be preset options in the customizer. Customize these classes using the Custom CSS Editor the same way you’ve used CSS in the past.
Due to ongoing updates and improvements, there’s a risk that using classes outside of the predefined class list may experience unintended changes in the future.
Adding Images Using CSS
To add images through CSS, from the ‘Add Custom CSS’ window, you can click the ‘Add Image’ button above the editor. Once ‘Add Image’ is selected, you’ll be prompted to pick an existing image or to upload a new image.
When uploading a new image, alt text is required and asked for as part of the upload. Images must be in .jpeg, .png, or .jpg format. Once the image is selected or file upload is complete, the image path is inserted to the editor.
Selecting Classes
With the Custom CSS Editor, there are many predefined classes to assist with customization. To use one of these, click ‘<> Add Class’ from above the editor, choose the area of the form you wish to modify, and the corresponding class will be inserted into the editor.
How to Modify Content for Specific Products
With the Custom CSS Editor, there are two classes that provide the ability to modify content for either specific products or all products on the order form. These classes can be used to customize the product details or add content before the order summary (pre-order summary).
Pre-Order Summary
The Pre-Order Summary controls the div just above the price. It’s common to use this div for things like creating and customizing a strike price. You can see a sample customization of this space with the red text in the image below.
Product Details
The product details control the area related to a product in the cart summary. You can see the area highlighted below in red.
It’s important to note that there can be multiple products in the cart summary, and if you utilize the product details without the item specified it will apply to all of them. Looking to modify only one product? No problem! Use the Product Details (Specific Item) with the specific item number in the class to target a single item.
How to Modify Content For Specific Bumps
Need to modify the content for specific order bumps? Use the Order Bump class in the Custom CSS Editor. This works in much the same way as the Product Details class in that you have the option to apply the CSS to a single product by using the item number or you can customize all bumps.
To accomplish this, select Order Bump or Order Bump (Specific Item) from the ‘<> Add Class’ menu.
If you select the specific item option, you will need to input the item number and replace the <ITEM> tag.
To verify your changes, select the ‘Preview’ option in the bottom of the editor to preview your updates in a new tab.
Frequently Asked Questions
-
Q: Am I able to drop in an Advanced Custom Order Form CSS file without having to make modifications?
- No, it’s not a direct replacement for the existing CSS in the legacy order form. Because the classes are written differently in this editor than the previous one, you’ll need to make some updates to the existing CSS to get it to work. If you’re familiar with CSS it won’t be difficult to make these updates.
-
Q: What happens if I want to edit something outside the list of classes provided in the editor?
- You can still target these elements in the same way you previously did by inspecting the order form and customizing the appropriate class. Note that anything edited outside of the class selector may be impacted by future changes.