Back to Shopify Liquid
Shopify Liquid
Klarna
Drop this Shopify Liquid snippet into your theme to add the klarna block. Copy the code below, paste it into your theme files, save and you're done.
84 lines · 2.4 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Pay in 4 Parts</title>7 <style>8 .unique-body {9 font-family: Arial, sans-serif;10 display: flex;11 justify-content: center;12 align-items: center;13 height: 100vh;14 margin: 0;15 background-color: #ffffff;16 }17 .unique-payment-container {18 display: flex;19 align-items: center;20 }21 .unique-text {22 font-size: 18px;23 margin-right: 10px;24 color: #999;25 }26 .unique-logo-container {27 display: flex;28 align-items: center;29 }30 .unique-logo {31 display: flex;32 align-items: center;33 justify-content: center;34 position: relative;35 cursor: pointer;36 }37 .unique-logo img {38 height: 40px;39 }40 .unique-tooltip {41 visibility: hidden;42 width: 140px;43 background-color: #333;44 color: #fff;45 text-align: center;46 border-radius: 6px;47 padding: 8px 0;48 position: absolute;49 z-index: 1;50 bottom: 150%; /* Bilgi çubuğunu logonun üzerine yerleştirin */51 left: 50%;52 margin-left: -70px;53 opacity: 0;54 transition: opacity 0.3s;55 }56 .unique-tooltip::after {57 content: "";58 position: absolute;59 top: 100%; /* Bilgi çubuğunun altındaki ok */60 left: 50%;61 margin-left: -5px;62 border-width: 5px;63 border-style: solid;64 border-color: #333 transparent transparent transparent;65 }66 .unique-logo:hover .unique-tooltip {67 visibility: visible;68 opacity: 1;69 }70 </style>71</head>72<body class="unique-body">73 <div class="unique-payment-container">74 <div class="unique-text">Pay in 4 parts with</div>75 <div class="unique-logo-container">76 <div class="unique-logo" onclick="window.location.href='https://www.klarna.com'">77 <img src="https://www.svgrepo.com/show/508697/klarna.svg" alt="Klarna">78 <div class="unique-tooltip">Klarna Payment</div>79 </div>80 </div>81 </div>82</body>83</html>
