Skip to main content
All CollectionsCustom Code
Custom Code to change [proceed to checkout] button in Offer Checkout
Custom Code to change [proceed to checkout] button in Offer Checkout

If you want to customise the 'Proceed to Checkout' button inside your Offer Checkouts, you will need to follow the steps below to add custom code to your checkout.

Bec Burtt avatar
Written by Bec Burtt
Updated this week

Where to add your Custom Code:

Add this CSS code on your offer checkout’s Advanced > Custom CSS section:

STEP 1: Copy the Custom Code below:

.n-button--primary-type {

--n-color: #9a6a71 !important;

--n-color-hover: #6a2921 !important;

--n-color-pressed: #6a2921 !important;

--n-border: 1px solid #6a2921 !important;

--n-border-hover: 1px solid #9a6a71 !important;

background-color: #9a6a71 !important;

}

STEP 2: Add your Colour to the Custom Code

Replace the # codes in bold above with the colour code you wish to use for the button

Note:

  • Class: .n-button--primary-type Do not change this unless you are targeting a different button.

  • *This code won’t automatically apply its changes to all your offer checkouts, you still need to manually add them on each offer checkout.

Understanding the Colour Codes:

  1. --n-color: #9a6a71

    This is the main colour users see when the button is in its normal state.

  2. --n-color-hover: #6a2921

    This is the hover colour.

  3. --n-color-pressed: #6a2921

    Changes the button colour when pressed.

  4. --n-border: 1px solid #6a2921

    Border color

  5. --n-border-hover: 1px solid #9a6a71

    When hovered, the border changes to this lighter shade

  6. background-colour: #9a6a71

    Sets the background colour to match the default button colour. This is gonna ensure consistent button colour, even in case of fallback or override issues.

Did this answer your question?