More Payment Options to change into a button

Online Store and Theme Development
, ,
1

Hi Teams!

For a client I’m looking for a way to make this look more attractive (see below)

image
image478×157 3.87 KB

The ‘more payment options’, he’d like that to change into button that has a similar size as the add to cart and pay with paypal button.

I see that there is quite some liquid coding behind it.

  1. is it possible to adjust this
  2. How can I do this :slight_smile:

Thanks guys!

1 Like
2

HELLO MATE I CREATE FOR U SPECIAL CODE THAT ALLOW U TO CREATE " BUY NOW " GLOWING ON RED BUTTOM ;D WITH PULSE :

CODE :

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Przycisk BUY NOW </title>
  <style>
    /* Oryginalny przycisk – zawiera tylko strukturę, ale nie wyświetla tekstu */
    .shopify-payment-button__more-options {
      font-size: 16px;
      background-color: #d80000;
      border: 2px solid white;
      border-radius: 50px;
      padding: 10px 30px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      cursor: pointer;
      text-decoration: none;
      position: relative;
      z-index: 1;
      /* Usuwamy tekst z wnętrza przycisku */
      color: transparent;
    }

    /* Pseudo-element wyświetla napis "KUP TERAZ" i efekt animacji */
    .shopify-payment-button__more-options::before {
      content: 'BUY NOW';
      font-size: 16px;
      color: white;
      background-color: #d80000;
      border: 2px solid #b30000;
      border-radius: 50px;
      padding: 10px 30px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      pointer-events: none;  /* Dzięki temu kliknięcia przechodzą do oryginalnego elementu */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      animation: pulse 1.5s infinite ease-in-out, glow 1.5s infinite alternate;
    }

    /* Animacja pulsowania */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    /* Animacja błyszczenia */
    @keyframes glow {
      0% { box-shadow: 0 0 5px #ff4c4c, 0 0 10px #ff4c4c, 0 0 15px #ff4c4c; }
      50% { box-shadow: 0 0 20px #ff4c4c, 0 0 30px #ff4c4c, 0 0 50px #ff4c4c; }
      100% { box-shadow: 0 0 5px #ff4c4c, 0 0 10px #ff4c4c, 0 0 15px #ff4c4c; }
    }

    .shopify-payment-button__more-options:hover {
      background-color: #a30000;
    }
  </style>
</head>
<body>
  <!-- Tylko jeden przycisk – oryginalny element nie zawiera widocznego tekstu -->
  <a href="#" class="shopify-payment-button__more-options"></a>
</body>
</html>

MARK !!! PASTE IT ON BOTTOM OF THE : theme.liquid
u can find it when u open your themes and click : edit code !

This code works by overriding the button you wanted to change with the “More payment options” button, and creates a super enigmatic button with the text “BUY NOW,” making it perfect for an online store.

1 Like
3

Just to clarify: the shared code, above, is more than just the style you might be looking for. If it works (havnt tested), you should only copy the <style></style> contents. And probably put it into a CSS file - or the relevant liquid file - instead of just blindly in theme.liquid.

To answer your question more generally; yes you can update the “More payment options” text to look like a button, using CSS.

Generally though, I think it’s best practice to have it look tertiary to not “compete” with the actual CTA buttons.

2 Likes
4

Cheers mate. It does work but I’ll get it adjusted nevertheless. It was a ‘difficult question’ ofcourse. But thank you for your reply!

1 Like