Back to Shopify Liquid
Shopify Liquid
Tabs with images
Drop this Shopify Liquid snippet into your theme to add the tabs with images block. Copy the code below, paste it into your theme files, save and you're done.
268 lines · 7.6 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">34<head>5 <meta charset="UTF-8" />6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />7 <title>Product Info Tabs</title>8 <style>9 .tabs-container {10 max-width: 1000px;11 margin: 0 auto;12 overflow: hidden;13 }1415 .tabs-header {16 display: flex;17 max-width: 1200px;18 justify-content: center;19 center: ;20 align-items: center;21 margin: auto;22 border-bottom: 1px solid #B3B3B3;23 padding: 0px 70px;24 }2526 @media screen and (max-width: 768px) {27 .tabs-header {28 display: flex;29 max-width: 700px;30 justify-content: center;31 center: ;32 align-items: center;33 margin: auto;34 border-bottom: 1px solid #B3B3B3;35 padding: 0px 0px;36 }37 }3839 @media screen and (max-width: 768px) {40 .tab {41 font-size: 12px!IMPORTANT;42 }43 }4445 .tab {46 flex: 1;47 padding: 8px 8px;48 text-align: center;49 font-weight: bold;50 cursor: pointer;51 background: #fff;52 color: #1a1817;53 max-width: 100%;54 box-sizing: border-box;55 align-items: center;56 display: flex;57 justify-content: center;58 font-size: 13px;59 transition: background-color 0.8s ease;60 }6162 .tab.active {63 border-bottom: 4px solid #0C3D3D;64 color: #1a1817;65 }6667 .tab-content {68 padding: 5px 0px;69 display: none;70 font-size: 13px;71 transition: opacity 0.5s ease;72 color: #1a1817;73 }7475 .tab-content.active {76 display: block;77 background: #fff;78 opacity: 1;79 }80 .flex-container {81 display: flex;82 flex-wrap: wrap;83 justify-content: center;84 }8586 .item-box {87 margin: 0px 0px;88 text-align: center;8990 }9192 .item-box img {93 width: 33%;94border-radius: 0px;95 }9697 .item-title {98 margin: 5px 0;99font-weight: 600;100 }101102 .item-description {103 margin: 5px 0;104 }105106107 @media (min-width: 768px) {108 .item-box {109 flex: 0 0 30%;110 display: flex;111 flex-direction: column;112 align-items: center;113 }114 .item-box img {115 width: 30%;116margin-bottom: 15px;117min-width: 150px;118 }119 .flex-container{120 display: flex;121 flex-wrap: wrap;122 max-width: 1200px;123 align-content: center;124 margin-top: 20px;125 }126}127128129 @media (max-width: 767px) {130 .flex-container {131 flex-direction: column;132 }133 .item-box img {134 width: 32%!important;135 }136137 .item-box {138 display: flex;139 flex-direction: row;140 align-items: center;141 justify-content: center;142 flex-wrap: wrap;143 }144145 .item-box:nth-child(odd) {146 flex-direction: row-reverse;147 }148149 .item-box img, .item-box .text-content {150 width: 60%;151 }152 }153 .image1 {154 flex: 1;155 display: flex;156 justify-content: center;157 align-items: center;158 }159 .image1 img {160 min-width: 100%;161 height: auto;162 border-radius: 5px;163 }164 .text1 {165 flex: 1;166 align-items: flex-start;167 line-height: 24px;168 margin-top: 0px;169 text-align:center;170 }171 .text1 p {172 font-size: 16px!important;173 color: #2e2f3c;174 }175.containerv9 {176 display: grid;177 grid-template-columns: 1fr 1fr;178 align-items: center;179 padding-top: 5px;180 padding-bottom: 20px;181 gap:20px;182}183@media (max-width: 768px) {184 .containerv9 {185 grid-template-columns: 1fr;186 grid-template-rows: auto auto;187 }188}189 </style>190</head>191192<body>193 <div class=" page-width">194 <div class="tabs-container">195 <div class="tabs-header">196 <div class="tab active" onclick="showTabContent('material')">197 3 STEPS198 </div>199 <div class="tab" onclick="showTabContent('description')">DESCRIPTION</div>200 <div class="tab" onclick="showTabContent('shipping')">SHIPPING</div>201 <div class="tab" onclick="showTabContent('returns')">RETURNS</div>202 </div>203204205 <div id="material" class="tab-content active">206 <div class="flex-container">207 <div class="item-box">208 <img src="https://cdn.shopify.com/s/files/1/0914/3228/8605/files/34.png?v=1737759137" alt="Image 1">209 <div class="text-content">210 <h4 class="item-title">Scoop</h4>211 <p class="item-description">Description 1 goes here</p>212 </div>213 </div>214 <div class="item-box">215 <img src="https://cdn.shopify.com/s/files/1/0914/3228/8605/files/35.png?v=1737759137" alt="Image 2">216 <div class="text-content">217 <h4 class="item-title">Shake!</h4>218 <p class="item-description">Description 2 goes here</p>219 </div> </div>220 <div class="item-box">221 <img src="https://cdn.shopify.com/s/files/1/0914/3228/8605/files/36.png?v=1737759138" alt="Image 3">222 <div class="text-content">223 <h4 class="item-title">Enjoy</h4>224 <p class="item-description">Description 3 goes here</p>225 </div>226 </div>227 </div>228 </div>229230231 <div id="description" class="tab-content">232<div class = "containerv9"233 <div class="image1">234 <img src="https://cdn.shopify.com/s/files/1/0914/3228/8605/files/51b0c232-93f7-4be9-9597-4233496b9b41.__CR0_0_2196_900_PT0_SX1464_V1.jpg?v=1737759255" width = "100%">235236 <p class="text1">A science-driven supplement supporting physical health and mental performance.237Since 2010, AG1 combines the power of multiple supplements like vitamins, antioxidants and gut-friendly bacteria into just one scoop, making it your simplest daily health habit!</p>238239 </div>240241 </div>242 <div id="shipping" class="tab-content">243 <p>244 shipping details and link goes here245 </p>246 </div>247 <div id="returns" class="tab-content">248 <p>249 If you’re not 100% satisfied, contact us within 30 days of your first order to initiate the process of receiving a refund on your original order.250 </p><br>251<strong>Email |</strong> support.uk@drinkag1.com252 </div>253 </div>254 </div>255256 <script>257 function showTabContent(tabId) {258 const tabs = document.querySelectorAll('.tab');259 const tabContents = document.querySelectorAll('.tab-content');260 tabs.forEach(tab => tab.classList.remove('active'));261 tabContents.forEach(content => content.classList.remove('active'));262 document.querySelector(`[onclick="showTabContent('${tabId}')"]`).classList.add('active');263 document.getElementById(tabId).classList.add('active');264 }265 </script>266</body>267268</html>
