Back to Shopify Liquid
Shopify Liquid
How to use section
Drop this Shopify Liquid snippet into your theme to add the how to use section block. Copy the code below, paste it into your theme files, save and you're done.
258 lines · 12.1 KB
Shopify Liquid
1<div id="shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn" class="shopify-section">234<style>5 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_holder {6 padding-top: 50px;7 padding-bottom: 50px;8 }9 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_holder_wrapper {10 padding: 0 80px;11 max-width: 1360px;12 margin: auto;13 }14 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_title {15 align-self: stretch;16 color: #000001;17 font-family: 'TAN - MEMORIES';18 font-size: 44px;19 font-weight: 400;20 letter-spacing: -.02em;21 line-height: 1;22 max-width: 100%;23 margin-left: 16px;24 margin-bottom: 48px;25 text-align: left;26 }27 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_items {28 display: grid;29 grid-template-columns: 1fr 1fr 1fr 1fr;30 grid-gap: 32px;31 }32 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_item {33 min-width: 1px;34 width: 100%;35 display: none;36 }37 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image {38 padding-top: 500px;39 position: relative;40 margin-bottom: 24px;41 }42 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_text {43 align-self: stretch;44 color: #000;45 display: flex;46 flex-direction: column;47 font-family: Apercu;48 font-size: 22px;49 font-weight: 400;50 justify-content: flex-start;51 letter-spacing: -.01em;52 line-height: 1.5;53 max-width: 100%;54 position: relative;55 }56 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image img {57 position: absolute;58 top: 0;59 width: 100%;60 height: 100%;61 object-fit: cover;62 }63 @media screen and (max-width: 1024px) {64 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_items {65 grid-template-columns: 1fr 1fr;66 grid-gap: 20px;67 }68 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_holder_wrapper {69 padding: 0 24px;70 }71 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_title {72 margin-left: 0;73 margin-bottom: 30px;74 }75 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image {76 padding-top: 111.8%;77 max-height: 400px;78 }79 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_text {80 font-size: 18px;81 }82 }83</style>8485<div pdp_howtouse="" id="pdp_how_to_use_MRQn" class="section_holder">86 <div class="section_holder_wrapper">87 <div class="section_title">How to use -</div>88 <div class="section_items">8990 <div class="section_item" data-flavor="Coffee" style="display: block;">91 <div class="item_image">92 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_COFFEE_1x1_c4735316-d620-41d2-9038-b100a3faa3fa_1000x.jpg?v=1729943669" alt="Image">93 </div>9495 <div class="item_text">1) scoop 8g of Rainbow Dust</div>96 </div>9798 <div class="section_item" data-flavor="Coffee" style="display: block;">99 <div class="item_image">100 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-41-27_B_R8_S4_H_1x1_93c184ee-1e1b-486b-8707-9ec7ad2005b9_1000x.jpg?v=1729943681" alt="Image">101 </div>102103 <div class="item_text">2) mix with water or milk - hot or cold</div>104 </div>105106 <div class="section_item" data-flavor="Coffee" style="display: block;">107 <div class="item_image">108 <img src="//spacegoods.com/cdn/shop/files/SCC00652_1x1_4df7434b-7dec-4d08-b6f2-6a3a81dc7957_1000x.jpg?v=1728026166" alt="Image">109 </div>110111 <div class="item_text">3) use your frother to blend to perfection</div>112 </div>113114 <div class="section_item" data-flavor="Coffee" style="display: block;">115 <div class="item_image">116 <img src="//spacegoods.com/cdn/shop/files/SCC00911_1x1_1e333543-e0ff-4060-9e21-ee6cecd1bb47_1000x.jpg?v=1728025913" alt="Image">117 </div>118119 <div class="item_text">4) drink & enjoy focus - energy - calm</div>120 </div>121122 <div class="section_item" data-flavor="Chocolate" style="display: none;">123 <div class="item_image">124 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_CHOC_1x1_d6c6c5d8-e0b7-4203-bb59-a2063ca9b251_1000x.jpg?v=1728025685" alt="Image">125 </div>126127 <div class="item_text">1) scoop 8g of Rainbow Dust</div>128 </div>129130 <div class="section_item" data-flavor="Chocolate" style="display: none;">131 <div class="item_image">132 <img src="//spacegoods.com/cdn/shop/files/mix_2_1000x.webp?v=1720520021" alt="Image">133 </div>134135 <div class="item_text">2) mix with water or milk - hot or cold</div>136 </div>137138 <div class="section_item" data-flavor="Chocolate" style="display: none;">139 <div class="item_image">140 <img src="//spacegoods.com/cdn/shop/files/frother_3_1000x.webp?v=1720520021" alt="Image">141 </div>142143 <div class="item_text">3) use your frother to blend to perfection</div>144 </div>145146 <div class="section_item" data-flavor="Chocolate" style="display: none;">147 <div class="item_image">148 <img src="//spacegoods.com/cdn/shop/files/SCC00936_1x1_77b9b3d3-2afe-4964-b522-e4aa8d233d06_1000x.jpg?v=1728025943" alt="Image">149 </div>150151 <div class="item_text">4) drink & enjoy focus - energy - calm</div>152 </div>153154 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">155 <div class="item_image">156 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_CIN_1x1_1b50a2f7-28e4-4630-b92d-500a1794a20c_1000x.jpg?v=1728025746" alt="Image">157 </div>158159 <div class="item_text">1) scoop 8g of Rainbow Dust</div>160 </div>161162 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">163 <div class="item_image">164 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-41-00_B_R8_S4_H_1x1_f551f486-0062-46ef-8cf0-96e498376a8a_1000x.jpg?v=1728026249" alt="Image">165 </div>166167 <div class="item_text">2) mix with water or milk - hot or cold</div>168 </div>169170 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">171 <div class="item_image">172 <img src="//spacegoods.com/cdn/shop/files/SCC00615_1x1_552b872c-8020-4cd7-81d3-17c3f7d04b5d_1000x.jpg?v=1728026331" alt="Image">173 </div>174175 <div class="item_text">3) use your frother to blend to perfection</div>176 </div>177178 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">179 <div class="item_image">180 <img src="//spacegoods.com/cdn/shop/files/SCC00855_1x1_b9963ffd-9dc1-40d5-85c7-9680e7546a67_1000x.jpg?v=1728025978" alt="Image">181 </div>182183 <div class="item_text">4) drink & enjoy focus - energy - calm</div>184 </div>185186 <div class="section_item" data-flavor="Strawberry" style="display: none;">187 <div class="item_image">188 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-34-29_B_R8_S4_STRAW_1x1_afa5b9c3-5e2c-4d49-9128-d835dd668561_1000x.jpg?v=1728025786" alt="Image">189 </div>190191 <div class="item_text">1) scoop 8g of Rainbow Dust</div>192 </div>193194 <div class="section_item" data-flavor="Strawberry" style="display: none;">195 <div class="item_image">196 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-40-27_B_R8_S4_H_1x1_fd662ce0-7b5d-4bc4-ab80-a1b5b0223f61_1000x.jpg?v=1728026391" alt="Image">197 </div>198199 <div class="item_text">2) mix with water or milk - cold like a milkshake!</div>200 </div>201202 <div class="section_item" data-flavor="Strawberry" style="display: none;">203 <div class="item_image">204 <img src="//spacegoods.com/cdn/shop/files/SCC00590_1x1_693f2342-210b-469b-adb5-8a83ce860c61_1000x.jpg?v=1728026452" alt="Image">205 </div>206207 <div class="item_text">3) use your frother to blend to perfection</div>208 </div>209210 <div class="section_item" data-flavor="Strawberry" style="display: none;">211 <div class="item_image">212 <img src="//spacegoods.com/cdn/shop/files/SCC00881_1x1_95d55eac-482a-4826-b77b-bdfe6a33a377_1000x.jpg?v=1728026013" alt="Image">213 </div>214215 <div class="item_text">4) drink & enjoy focus - energy - calm</div>216 </div>217218 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">219 <div class="item_image">220 <img src="//spacegoods.com/cdn/shop/files/2024-09-29_23-33-40_B_R8_S4_CHOC_1x1_d6c6c5d8-e0b7-4203-bb59-a2063ca9b251_1000x.jpg?v=1728025685" alt="Image">221 </div>222223 <div class="item_text">1) scoop 8g of Rainbow Dust</div>224 </div>225226 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">227 <div class="item_image">228 <img src="//spacegoods.com/cdn/shop/files/mix_2_2e82c99b-f91c-437a-a68e-12ddc274715d_1000x.webp?v=1723624267" alt="Image">229 </div>230231 <div class="item_text">2) mix with water or milk - hot or cold</div>232 </div>233234 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">235 <div class="item_image">236 <img src="//spacegoods.com/cdn/shop/files/frother_3_3e370a78-3b68-4974-a163-d46c4e89d657_1000x.webp?v=1723624287" alt="Image">237 </div>238239 <div class="item_text">3) use your frother to blend to perfection</div>240 </div>241242 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">243 <div class="item_image">244 <img src="//spacegoods.com/cdn/shop/files/SCC00936_1x1_77b9b3d3-2afe-4964-b522-e4aa8d233d06_1000x.jpg?v=1728025943" alt="Image">245 </div>246247 <div class="item_text">4) drink & enjoy focus - energy - calm</div>248 </div>249250 </div>251 </div>252</div>253<script>254255</script>256257258</div>
