Design

Customizing the design to match the look and feel of your checkout flow, matching your website.

Customize the CSS

Pelcro uses the !important tag to ensure all CSS styles are prioritized. In order to override the CSS, add another CSS rule with !important , and either give the selector a higher specificity (adding a tag, id or class to the selector) or add a CSS rule with the same selector at a later point than the existing one (before end of body). This works because, in a specificity tie, the last rule defined wins. The example below to override multiple CSS attributes in our default view.

What can you customize

You can customize any of the following elements. In the example below, you'll find a

Header

Header background-color

Header site name

Button

Background color

Text color

Fields

Field radius

Field background color

Example

Below is an example of the customization and how it was achieved via CSS customization.

#pelcro-app .pelcro-prefix-view .pelcro-prefix-header{
        background-color: #3c464b !important;
        margin-bottom: 20px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-modal-header{
        border-bottom: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn {
        background: #ff5029 !important;
        border-color: #ff5029 !important;
        background-image: none !important;
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:focus,
    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:hover
    {
        background: #ff5029 !important;
        border-color: #ff5029 !important;   
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-link{
        color: #ff5029 !important;
        background-image: none !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-site-name {
        display: none !important;
    }

    #pelcro-app #list .pelcro-prefix-view .pelcro-prefix-product-button {
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-authorship{
        display: none !important;
    }

    #pelcro-app .pelcro-prefix-view #pelcro-view-select .pelcro-prefix-center-text{
        display: none !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-input, #pelcro-app .pelcro-prefix-view .StripeElement{
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view #pelcro-view-dashboard .pelcro-prefix-dashboard-block.logo {
        background-color: #3c464b !important;
    }

    #pelcro-app #list .pelcro-prefix-view .pelcro-prefix-plan-field-wrapper{
        overflow-x: hidden !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-close:not(:disabled):not(.disabled) {
        color: #fff !important;
    }

    #pelcro-app .pelcro-prefix-view h1, #pelcro-app .pelcro-prefix-view h2, #pelcro-app .pelcro-prefix-view h3, #pelcro-app .pelcro-prefix-view h4, #pelcro-app .pelcro-prefix-view h5, #pelcro-app .pelcro-prefix-view h6, #pelcro-app .pelcro-prefix-view p, #pelcro-app .pelcro-prefix-view label{
        font-family: "foundry_context_boldbold",Helvetica,Arial,sans-serif !important;    
    }

    #pelcro-app .pelcro-prefix-view h4{
        font-weight: 600 !important;
    }
<script>var Pelcro = window.Pelcro || (window.Pelcro = {}); Pelcro.siteid = "ID";</script>
<script async src="//js.pelcro.com/sdk/main.min.js" type="text/javascript"></script>

<style type="text/css">

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-header{
        background-color: #3c464b !important;
        margin-bottom: 20px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-modal-header{
        border-bottom: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn {
        background: #ff5029 !important;
        border-color: #ff5029 !important;
        background-image: none !important;
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:focus,
    #pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:hover
    {
        background: #ff5029 !important;
        border-color: #ff5029 !important;   
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-link{
        color: #ff5029 !important;
        background-image: none !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-site-name {
        display: none !important;
    }

    #pelcro-app #list .pelcro-prefix-view .pelcro-prefix-product-button {
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-authorship{
        display: none !important;
    }

    #pelcro-app .pelcro-prefix-view #pelcro-view-select .pelcro-prefix-center-text{
        display: none !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-input, #pelcro-app .pelcro-prefix-view .StripeElement{
        border-radius: 0px !important;
    }

    #pelcro-app .pelcro-prefix-view #pelcro-view-dashboard .pelcro-prefix-dashboard-block.logo {
        background-color: #3c464b !important;
    }

    #pelcro-app #list .pelcro-prefix-view .pelcro-prefix-plan-field-wrapper{
        overflow-x: hidden !important;
    }

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-close:not(:disabled):not(.disabled) {
        color: #fff !important;
    }

    #pelcro-app .pelcro-prefix-view h1, #pelcro-app .pelcro-prefix-view h2, #pelcro-app .pelcro-prefix-view h3, #pelcro-app .pelcro-prefix-view h4, #pelcro-app .pelcro-prefix-view h5, #pelcro-app .pelcro-prefix-view h6, #pelcro-app .pelcro-prefix-view p, #pelcro-app .pelcro-prefix-view label{
        font-family: "foundry_context_boldbold",Helvetica,Arial,sans-serif !important;    
    }

    #pelcro-app .pelcro-prefix-view h4{
        font-weight: 600 !important;
    }
    


</style>

In the example above, the selector of .pelcro-prefix-btn is #pelcro-prefix-app. We've added another selector (.pelcro-prefix-view) to give it more specificity and thus override it.

Updated 7 months ago

Design


Customizing the design to match the look and feel of your checkout flow, matching your website.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.