Back to Shopify Liquid
Shopify Liquid
Info section of your product
Drop this Shopify Liquid snippet into your theme to add the info section of your product block. Copy the code below, paste it into your theme files, save and you're done.
312 lines · 14.3 KB
Shopify Liquid
1<div id="shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy" class="shopify-section">2 <style>3 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy img {4 width: 100%;5 display: block;6 }78 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder {9 width: 100%;10 min-height: 41.5vw;11 position: relative;12 display: flex;13 }1415 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .desktop_back {16 width: 100%;17 height: 100%;18 position: absolute;19 top: 0;20 }2122 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .desktop_back img {23 width: 100%;24 height: 100%;25 object-fit: cover;26 }2728 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_back {29 display: none;30 }3132 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder_wrapper {33 max-width: max(1380px, calc(23.4vw + 552px));34 padding: 75px 50px 85px 50px;35 margin: auto;36 position: relative;37 z-index: 2;38 }3940 /* #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item_wrapper:first-child {color: #000;font-family: "TAN - MEMORIES";font-size: 50px;font-style: normal;font-weight: 400;line-height: 60px; white-space: nowrap;background: transparent;padding: 0;margin-top: -20px;} */4142 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item_wrapper {43 padding: 25px 27px 27px 27px;44 display: flex;45 align-items: center;46 min-width: 1px;47 width: 100%;48 border-radius: 12px;49 background: #FFF;50 }5152 /* #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_heading {display: none;} */5354 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_heading {55 display: block;56 color: #000;57 text-align: center;58 font-family: "TAN - MEMORIES";59 font-style: normal;60 font-weight: 400;61 line-height: 1.5;62 text-align: center;63 margin-bottom: 30px;64 font-size: 44px;65 }6667 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_items {68 display: grid;69 grid-template-columns: 1fr 1fr;70 grid-gap: 16px 23.4vw;71 }7273 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item {74 display: flex;75 align-items: center;76 }7778 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_image {79 width: 42px;80 margin-right: 22px;81 flex: none;82 }8384 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_heading {85 color: #000;86 font-family: "Apercu Pro";87 font-size: 20px;88 font-style: normal;89 font-weight: 700;90 line-height: 1;91 margin-bottom: 11px;92 }9394 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_text {95 color: #000;96 font-family: "Apercu Pro";97 font-size: 16px;98 font-style: normal;99 font-weight: 400;100 line-height: 21px;101 }102103 @media screen and (max-width: 1200px) {104 /* #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item_wrapper:first-child {font-size: 36px;line-height: 45px;} */105 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_heading {106 font-size: 16px;107 }108 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_text {109 font-size: 14px;110 }111 }112113 @media screen and (max-width: 900px) {114 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder {115 background: #EAA8C9;116 }117 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_heading {118 margin-bottom: 81.3vw;119 font-size: 24px;120 line-height: 45px;121 position: relative;122 left: 11px;123 }124 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder_wrapper {125 padding: 13.3vw 10px 50px;126 }127 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item_wrapper {128 max-width: 359px;129 padding: 21.5px 19px;130 margin: 0 4px 8px;131 }132 /* #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_item_wrapper:first-child {display: none;} */133 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_image {134 width: 35px;135 margin-right: 20px;136 }137 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .item_heading {138 margin-bottom: 10px;139 }140 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .desktop_back {141 display: none;142 }143 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_items {144 display: flex;145 flex-wrap: wrap;146 justify-content: center;147 grid-gap: 0;148 }149 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_back {150 width: 100%;151 position: absolute;152 top: 0;153 display: block;154 }155 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_back_wrapper {156 padding-top: 134%;157 position: relative;158 }159 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_back_wrapper img {160 width: 100%;161 height: 100%;162 position: absolute;163 top: 0;164 }165 }166167 @media screen and (max-width:500px) {168 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_heading {169 left: 8px;170 }171 }172173 @media screen and (max-width: 380px) {174 #shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .mobile_heading {175 font-size: 24px;176 }177 }178 </style>179 <div hp_one_daily_serving="" class="section_holder" id="one_daily_serving_kwzy">180 <div class="section_holder_wrapper">181 <div class="mobile_heading">182 Comprehensive daily serving - focus + energy.183 </div>184 <div class="section_items">185 <div class="section_item_wrapper">186 <div class="section_item">187 <div class="item_image">188 <img src="//spacegoods.com/cdn/shop/files/Group_2_673d2d5a-ac6a-4e23-aa9b-b3b9d920538e_300x.svg?v=1719508105" alt="icon" />189 </div>190 <div class="item_content">191 <div class="item_heading">All-in-one daily blend</div>192 <div class="item_text">193 No more stacking supplements - save money & time - rainbow dust contains 8 primary, potent ingredients all together in one super simple blend - it's coffee plus!194 </div>195 </div>196 </div>197 </div>198 <div class="section_item_wrapper">199 <div class="section_item">200 <div class="item_image">201 <img src="//spacegoods.com/cdn/shop/files/Group_4_300x.svg?v=1719508105" alt="icon" />202 </div>203 <div class="item_content">204 <div class="item_heading">Genuinely delicious</div>205 <div class="item_text">206 Unlike most mushroom powders, rainbow dust tastes just like a coffee, hot chocolate or milkshake - you need to try it for yourself!207 </div>208 </div>209 </div>210 </div>211 <div class="section_item_wrapper">212 <div class="section_item">213 <div class="item_image">214 <img src="//spacegoods.com/cdn/shop/files/Grousp_5_300x.svg?v=1719508105" alt="icon" />215 </div>216 <div class="item_content">217 <div class="item_heading">Save money</div>218 <div class="item_text">219 cut out your daily Starbucks or Costa coffee, plus stop buying other supplements - dust is as little as 90p per day220 </div>221 </div>222 </div>223 </div>224 <div class="section_item_wrapper">225 <div class="section_item">226 <div class="item_image">227 <img src="//spacegoods.com/cdn/shop/files/icon_super_potent_300x.svg?v=1719842839" alt="icon" />228 </div>229 <div class="item_content">230 <div class="item_heading">Super potent</div>231 <div class="item_text">232 each ingredient in dust is a dosage 2-3x stronger than our competitors - trust us, you'll feel the difference...233 </div>234 </div>235 </div>236 </div>237 <div class="section_item_wrapper">238 <div class="section_item">239 <div class="item_image">240 <img src="//spacegoods.com/cdn/shop/files/4_300x.svg?v=1719508104" alt="icon" />241 </div>242 <div class="item_content">243 <div class="item_heading">All natural made in England</div>244 <div class="item_text">245 100% natural & safe - rainbow dust is made in our lab in england, rigorously tested to ensure the very highest quality246 </div>247 </div>248 </div>249 </div>250 <div class="section_item_wrapper">251 <div class="section_item">252 <div class="item_image">253 <img src="//spacegoods.com/cdn/shop/files/icon_mix_300x.svg?v=1719842838" alt="icon" />254 </div>255 <div class="item_content">256 <div class="item_heading">Mix it with anything</div>257 <div class="item_text">258 Incredibly versatile, rainbow dust can be mixed with just about anything - water, milk, your protein shake or smoothie - hot or cold259 </div>260 </div>261 </div>262 </div>263 </div>264 </div>265 <div class="desktop_back">266 <img src="//spacegoods.com/cdn/shop/files/spacegoods_section_2000x.png?v=1719840449" alt="d-background" />267 </div>268 <div class="mobile_back">269 <div class="mobile_back_wrapper">270 <img src="//spacegoods.com/cdn/shop/files/Mobile-Banner_1000x.png?v=1719514145" alt="m-background" />271 </div>272 </div>273 </div>274 <script>275 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_close').on('click', function() {276 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder').removeClass('active');277 });278 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .popular_searches_content').on('click', function() {279 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .search_input input').val($(this).text());280 perform_search($(this).text());281 });282 $(document).on('click', function() {283 if (!$(event.target).closest('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder').length) {284 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .section_holder').removeClass('active');285 }286 });287 const processChange = debounce((event) => perform_search($('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .search_input input').val()));288289 function perform_search(search_text) {290 if (search_text != '') {291 $('#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .search_input input').val(search_text);292 $.ajax({293 url: '/search?section_id=search_result_content&q=' + search_text + '&type=product',294 type: 'GET'295 }).then(res => {296 $('[ data-id="filled_search"]').show();297 $('[ data-id="empty_search"]').hide();298 $("#shopify-section-template--17138240979127__hp_one_daily_serving_LQkwzy .best_sellers_contents_wrapper[data-id='filled_search']").html($(res).children());299 });300 $.ajax({301 url: '/search/suggest.json?q=' + search_text + '&resources[type]=collection',302 type: 'GET'303 }).then(res => {304 $.ajax(res.resources.results.collections[0].handle)305 });306 } else {307 $('[ data-id="filled_search"]').hide();308 $('[ data-id="empty_search"]').show();309 }310 }311 </script>312</div>
