Shopify Liquid

Risk Free 2

Drop this Shopify Liquid snippet into your theme to add the risk free 2 block. Copy the code below, paste it into your theme files, save and you're done.

91 lines · 2.5 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>Responsive Full-Width Design</title>
7  <style>
8    body.uniqueBodyIdentifier_ab89x73lmn {
9      font-family: Arial, sans-serif;
10      margin: 0;
11      padding: 0;
12      display: flex;
13      justify-content: center;
14      align-items: center;
15      height: 100vh;
16      background-color: transparent;
17    }
18
19    .contentWrapper_xz98mn45qwe {
20      width: 100%; /* Genişlik %100 olarak kalır */
21      text-align: center;
22    }
23
24    .textAboveButton_12lm45xzq {
25      font-size: 18px; /* Üst metin boyutu */
26      margin-bottom: 10px;
27      color: #4a4a4a; /* Normal metin rengi */
28    }
29
30    .textAboveButton_12lm45xzq span.highlight_89mnx12opq {
31      color: #000; /* Satış sayısı siyah ve bold */
32      font-weight: bold;
33    }
34
35    .buttonStyle_xz23mn89qwe {
36      display: inline-block;
37      width: 100%; /* Buton genişliği %100 */
38      font-size: 16px;
39      font-weight: bold;
40      color: #fff; /* Buton yazı rengi */
41      background: linear-gradient(to right, #34d2a0, #30a560); /* Gradyan renkler */
42      padding: 15px; /* Mobilde tıklama kolaylığı için padding artırıldı */
43      border-radius: 4px;
44      cursor: pointer;
45      text-decoration: none;
46      transition: background 0.3s ease;
47      border: none;
48      box-sizing: border-box;
49    }
50
51    .buttonStyle_xz23mn89qwe:hover {
52      background: linear-gradient(to right, #30a560, #34d2a0); /* Hover için gradyan ters çevrildi */
53    }
54
55    /* Mobil uyum için medya sorgusu */
56    
57@media
58 (max-width: 768px) {
59      .textAboveButton_12lm45xzq {
60        font-size: 16px; /* Üst metin mobilde küçültüldü */
61      }
62
63      .buttonStyle_xz23mn89qwe {
64        font-size: 14px; /* Buton yazısı boyutu küçültüldü */
65        padding: 12px; /* Daha dar ekranlarda padding azaltıldı */
66      }
67    }
68
69    
70@media
71 (max-width: 480px) {
72      .textAboveButton_12lm45xzq {
73        font-size: 14px; /* Daha küçük ekranlar için yazı boyutu */
74      }
75
76      .buttonStyle_xz23mn89qwe {
77        font-size: 13px; /* Buton yazı boyutu daha da küçültüldü */
78        padding: 10px; /* Tıklama alanı optimize edildi */
79      }
80    }
81  </style>
82</head>
83<body class="uniqueBodyIdentifier_ab89x73lmn">
84  <div class="contentWrapper_xz98mn45qwe">
85    <div class="textAboveButton_12lm45xzq">
86      <span class="highlight_89mnx12opq">7k+</span> bought in past month
87    </div>
88    <a href="#" class="buttonStyle_xz23mn89qwe">RISK FREE! Get a refund and keep the item.</a>
89  </div>
90</body>
91</html>

Related snippets

/ shopify liquid

Risk Free 2

Related snippets

Infinite Announcement Bar

Scrolling Reviews

Special code (spacing)

Special Sale Orange