Finance options drop down banner

Technical Q&A
1

We have multiple finance option on our product pages and its starting to look cluttered.

is there a way we could a banner saying - Credit plans available. Find out more

Then when selected it expands and shows all the credit options?

Screenshot 2025-11-10 105107
Screenshot 2025-11-10 1051071876×905 212 KB

2

  1. In Shopify Admin, go to
    Online Store > Themes > Customize.

  2. Open a Product Page template.

  3. Click Add Block > look for Collapsible Row (or Accordion depending on your theme).

  4. Set the heading to:

    “Credit plans available”

  5. In the description/content area, add your financing options, For example:
    Snap Finance available
    Pay in 4 interest-free installments etc.

  6. Save changes

3

I’m using the Warehouse theme and cannot find this option

4

Oh Got it, The Warehouse theme doesn’t have a built-in “collapsible content” block on product pages like some other themes do
Go to Shopify Admin > Online Store > Themes > Warehouse > Edit Code.
In the sidebar, open your product template file:

  • sections/main-product.liquid (Warehouse 4.0+)

  • Or snippets/product-template.liquid
    Insert the below code for Dynamic Credit Banner Code

<div class="credit-banner">
  <button class="credit-toggle" onclick="this.nextElementSibling.classList.toggle('show')">
     Credit plans available. Find out more
  </button>

  <div class="credit-details">
    {% if form %}
      {{ form | payment_terms }}
    {% else %}
      <p>Flexible payment options available at checkout, including Shop Pay, Afterpay, or Klarna (where available).</p>
    {% endif %}
  </div>
</div>

<style>
.credit-banner {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 20px;
  background: #fafafa;
}
.credit-toggle {
  background: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: #111;
  font-size: 16px;
}
.credit-details {
  display: none;
  margin-top: 10px;
  font-size: 15px;
  color: #333;
}
.credit-details.show {
  display: block;
}
</style>