Back to Shopify Liquid
Shopify Liquid
How to use v3
Drop this Shopify Liquid snippet into your theme to add the how to use v3 block. Copy the code below, paste it into your theme files, save and you're done.
251 lines · 11.8 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_wrapper {6 padding: 0 80px;7 max-width: 1360px;8 margin: auto;9 }10 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_title {11 align-self: stretch;12 color: #000001;13 font-size: 30px;14 font-weight: 400;15 line-height: 1;16 max-width: 100%;17 margin-left: 16px;18 margin-bottom: 48px;19 text-align: left;20 }21 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_items {22 display: grid;23 grid-template-columns: 1fr 1fr 1fr 1fr;24 grid-gap: 32px;25 }26 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_item {27 min-width: 1px;28 width: 100%;29 display: none;30 }31 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image {32 padding-top: 500px;33 position: relative;34 margin-bottom: 24px;35 }36 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_text {37 align-self: stretch;38 color: #000;39 display: flex;40 flex-direction: column;41 font-size: 16px;42 font-weight: 400;43 justify-content: flex-start;44 line-height: 1.5;45 max-width: 100%;46 position: relative;47 }48 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image img {49 position: absolute;50 top: 0;51 width: 100%;52 height: 100%;53 object-fit: cover;54border-radius: 8px;55 }56 @media screen and (max-width: 1024px) {57 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_items {58 grid-template-columns: 1fr 1fr;59 grid-gap: 20px;60 }61 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_holder_wrapper {62 padding: 0 24px;63 }64 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .section_title {65 margin-left: 0;66 margin-bottom: 30px;67 }68 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_image {69 padding-top: 111.8%;70 max-height: 400px;71 }72 #shopify-section-template--17389125894327__pdp_how_to_use_QnMRQn .item_text {73 font-size: 15px;74 }75 }76</style>7778<div pdp_howtouse="" id="pdp_how_to_use_MRQn" class="section_holder">79 <div class="section_holder_wrapper">80<h2 style= "font-weight: 600; text-align: center; color: #2d2d2d"> How to use! </h2>81 <div class="section_items">8283 <div class="section_item" data-flavor="Coffee" style="display: block;">84 <div class="item_image">85 <img src=https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy2.webp?v=1736739401" alt="Image">86 </div>8788 <div class="item_text">1) how to use point example 1</div>89 </div>9091 <div class="section_item" data-flavor="Coffee" style="display: block;">92 <div class="item_image">93 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy3.webp?v=1736739403" alt="Image">94 </div>9596 <div class="item_text">2) how to use point example 2</div>97 </div>9899 <div class="section_item" data-flavor="Coffee" style="display: block;">100 <div class="item_image">101 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy7.webp?v=1736739413" alt="Image">102 </div>103104 <div class="item_text">3) how to use point example 3</div>105 </div>106107 <div class="section_item" data-flavor="Coffee" style="display: block;">108 <div class="item_image">109 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/Energy5.webp?v=1736739406" alt="Image">110 </div>111112 <div class="item_text">4) how to use point example 4</div>113 </div>114115 <div class="section_item" data-flavor="Chocolate" style="display: none;">116 <div class="item_image">117 <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">118 </div>119120 <div class="item_text">1) scoop 8g of Rainbow Dust</div>121 </div>122123 <div class="section_item" data-flavor="Chocolate" style="display: none;">124 <div class="item_image">125 <img src="//spacegoods.com/cdn/shop/files/mix_2_1000x.webp?v=1720520021" alt="Image">126 </div>127128 <div class="item_text">2) mix with water or milk - hot or cold</div>129 </div>130131 <div class="section_item" data-flavor="Chocolate" style="display: none;">132 <div class="item_image">133 <img src="//spacegoods.com/cdn/shop/files/frother_3_1000x.webp?v=1720520021" alt="Image">134 </div>135136 <div class="item_text">3) use your frother to blend to perfection</div>137 </div>138139 <div class="section_item" data-flavor="Chocolate" style="display: none;">140 <div class="item_image">141 <img src="//spacegoods.com/cdn/shop/files/SCC00936_1x1_77b9b3d3-2afe-4964-b522-e4aa8d233d06_1000x.jpg?v=1728025943" alt="Image">142 </div>143144 <div class="item_text">4) drink & enjoy focus - energy - calm</div>145 </div>146147 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">148 <div class="item_image">149 <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">150 </div>151152 <div class="item_text">1) scoop 8g of Rainbow Dust</div>153 </div>154155 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">156 <div class="item_image">157 <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">158 </div>159160 <div class="item_text">2) mix with water or milk - hot or cold</div>161 </div>162163 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">164 <div class="item_image">165 <img src="//spacegoods.com/cdn/shop/files/SCC00615_1x1_552b872c-8020-4cd7-81d3-17c3f7d04b5d_1000x.jpg?v=1728026331" alt="Image">166 </div>167168 <div class="item_text">3) use your frother to blend to perfection</div>169 </div>170171 <div class="section_item" data-flavor="Vanilla Cinnamon" style="display: none;">172 <div class="item_image">173 <img src="//spacegoods.com/cdn/shop/files/SCC00855_1x1_b9963ffd-9dc1-40d5-85c7-9680e7546a67_1000x.jpg?v=1728025978" alt="Image">174 </div>175176 <div class="item_text">4) drink & enjoy focus - energy - calm</div>177 </div>178179 <div class="section_item" data-flavor="Strawberry" style="display: none;">180 <div class="item_image">181 <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">182 </div>183184 <div class="item_text">1) scoop 8g of Rainbow Dust</div>185 </div>186187 <div class="section_item" data-flavor="Strawberry" style="display: none;">188 <div class="item_image">189 <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">190 </div>191192 <div class="item_text">2) mix with water or milk - cold like a milkshake!</div>193 </div>194195 <div class="section_item" data-flavor="Strawberry" style="display: none;">196 <div class="item_image">197 <img src="//spacegoods.com/cdn/shop/files/SCC00590_1x1_693f2342-210b-469b-adb5-8a83ce860c61_1000x.jpg?v=1728026452" alt="Image">198 </div>199200 <div class="item_text">3) use your frother to blend to perfection</div>201 </div>202203 <div class="section_item" data-flavor="Strawberry" style="display: none;">204 <div class="item_image">205 <img src="//spacegoods.com/cdn/shop/files/SCC00881_1x1_95d55eac-482a-4826-b77b-bdfe6a33a377_1000x.jpg?v=1728026013" alt="Image">206 </div>207208 <div class="item_text">4) drink & enjoy focus - energy - calm</div>209 </div>210211 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">212 <div class="item_image">213 <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">214 </div>215216 <div class="item_text">1) scoop 8g of Rainbow Dust</div>217 </div>218219 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">220 <div class="item_image">221 <img src="//spacegoods.com/cdn/shop/files/mix_2_2e82c99b-f91c-437a-a68e-12ddc274715d_1000x.webp?v=1723624267" alt="Image">222 </div>223224 <div class="item_text">2) mix with water or milk - hot or cold</div>225 </div>226227 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">228 <div class="item_image">229 <img src="//spacegoods.com/cdn/shop/files/frother_3_3e370a78-3b68-4974-a163-d46c4e89d657_1000x.webp?v=1723624287" alt="Image">230 </div>231232 <div class="item_text">3) use your frother to blend to perfection</div>233 </div>234235 <div class="section_item" data-flavor="Raw Chocolate (Decaf)" style="display: none;">236 <div class="item_image">237 <img src="//spacegoods.com/cdn/shop/files/SCC00936_1x1_77b9b3d3-2afe-4964-b522-e4aa8d233d06_1000x.jpg?v=1728025943" alt="Image">238 </div>239240 <div class="item_text">4) drink & enjoy focus - energy - calm</div>241 </div>242243 </div>244 </div>245</div>246<script>247248</script>249250251</div>
