Back to Shopify Liquid
Shopify Liquid
Comparison table
Drop this Shopify Liquid snippet into your theme to add the comparison table block. Copy the code below, paste it into your theme files, save and you're done.
161 lines · 5.2 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>Comparison Table</title>7 <style>8 body.unique-body-Abc123 {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 background-color: #f0f2f5;11 display: flex;12 justify-content: center;13 align-items: center;14 height: 100vh;15 margin: 0;16 padding: 2px 0; /* Üstten ve alttan 2px boşluk */17 }1819 .unique-comparison-table-Def456 {20 width: 100%;21 max-width: 700px;22 border-collapse: separate;23 border-spacing: 0;24 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);25 background-color: #fff;26 border-radius: 10px;27 overflow: hidden;28 margin: 2px 0; /* Üstten ve alttan 2px boşluk */29 }3031 .unique-comparison-table-Def456 th, .unique-comparison-table-Def456 td {32 border: none;33 padding: 15px;34 text-align: center;35 font-size: 14px;36 }3738 .unique-comparison-table-Def456 th {39 background-color: #333; /* Çok koyu olmayan siyah renk */40 color: #fff;41 font-weight: 600;42 text-transform: uppercase;43 }4445 .unique-comparison-table-Def456 th:first-child, .unique-comparison-table-Def456 td:first-child {46 text-align: left;47 padding-left: 20px;48 }4950 .unique-comparison-table-Def456 tbody tr {51 border-bottom: 1px solid #e0e0e0;52 }5354 .unique-comparison-table-Def456 tbody tr:last-child {55 border-bottom: none;56 }5758 .unique-check-Ghi789 {59 color: #28a745; /* Yeşil renk */60 }6162 .unique-cross-Jkl012 {63 color: #dc3545; /* Kırmızı renk */64 }6566 .unique-icon-Mno345 {67 font-size: 18px;68 }6970 .unique-comparison-table-Def456 tbody tr:nth-child(odd) {71 background-color: #f9f9f9;72 }73 </style>74</head>75<body class="unique-body-Abc123">7677<table class="unique-comparison-table-Def456">78 <thead>79 <tr>80 <th>Aspect</th>81 <th>Your brand</th>82 <th>Competitor</th>83 </tr>84 </thead>85 <tbody>86 <tr>87 <td>Price</td>88 <td>XX</td>89 <td>XX</td>90 </tr>91 <tr>92 <td>Features</td>93 <td class="unique-icon-Mno345 unique-check-Ghi789">94 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">95 <path d="M9 19L3 13l1.41-1.41L9 16.17l10.59-10.59L21 5l-12 12z"/>96 </svg>97 </td>98 <td class="unique-icon-Mno345 unique-cross-Jkl012">99 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">100 <path d="M19.41 6.58L18 5.17 12 11.17 6 5.17 4.59 6.58 10.59 12.58 4.59 18.58 6 20l6-6 6 6 1.41-1.41-6-6z"/>101 </svg>102 </td>103 </tr>104 <tr>105 <td>Durability</td>106 <td class="unique-icon-Mno345 unique-check-Ghi789">107 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">108 <path d="M9 19L3 13l1.41-1.41L9 16.17l10.59-10.59L21 5l-12 12z"/>109 </svg>110 </td>111 <td class="unique-icon-Mno345 unique-cross-Jkl012">112 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">113 <path d="M19.41 6.58L18 5.17 12 11.17 6 5.17 4.59 6.58 10.59 12.58 4.59 18.58 6 20l6-6 6 6 1.41-1.41-6-6z"/>114 </svg>115 </td>116 </tr>117 <tr>118 <td>Warranty</td>119 <td class="unique-icon-Mno345 unique-check-Ghi789">120 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">121 <path d="M9 19L3 13l1.41-1.41L9 16.17l10.59-10.59L21 5l-12 12z"/>122 </svg>123 </td>124 <td class="unique-icon-Mno345 unique-cross-Jkl012">125 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">126 <path d="M19.41 6.58L18 5.17 12 11.17 6 5.17 4.59 6.58 10.59 12.58 4.59 18.58 6 20l6-6 6 6 1.41-1.41-6-6z"/>127 </svg>128 </td>129 </tr>130 <tr>131 <td>Customer Service</td>132 <td class="unique-icon-Mno345 unique-check-Ghi789">133 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">134 <path d="M9 19L3 13l1.41-1.41L9 16.17l10.59-10.59L21 5l-12 12z"/>135 </svg>136 </td>137 <td class="unique-icon-Mno345 unique-cross-Jkl012">138 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">139 <path d="M19.41 6.58L18 5.17 12 11.17 6 5.17 4.59 6.58 10.59 12.58 4.59 18.58 6 20l6-6 6 6 1.41-1.41-6-6z"/>140 </svg>141 </td>142 </tr>143 <tr>144 <td>Ease of use</td>145 <td class="unique-icon-Mno345 unique-check-Ghi789">146 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">147 <path d="M9 19L3 13l1.41-1.41L9 16.17l10.59-10.59L21 5l-12 12z"/>148 </svg>149 </td>150 <td class="unique-icon-Mno345 unique-cross-Jkl012">151 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">152 <path d="M19.41 6.58L18 5.17 12 11.17 6 5.17 4.59 6.58 10.59 12.58 4.59 18.58 6 20l6-6 6 6 1.41-1.41-6-6z"/>153 </svg>154 </td>155 </tr>156 </tbody>157</table>158159</body>160</html>
