Articles on: Advanced Setup

Customizing Downpay Theme Extensions with CSS

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

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

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

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: 13/11/2024

Was this article helpful?

Thank you!