How to Add Custom CSS and Tracking Scripts to Checkout Pages, Popup Widgets, and Form Embeds

Written By Carlos

Last updated About 1 year ago

You are able to add custom CSS, JavaScript, and 3rd party tracking scripts to any PayKickstart product checkout page, pop-up widget, and form embed.

You can add CSS to the default location or the override locations by following the instructions below.

Default Location: Checkout pages, Embed and Pop-Up Checkouts

In the Campaigns → Products (edit product settings).

Go to step 2 (Checkout Settings), and you will see a section labeled Add Custom CSS / Tracking Scripts.

You can add your CSS, JavaScript, or tracking pixel in the default location here.

Another place to add additional code or scripts is inside the Checkout Template Editor (Product settings → Checkout then choose to edit your checkout page) , located under the Footer section of your checkout editor options.

We only recommend adding the code/script in the footer if it is required to be in the footer.

Secondary Override Location: Embed and Pop-up checkouts

Embed Forms: If you would like to use a custom CSS override with a specific embed form, you have the option.

Go to the Campaigns section and choose to edit the specific Funnel related to your Embed form

Inside the sales funnel, access the specific product you are using as an embed form and click the checkout options button to access the embed form settings.
In step 2 of the embed form, you can select to use the default product CSS, disable CSS, or use custom CSS for the specific embed.
If you enable the Custom option, a new field will appear to add your custom CSS.
After adding the custom CSS, click Apply to save the changes to the embed form.

Your CSS changes will now be saved and visible on the specific embed form.

Pop-Up Forms: If you would like to use a custom CSS override with a specific pop-up form you have the option.

Go to the Campaigns section and choose to edit the specific Funnel related to your Pop-up form

Inside the sales funnel, access the specific product you are using as a pop-up form and click the checkout options button to access the pop-up form settings.
In step 1 of the pop-up form settings, you can select to use the default product CSS, disable CSS, or use custom CSS for the specific pop-up embed.
If you enable the custom option, a new field will appear to add your custom CSS.
After adding the custom CSS, click to save the changes to the pop-up form.

Your CSS changes will now be saved and visible on the specific pop-up form.

Still need help? Ask the team