Downpay can be customized with CSS to integrate better with your theme.

On this page:

Product Page Downpay CSS
Product page classes
Product page examples

Cart Page Downpay CSS
Cart page classes
Cart page examples

Customer order management portal CSS
Customer order management portal classes
Customer order management portal examples

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

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.css`or 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: 14/03/2025