> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.downpay.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing Downpay Theme Extensions with CSS

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

###### On this page:

[Product Page Downpay CSS](#1-product-page-downpay-css)
* [Product page classes](#2-product-page-classes)
* [Product page examples](#2-product-page-examples)

[Cart Page Downpay CSS](#1-cart-page-downpay-css)
* [Cart page classes](#2-product-page-classes)
* [Cart page examples](#2-cart-page-examples)

[Customer order management portal CSS](#1-customer-order-management-portal-css)
* [Customer order management portal classes](#2-customer-order-management-portal-classes)
* [Customer order management portal examples](#2-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.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-25-at-11502_1gxzkru.png)

## Product Page Classes

`#downpay-product-wrapper` - Entire block

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-85911_1mrl45o.png)

`#hypehound-pre-orders` - Includes border surrounding purchase options
![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-90019_ekhnbn.png)

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-90059_lkmz6p.png)

`#hypehound-legend` - Includes header name style **Purchase Options** 

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-90747_15i6uni.png)

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91014_wsq0rf.png)

`#purchase-option-deposit-wrapper` - Deposit purchase option`

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-90917_208p22.png)

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91031_z9f7di.png)

`#purchase-option-full-wrapper` - Pay in full purchase option`

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-90935_fe3w5.png)

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91031_z9f7di.png)

`#purchase-option-info-wrapper` - Customer help text'`

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91106_1e0lmgp.png)

## 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*
![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_johcsw.png)

*After*
![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-03-14-at-92407_11k385e.png)

```css
.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*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_johcsw.png)

*After*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2025-03-14at94820-am_n3g64c.png)

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*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-29-at-50717_f7zl75.png)

*After*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/image_1ljutir.png)

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-29-at-50853_108gk9f.png)

```
.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*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2024-05-07at92634-am_1hnrrm.png =894x450)

*After*

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2024-05-07at92803-am_1q7id2e.png =862x500)

### Adjust border styling

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-25-at-10193_152ifl0.png)

```
#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. 

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2024-11-06at93806-am_1j0e9sk.png =436x500)

1. Navigate to the product page, and select Downpay
2. In the Downpay settings, scroll to the bottom and add the following in the Custom CSS box:

```
#shopify-buyer-consent { display: none }
```

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-11-13-at-08384_1m545ab.png =455x350)

# Cart page Downpay CSS

Custom CSS can be entered into the Downpay cart embed from the Shopify theme editor.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-25-at-11502_1gxzkru.png)

## 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.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91349_10xgq4n.png)

`#downpay-due-today-amount` - Subtotal amount for due today line.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91512_1cps3gk.png)

`downpay-remaining-amount` - Due later line

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91750_1snmn6j.png)

`#downpay-due-later-amount` - Subtotal amount for due later line

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-91855_11iuhxi.png)

## Cart page examples

### Adjust font size

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-25-at-11550_1j8jh7t.png)

```
.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

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-92128_pi4kv4.png)

`.order-summary-container` and `.order-summary-wrapper` - Order summary
![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-92312_9i1zi3.png)

`.order-section` - Order number and back to order status button

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-92356_r52xs0.png)

`.order-button` - View order button

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-93721_11r0r53.png)

`.summary-section` - Payment summary section

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-92444_ou6xp3.png)

`.summary-item` - Line items of the payment summary

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-93634_1pess0i.png)

`.update-payment-section` - Update payment method section

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-92508_n9k38a.png)

`.cancel-section` - Order cancel section if enabled in Downpay settings

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2024-04-24-at-93241_vp2vu6.png)

## 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;
}
```