Back to Shopify Liquid
Shopify Liquid
3 points info v2
Drop this Shopify Liquid snippet into your theme to add the 3 points info v2 block. Copy the code below, paste it into your theme files, save and you're done.
70 lines · 4.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 <link rel="stylesheet" href="styles.css">7 <title>Shipping & Returns</title>8 <style>9 .info-container-v5 {10 display: flex;11 flex-direction: column;12 align-items: flex-start;13 gap: 10px;14font-size:12px;15font-weight: 500;16color: #242424;1718 }19.info-item-v5 {20 transition: transform 0.3s ease;21}2223.info-item-v5:hover {24 transform: translateX(10px);25}2627.info-item-v5 {28 display: flex;29 align-items: center;30 gap: 8px;31 background: #eeeeee;32 padding: 0px 10px;33 border-radius: 8px;34}3536 .info-item{37 font-size: 12px;38 color: #242424;39 }40 </style>41</head>42<body>43 <div class="info-container-v5">44 <div class="info-item-v5">45 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">46<g>47 <path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472 c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457 C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474 l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917 H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47 c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051 c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745 c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>48</g>49</svg>50 <span class = "info-item">Point/benefit one goes here</span>51 </div>52 <div class="info-item-v5">53<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">54<g>55 <path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472 c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457 C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474 l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917 H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47 c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051 c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745 c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>56</g>57</svg>58 <span class = "info-item">Point/benefit two goes here</span>59 </div>60 <div class="info-item-v5">61<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" version="1.1" id="Capa_1" viewBox="0 0 498.138 498.138" xml:space="preserve">62<g>63 <path style="fill:#242424;" d="M493.65,109.76c-9.859-18.405-32.775-25.333-51.179-15.472 c-22.059,11.816-42.897,23.982-62.82,36.717l0.003-51.276c0-11.313-9.146-20.494-20.493-20.494H20.457 C9.164,59.235,0,68.417,0,79.729v338.7c0,11.291,9.163,20.474,20.457,20.474h338.686c11.348,0,20.496-9.183,20.496-20.474 l0.009-195.875c30.092-22.165,62.312-42.213,98.529-61.615C496.582,151.079,503.509,128.166,493.65,109.76z M338.702,397.917 H40.968V100.219h297.734v58.715c-40.715,29.649-78.022,62.759-114.834,101.677c-4.275-5.648-8.601-11.423-13.129-17.47 c-9.354-12.491-19.958-26.648-32.375-42.632c-12.81-16.487-36.561-19.468-53.05-6.659c-16.488,12.811-19.47,36.562-6.659,53.051 c12.007,15.455,21.949,28.728,31.563,41.565c13.841,18.482,26.915,35.938,42.45,54.771c7.075,8.576,17.566,13.604,28.682,13.745 c0.162,0.002,0.321,0.002,0.482,0.002c10.94,0,21.356-4.741,28.541-13.012c29.482-33.939,58.199-62.952,88.329-88.826V397.917z"/>64</g>65</svg>66 <span class = "info-item">Point/benefit three goes here</span>67 </div>68 </div>69</body>70</html>
