Back to Shopify Liquid
Shopify Liquid
Image with Infinite sliding text
Drop this Shopify Liquid snippet into your theme to add the image with infinite sliding text block. Copy the code below, paste it into your theme files, save and you're done.
360 lines · 13.8 KB
Shopify Liquid
1<div id="shopify-section-template--17614983364791__0b4106fb-2713-4c64-9736-b2bf143fc8d7" class="shopify-section">2 <style>3 #ingre_c8d7 {4 position: relative;5 background: transparent linear-gradient(180deg, #E5F2F6 0%, #FEDCEC 51%, #EDD7FE 100%) 0% 0% no-repeat padding-box;6 }78 #ingre_c8d7 .section_holder {9 position: relative;10 margin: auto;11 max-width: 1208px;12 padding: 80px 40px;13 }1415 #ingre_c8d7 .heading {16 font-family: 'TAN - MEMORIES';17 font-size: 42px;18 font-weight: 400;19 line-height: 45px;20 margin-bottom: 21px;21 text-align: center;22 }2324 #ingre_c8d7 .descs {25 display: flex;26 justify-content: center;27 margin-bottom: 42px;28 }2930 #ingre_c8d7 .description a,31 #ingre_c8d7 .description p,32 #ingre_c8d7 .description {33 font: normal normal normal 18px/22px Apercu Pro;34 letter-spacing: 0px;35 color: #000000;36 }3738 #ingre_c8d7 .s_desc {39 font: normal normal normal 18px/22px Apercu Pro;40 letter-spacing: 0px;41 margin: 0 28px;42 padding: 3px 0 3px 33px;43 background-repeat: no-repeat;44 background-size: 25px;45 background-position: left;46 background-image: url(//spacegoods.com/cdn/shop/t/346/assets/check-violet.svg?v=121176336516853493291722621936);47 }4849 #ingre_c8d7 .description {50 text-align: center;51 max-width: 1024px;52 margin: 0 auto 21px;53 }5455 #ingre_c8d7 .ingre_holder {56 display: grid;57 grid-template-columns: 1fr 1fr;58 gap: 16px;59 margin-bottom: 32px;60 }6162 #ingre_c8d7 .s_ingre {63 min-width: 1px;64 display: flex;65 background: white;66 border-radius: 8px;67 align-items: center;68 }6970 #ingre_c8d7 .ingre_h {71 font: normal normal bold 21px/16px Apercu Pro;72 letter-spacing: 0px;73 color: #1E1E1E;74 margin-bottom: 5px;75 }7677 #ingre_c8d7 .ingre_w {78 font: italic normal normal 17px/16px Apercu Pro;79 letter-spacing: 0px;80 color: #1E1E1E;81 margin-bottom: 11px;82 }8384 #ingre_c8d7 .ingre_desc {85 font: normal normal normal 17px/18px Apercu Pro;86 letter-spacing: 0px;87 color: #1E1E1E;88 }8990 #ingre_c8d7 .txt_part {91 padding: 29px 25px;92 width: calc(100% - 162px);93 }9495 #ingre_c8d7 .img_part {96 width: 162px;97 }9899 #ingre_c8d7 .ingre_btn {100 width: 100%;101 max-width: 363px;102 height: 70px;103 margin: auto;104 border-radius: 5px;105 padding: 5px;106 cursor: pointer;107 user-select: none;108 background: linear-gradient(102deg, rgba(114, 76, 233, 1) 0%, rgba(255, 34, 119, 1) 100%);109 }110111 #ingre_c8d7 .ingre_btn>div {112 display: flex;113 align-items: center;114 width: 100%;115 background: white;116 border-radius: 5px;117 height: 60px;118 padding: 0 15px;119 }120121 #ingre_c8d7 img.nutrition_arrow {122 margin-left: auto;123 filter: brightness(0);124 }125126 #ingre_c8d7 .ingre_btn span {127 font: normal normal normal 21px/26px Apercu Pro;128 letter-spacing: 0px;129 color: #000000;130 }131132 #ingre_c8d7 img.nu_icon {133 width: 28px;134 margin-right: 8px;135 }136137 #ingre_c8d7 .ingre_table_overlay {138 position: fixed;139 left: 0;140 top: 0;141 width: 100vw;142 height: 100vh;143 background: black;144 opacity: 0.5;145 z-index: 2;146 display: none;147 }148149 #ingre_c8d7 .ingredient_modal {150 position: fixed;151 left: 50%;152 top: 60%;153 transform: translate(-50%, -50%);154 width: calc(100% - 25px);155 max-width: 300px;156 z-index: 2;157 display: none;158 }159160 #ingre_c8d7 .ingredient_modal:before {161 content: '';162 position: absolute;163 left: 50%;164 transform: translateX(-50%);165 top: -42px;166 width: 32px;167 height: 32px;168 filter: invert(1);169 background-size: 100%;170 pointer-events: none;171 background-image: url(//spacegoods.com/cdn/shop/t/346/assets/black_close.svg?v=21011354507018251241722621935);172 }173174 #ingre_c8d7 .ingredient_modal img {175 width: 100%;176 }177178 @media screen and (max-width: 900px) {179 #ingre_c8d7 .section_holder {180 padding: 45px 15px;181 }182 #ingre_c8d7 .heading {183 font: normal normal 400 24px/32px 'TAN - MEMORIES';184 margin-bottom: 14px;185 }186 #ingre_c8d7 .descs {187 flex-wrap: wrap;188 margin-bottom: 16px;189 }190 #ingre_c8d7 .description a,191 #ingre_c8d7 .description p,192 #ingre_c8d7 .description {193 font: normal normal 500 13px/15px Apercu Pro;194 }195 #ingre_c8d7 .description {196 margin-bottom: 16px;197 }198 #ingre_c8d7 .s_desc {199 font: normal normal 500 13px/15px Apercu Pro;200 background-size: 13px;201 padding: 0 0 0 17px;202 margin: 0 15px 12px 0;203 }204 #ingre_c8d7 .s_desc:last-of-type {205 margin-right: 0;206 }207 #ingre_c8d7 .ingre_holder {208 display: flex;209 overflow: auto;210 gap: unset;211 margin-right: -15px;212 }213 #ingre_c8d7 .s_ingre {214 min-width: 283px;215 margin-right: 11px;216 }217 #ingre_c8d7 .txt_part {218 padding: 21px 0px 21px 15px;219 width: calc(100% - 109px);220 }221 #ingre_c8d7 .ingre_h {222 font: normal normal bold 16px/16px Apercu Pro;223 }224 #ingre_c8d7 .ingre_w {225 font: normal normal normal 14px/16px Apercu Pro;226 }227 #ingre_c8d7 .ingre_desc {228 font: normal normal normal 13px/16px Apercu Pro;229 }230 #ingre_c8d7 .img_part {231 width: 109px;232 }233 #ingre_c8d7 .ingre_btn {234 height: 50px;235 padding: 4px;236 }237 #ingre_c8d7 .ingre_btn>div {238 height: 42px;239 padding: 0 14px;240 }241 #ingre_c8d7 .ingre_btn span {242 font: normal normal normal 16px/19px Apercu Pro;243 }244 #ingre_c8d7 img.nu_icon {245 width: 17px;246 margin-right: 4px;247 }248 }249 </style>250 <div id="ingre_c8d7">251 <div class="section_holder">252 <div class="heading">it's what's inside that counts -</div>253 <div class="descs">254 <div class="s_desc">quality ingredients - made in england</div>255 <div class="s_desc">vegan & keto friendly</div>256 <div class="s_desc">big dosages: 2-3x stronger</div>257 </div>258 <div class="ingre_holder">259 <div class="s_ingre">260 <div class="txt_part">261 <div class="ingre_h">Maitake mushroom</div>262 <div class="ingre_w">1000 mg</div>263 <div class="ingre_desc">The 'longevity mushroom' known to be a powerful antioxidant and immune support</div>264 </div>265 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/maitake_web_crop_500x.jpg?v=1697120766" alt="ingredient" class="ingre_img"></div>266 </div>267 <div class="s_ingre">268 <div class="txt_part">269 <div class="ingre_h">Reishi mushroom</div>270 <div class="ingre_w">1000 mg</div>271 <div class="ingre_desc">The 'calm mushroom' - known to reduce stress & is also a powerful immune support</div>272 </div>273 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/reishi_web_square_f314a979-1302-43fd-b62d-4ddb20b03b22_500x.jpg?v=1692173679" alt="ingredient" class="ingre_img"></div>274 </div>275 <div class="s_ingre">276 <div class="txt_part">277 <div class="ingre_h">Tremella mushroom</div>278 <div class="ingre_w">1000 mg</div>279 <div class="ingre_desc">The 'beauty mushroom' - known to support healthy skin, hair & nails</div>280 </div>281 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/tremella_web_crop_500x.jpg?v=1697120950" alt="ingredient" class="ingre_img"></div>282 </div>283 <div class="s_ingre">284 <div class="txt_part">285 <div class="ingre_h">Magnesium</div>286 <div class="ingre_w">169 mg</div>287 <div class="ingre_desc">Essential mineral used to maintain normal blood pressure & reduce inflammation</div>288 </div>289 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/magnesium_web_square_aba7fb31-4bbe-4308-ad06-3ee8a68e7c1e_500x.jpg?v=1692173842" alt="ingredient" class="ingre_img"></div>290 </div>291 <div class="s_ingre">292 <div class="txt_part">293 <div class="ingre_h">Ashwagandha</div>294 <div class="ingre_w">500 mg</div>295 <div class="ingre_desc">An ancient medicinal herb, scientifically proven to reduce stress & anxiety levels</div>296 </div>297 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/02-ingredient_1_500x.png?v=1662967567" alt="ingredient" class="ingre_img"></div>298 </div>299 <div class="s_ingre">300 <div class="txt_part">301 <div class="ingre_h">Jujube</div>302 <div class="ingre_w">150 mg</div>303 <div class="ingre_desc">Fruit ingredient that's been used in traditional medicine for centuries - super high in antioxidants</div>304 </div>305 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/jujube_web_square_copy_5ea29eac-716d-4eb3-b277-c35c952cf7b3_500x.jpg?v=1692173725" alt="ingredient" class="ingre_img"></div>306 </div>307 <div class="s_ingre">308 <div class="txt_part">309 <div class="ingre_h">L-Glycine</div>310 <div class="ingre_w">3000 mg</div>311 <div class="ingre_desc">Amino acid that has a calming effect on the brain & can improve sleep quality</div>312 </div>313 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/L-glycine_web_square_bab2c823-fcf9-421e-bed9-39a1a1a6c838_500x.jpg?v=1692173761" alt="ingredient" class="ingre_img"></div>314 </div>315 <div class="s_ingre">316 <div class="txt_part">317 <div class="ingre_h">Passion flower</div>318 <div class="ingre_w">150 mg</div>319 <div class="ingre_desc">Plant extract commonly used to reduce anxiety and increase feelings of calm</div>320 </div>321 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/blu_flower_884722fa-8c4f-4ae6-8eaa-c8541aed2131_500x.jpg?v=1692173799" alt="ingredient" class="ingre_img"></div>322 </div>323 <div class="s_ingre">324 <div class="txt_part">325 <div class="ingre_h">Chamomile</div>326 <div class="ingre_w">100 mg</div>327 <div class="ingre_desc">Traditional plant ingredient widely used to help the body relax</div>328 </div>329 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/cham_web_square_new_b3eaaa0f-a00c-43f2-b7fb-f577d06f7f35_500x.jpg?v=1692173894" alt="ingredient" class="ingre_img"></div>330 </div>331 <div class="s_ingre">332 <div class="txt_part">333 <div class="ingre_h">L-Tryptophan</div>334 <div class="ingre_w">220 mg</div>335 <div class="ingre_desc">Amino acid known to improve mood & support sleep</div>336 </div>337 <div class="img_part"><img src="//spacegoods.com/cdn/shop/files/L-tryptophan_web_square_944b8883-1b15-4a58-b1e7-2e54c94e4143_500x.jpg?v=1692173874" alt="ingredient" class="ingre_img"></div>338 </div>339 </div>340 </div>341 </div>342 <script>343 $('#ingre_c8d7 .ingre_btn').click(function() {344 show_ingre_popup();345 });346 $('#ingre_c8d7 .ingre_table_overlay').click(function() {347 hide_ingre_popup();348 });349350 function show_ingre_popup() {351 $('#ingre_c8d7 .ingre_table_overlay').fadeIn(400);352 $('#ingre_c8d7 .ingredient_modal').fadeIn(300);353 }354355 function hide_ingre_popup() {356 $('#ingre_c8d7 .ingre_table_overlay').fadeOut(400);357 $('#ingre_c8d7 .ingredient_modal').fadeOut(300);358 }359 </script>360</div>
