Customizing Downpay Theme Extensions with CSS
Downpay can be customized with CSS to integrate better with your theme.
On this page:
Customer order management portal CSS
Product Page Downpay CSS
Custom CSS can be entered into the Downpay product block or embed from the Shopify theme editor.
Product Page Classes
#downpay-product-wrapper - Entire block
#hypehound-pre-orders - Includes border surrounding purchase options
#hypehound-legend - Includes header name style Purchase Options
#purchase-option-deposit-wrapper - Deposit purchase option`
#purchase-option-full-wrapper - Pay in full purchase option`
#purchase-option-info-wrapper - Customer help text'`
Product page examples
Hiding the Downpay product block when only using deposit option
If you wish to sell things only as a deposit, you still have to enable the Downpay product block on your product page however you can simply hide it using CSS.
#downpay-block {
display: none;
}
Changing radio button design
Before
After
.downpay-block {
padding: 1em;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border: 0px solid #ddd;
}
.selling-plan-fieldset {
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: auto;
row-gap: 0.8em;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding: 1.2em;
border: none;
border-style:none !important;
}
.selling-plan-fieldset.downpay-border-no-show {
border: none;
padding: 0;
margin-left: 0;
}
.selling-plan-fieldset.downpay-border-no-show > legend {
display: none;
}
.downpay-customer-info {
margin-top: 1em;
}
.hypehound-legend {
font-weight: 600;
font-size: 1.6rem;
width: fit-content;
padding-left: 0.2em;
padding-right: 0.2em;
margin-bottom: 0;
border: none;
}
.purchase-option {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
}
.purchase-option-input {
min-height: auto;
display: flex;
align-items: center;
cursor: pointer;
}
.purchase-option-input label {
margin: 0 0.6em 0 0;
padding-left:0.3em;
cursor: inherit;
font-size: 1.6rem;
font-weight: 500;
}
.purchase-option-input input {
appearance: none;
width: 22px;
height: 22px;
border: 2px solid #444;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
}
.purchase-option-input input:checked {
border-color: #121212;
background-color: #121212;
}
.purchase-option-input input:checked::after {
content: "";
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
position: absolute;
}
.downpay-payment-methods {
width: 10em;
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 0.2em;
}
.downpay-payment-methods img {
padding-left: 0.2em;
}
.downpay-customer-info-no-show {
display: none;
}
Changing radio buttons to clickable buttons
Before
After
If you don't want to use classic radio buttons on your page, you can turn them into the regular looking buttons.
All you need to do it copy the following piece of code and paste it into the Custom CSS block when customizing your theme.
.purchase-option-input input[type='radio'] {
display: none;
}
.purchase-option-input label {
min-width: 130px;
text-align: center;
display: inline-block;
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
background-color: white;
color: #25252599;
font-weight: bold;
transition: all 0.2s ease-in-out;
}
.purchase-option-input input[type='radio']:checked~label {
background-color: #252525;
color: #efecec;
border: none;
}
.selling-plan-fieldset {
flex-direction: row !important;
border: none !important;
padding-left: 0 !important;
}
You can modify the code further to change the colors or the display of the buttons.
Changing colour of radio buttons
You can change the color of the radio button using the following CSS.
Before
After
.purchase-option-input {
accent-color:red;
}
Wrapping long purchase option text
If you have adjusted the language of your purchase options and it is running off the screen, the white-space css property can be used to adjust this from no-wrap to normal
#purchase-option-label {
white-space: normal;
}
Before
After
Adjust border styling
#hypehound-pre-orders {
border-colour: blue;
border-style: dotted;
border-width: 3px;
border-radius: 10px;
}
Hiding buyer consent paragraph
This will hide the buyer consent paragraph on the product and cart page.
- Navigate to the product page, and select Downpay
- In the Downpay settings, scroll to the bottom and add the following in the Custom CSS box:
#shopify-buyer-consent { display: none }
Cart page Downpay CSS
Custom CSS can be entered into the Downpay cart embed from the Shopify theme editor.
Cart page classes
.downpay-due-today - Due today line .downpay-subtotals For both due today and later lines
We use .totals, .totals-checkout to attempt to set classes to match the theme.
#downpay-due-today-amount - Subtotal amount for due today line.
downpay-remaining-amount - Due later line
#downpay-due-later-amount - Subtotal amount for due later line
Cart page examples
Adjust font size
.downpay-subtotals {
font-weight: 700;
}
Customer order management portal CSS
Customer order management portal CSS can be added to any stylesheet that is available across your store. In some themes this includes files like styles.cssor base.css
Customer order management portal classes
.downpay-customer-page-content - Entire block
.order-summary-container and .order-summary-wrapper - Order summary
.order-section - Order number and back to order status button
.order-button - View order button
.summary-section - Payment summary section
.summary-item - Line items of the payment summary
.update-payment-section - Update payment method section
.cancel-section - Order cancel section if enabled in Downpay settings
Customer order management portal examples
Change all buttons to black background with white text and make them round
.order-button {
background-color: black;
color: white;
border-radius: 20px;
}
.general-button {
background-color: black;
color: white;
border-radius: 20px;
}
Updated on: 29/04/2025
Thank you!