Back to Shopify Liquid
Shopify Liquid
Us vs Them
Drop this Shopify Liquid snippet into your theme to add the us vs them block. Copy the code below, paste it into your theme files, save and you're done.
345 lines · 11.4 KB
Shopify Liquid
1<div id="shopify-section-template--17389125894327__pdp_coffe_alternative_bpQxKn" class="shopify-section">23 <style>4 #alternative_QxKn {5 position: relative;6 }78 #alternative_QxKn .section_holder {9 position: relative;10 margin: auto;11 max-width: 680px;12 padding: 80px 40px;13 }1415 #alternative_QxKn .subheading {16 width: fit-content;17 height: 35px;18 padding: 0 12.2px;19 background: #FF2277;20 font: normal normal 500 18px/22px Apercu Pro;21 letter-spacing: 0px;22 color: #FFFFFF;23 text-transform: lowercase;24 display: flex;25 align-items: center;26 justify-content: center;27 border-radius: 5px;28 margin: 0 auto 6px;29 }3031 #alternative_QxKn .heading {32 font-family: 'TAN - MEMORIES';33 font-weight: 400;34 font-size: 42px;35 line-height: 1.1;36 text-align: center;37 margin-bottom: 12px;38 }3940 #alternative_QxKn .desc {41 text-align: center;42 font: normal normal normal 21px/21px Apercu Pro;43 letter-spacing: 0px;44 color: #000000;45 margin-bottom: 60px;46 }4748 #alternative_QxKn .img_vs_holder {49 display: flex;50 position: relative;51 justify-content: space-between;52 margin-bottom: 40px;53 }5455 #alternative_QxKn .img_vs {56 position: absolute;57 left: 50%;58 top: 50%;59 transform: translate(-50%, -50%);60 width: 65px;61 height: 65px;62 background: #000000;63 color: white;64 border-radius: 100px;65 display: flex;66 align-items: center;67 justify-content: center;68 font-family: Apercu Pro;69 font-size: 25px;70 z-index: 1;71 }7273 #alternative_QxKn .vs_img {74 width: calc(50% - 8px);75 display: flex;76 position: relative;77 }7879 #alternative_QxKn .vs_img:last-of-type {80 border: 2px solid #F1F9FC;81 border-radius: 12px;82 }8384 #alternative_QxKn .s_vs_desc {85 display: flex;86 border-radius: 100px;87 overflow: hidden;88 height: 65px;89 margin-bottom: 13px;90 }9192 #alternative_QxKn .s_vs_desc>div {93 width: 50%;94 display: flex;95 align-items: center;96 }9798 #alternative_QxKn .us_desc {99 background: transparent linear-gradient(106deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;100 justify-content: flex-end;101 padding-right: 56px;102 padding-left: 10px;103 font: normal normal normal 21px/21px Apercu Pro;104 text-align: right;105 }106107 #alternative_QxKn .them_desc {108 background: #F5F5F5;109 font: normal normal normal 19px/21px Apercu Pro;110 }111112 #alternative_QxKn .us_desc>div {113 position: relative;114 color: white;115 }116117 #alternative_QxKn .them_desc>div {118 position: relative;119 color: black;120 padding-left: 58px;121 padding-right: 24px;122 }123124 #alternative_QxKn .them_desc>div:after,125 #alternative_QxKn .us_desc>div:after {126 content: '';127 position: absolute;128 top: 50%;129 transform: translateY(-50%);130 width: 24px;131 height: 24px;132 border-radius: 100px;133 background-repeat: no-repeat;134 background-position: center;135 background-size: 24px;136 }137138 #alternative_QxKn .us_desc>div:after {139 right: -32px;140 background-image: url(//spacegoods.com/cdn/shop/t/346/assets/white_check.svg?v=168019155159854585241722621936);141 }142143 #alternative_QxKn .them_desc>div:after {144 left: 24px;145 background-image: url(//spacegoods.com/cdn/shop/t/346/assets/black_close.svg?v=21011354507018251241722621935);146 }147148 #alternative_QxKn .try_btn {149 width: 100%;150 max-width: 487px;151 height: 60px;152 border-radius: 8px;153 display: flex;154 font: normal normal 500 21px/26px Apercu Pro;155 letter-spacing: 1.05px;156 color: #FFFFFF;157 align-items: center;158 justify-content: center;159 cursor: pointer;160 margin: auto;161 background: #000000;162 }163164 #alternative_QxKn .try_btn:hover {165 background: #282828;166 }167168 #alternative_QxKn .desc_below_btn {169 font: normal normal normal 16px/19px Apercu Pro;170 letter-spacing: 0px;171 color: #000000;172 margin-top: 13px;173 text-align: center;174 }175176 #alternative_QxKn .descs_below_table {177 background: transparent linear-gradient(119deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;178 -webkit-background-clip: text;179 -webkit-text-fill-color: transparent;180 font: normal normal 500 21px/21px Apercu Pro;181 text-align: center;182 margin-bottom: 21px;183 }184185 #alternative_QxKn .vs_desc_holder {186 margin-bottom: 33px;187 }188189 #alternative_QxKn img.satis_badge {190 position: absolute;191 width: 146px;192 height: 139px;193 transform: translate(-50%, -39px);194 }195196 @media screen and (max-width: 900px) {197 #alternative_QxKn .section_holder {198 padding: 45px 15px;199 }200 #alternative_QxKn .subheading {201 height: 24px;202 font: normal normal 500 12px/14px Apercu Pro;203 padding: 0 14px;204 margin-bottom: 8px;205 }206 #alternative_QxKn .heading {207 font: normal normal 400 24px/26px 'TAN - MEMORIES';208 padding: 0 60px;209 margin-bottom: 8px;210 }211 #alternative_QxKn .desc {212 font: normal normal normal 16px/21px Apercu Pro;213 margin-bottom: 21px;214 }215 #alternative_QxKn .img_vs_holder {216 padding: 0 25px;217 margin-bottom: 15px;218 }219 #alternative_QxKn .img_vs {220 width: 46px;221 height: 46px;222 font-size: 13px;223 }224 #alternative_QxKn .vs_img img {225 width: 150px;226 height: 150px;227 }228 #alternative_QxKn .vs_img {229 width: calc(50% - 6px);230 }231 #alternative_QxKn .us_desc,232 #alternative_QxKn .them_desc {233 font: normal normal normal 14px/16px Apercu Pro;234 }235 #alternative_QxKn .them_desc>div:after,236 #alternative_QxKn .us_desc>div:after {237 width: 18px;238 height: 18px;239 background-size: 18px;240 }241 #alternative_QxKn .us_desc>div:after {242 right: -28px;243 }244 #alternative_QxKn .us_desc {245 padding-right: 43px;246 }247 #alternative_QxKn .them_desc>div:after {248 left: 15px;249 }250 #alternative_QxKn .them_desc>div {251 padding-left: 45px;252 padding-right: 18px;253 }254 #alternative_QxKn .s_vs_desc {255 height: 45px;256 margin-bottom: 4px;257 }258 #alternative_QxKn .descs_below_table {259 font-size: 17px;260 padding: 0 15px;261 background: transparent linear-gradient(180deg, #724CE9 0%, #FF2277 100%) 0% 0% no-repeat padding-box;262 -webkit-background-clip: text;263 -webkit-text-fill-color: transparent;264 margin-bottom: 14px;265 }266 #alternative_QxKn .try_btn {267 font: normal normal 500 18px/22px Apercu Pro;268 letter-spacing: 0.9px;269 height: 52px;270 }271 #alternative_QxKn .desc_below_btn {272 font: normal normal normal 13px/15px Apercu Pro;273 }274 #alternative_QxKn .vs_desc_holder {275 margin-bottom: 21px;276 padding: 0 7px;277 }278 #alternative_QxKn img.satis_badge {279 width: 90px;280 height: 86px;281 transform: translate(-30px, -15px);282 }283 }284 </style>285 <div pdp_coffe_alternative="" id="alternative_QxKn">286 <div class="section_holder" data-flavor="Coffee">287 <div class="subheading">us vs. them</div>288 <div class="heading">Coffee upgrade like no other</div>289 <div class="desc">Rainbow Dust - coffee</div>290 <div class="compare_box">291 <div class="img_vs_holder">292 <div class="vs_img"><img src="//spacegoods.com/cdn/shop/files/coffee_square_1000x.jpg?v=1721763123" alt="us"><img src="//spacegoods.com/cdn/shop/t/346/assets/satisfaction.svg?v=148103522804112738131722621927" alt="satisfaction" class="satis_badge"></div>293 <div294 class="img_vs">VS.</div>295 <div class="vs_img"><img src="//spacegoods.com/cdn/shop/files/coffee_PDP_1000x.webp?v=1720523880" alt="them"></div>296 </div>297 <div class="vs_desc_holder">298 <div class="s_vs_desc">299 <div class="us_desc">300 <div>zero crash or jitters</div>301 </div>302 <div class="them_desc">303 <div>can give major crashes or jitters</div>304 </div>305 </div>306 <div class="s_vs_desc">307 <div class="us_desc">308 <div>delicious coffee taste</div>309 </div>310 <div class="them_desc">311 <div>bland coffee taste</div>312 </div>313 </div>314 <div class="s_vs_desc">315 <div class="us_desc">316 <div>improved immunity support</div>317 </div>318 <div class="them_desc">319 <div>zero immunity support</div>320 </div>321 </div>322 <div class="s_vs_desc">323 <div class="us_desc">324 <div>all-in-one super blend</div>325 </div>326 <div class="them_desc">327 <div>just coffee, nothing else</div>328 </div>329 </div>330 </div>331 <div class="descs_below_table">Rainbow Dust v1.0 can be mixed with just about anything to enjoy it however you like...</div>332 <a class="try_btn" href="https://spacegoods.com/pages/science" >TRY RAINBOW DUST RISK-FREE</a>333 <div class="desc_below_btn">We offer a risk free money back guarantee with each order</div>334 </div>335 </div>336</div>337<script>338 $('#alternative_QxKn .try_btn').click(function() {339 window.scrollTo({340 top: 0,341 behavior: 'smooth',342 })343 });344</script>345</div>
