Back to Shopify Liquid
Info section of your product v2
Shopify Liquid

Info section of your product v2

Drop this Shopify Liquid snippet into your theme to add the info section of your product v2 block. Copy the code below, paste it into your theme files, save and you're done.

276 lines · 8.6 KB
Shopify Liquid
1<div id="shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG" class="shopify-section">
2
3
4<style>
5 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_holder {
6 padding-top: 50px;
7 padding-bottom: 50px;
8 }
9 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_holder_wrapper {
10 display: flex;
11 max-width: 1360px;
12 margin: auto;
13 padding: 0 64px;
14 min-height: 200px;
15 }
16 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_item {
17 align-items: center;
18 background: #fff;
19 border: 1px solid #d1d5db;
20 border-radius: 16px;
21 column-gap: 16px;
22 margin: 0 0 8px;
23 padding: 24px;
24 row-gap: 16px;
25 width: 100%;
26 }
27 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .left_part {
28 min-width: 1px;
29 width: 100%;
30 margin-right: 10.6%;
31 }
32 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .right_part {
33 min-width: 1px;
34 width: 89.4%;
35 }
36 [data-subject] {
37 display: none;
38 }
39 [data-subject='Coffee'] {
40 display: block;
41 }
42 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .seciton_title {
43 color: #000001;
44 font-family: 'TAN - MEMORIES';
45 font-size: 40px;
46 font-weight: 400;
47 line-height: 1.2;
48 letter-spacing: -0.8px;
49 margin-bottom: 22px;
50 }
51 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item_text {
52 align-self: stretch;
53 color: #000;
54 display: flex;
55 flex-direction: column;
56 font-family: Apercu Pro;
57 font-size: 20px;
58 font-weight: 500;
59 justify-content: flex-start;
60 line-height: 1.5;
61 max-width: 100%;
62 position: relative;
63 }
64 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item_image {
65 width: 48px;
66 height: 48px;
67 margin-bottom: 12px;
68 }
69 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .right_part img {
70 width: 100%;
71 height: 100%;
72 object-fit: cover;
73 }
74 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_btn {
75 align-items: center;
76 background: #f27;
77 border-radius: 10px;
78 border-style: solid;
79 border-width: 0;
80 column-gap: 12px;
81 display: flex;
82 flex-direction: row;
83 flex-wrap: nowrap;
84 justify-content: center;
85 margin: 16px 0 0;
86 padding: 20px 60px;
87 position: relative;
88 row-gap: 12px;
89 transition-duration: 50ms;
90 transition-timing-function: ease-in-out;
91 width: fit-content;
92 color: #fff;
93 display: flex;
94 flex-direction: column;
95 font-family: Apercu Pro;
96 font-size: 20px;
97 font-weight: 700;
98 justify-content: center;
99 letter-spacing: -.01em;
100 line-height: 1.4;
101 position: relative;
102 text-decoration: none;
103 }
104 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_btn:hover {
105 background: #000;
106 border-style: solid;
107 border-width: 0;
108 }
109 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item-main {
110 display: flex;
111 align-items: center;
112 }
113 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item-main span {
114 flex: none;
115 font-size: 20px;
116 margin-right: 8px;
117 }
118 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .left_part img {
119 width: 100%;
120 height: 100%;
121 object-fit: cover;
122 }
123 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item-main {
124 display: flex;
125 align-items: center;
126 }
127 @media screen and (max-width: 900px) {
128 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_holder_wrapper {
129 padding: 0 32px;
130 }
131 }
132 @media screen and (max-width: 768px) {
133 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .left_part {
134 height: 520px;
135 }
136 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_holder_wrapper {
137 flex-direction: column;
138 }
139 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .right_part {
140 margin-right: 0;
141 width: 100%;
142 }
143 }
144 @media screen and (max-width: 575px) {
145 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .seciton_title {
146 font-size: 32px;
147 margin-top: 30px;
148 }
149 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .left_part {
150 height: 440px;
151 }
152 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_holder_wrapper {
153 padding: 0 16px;
154 }
155 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item-main span {
156 font-size: 16px;
157 }
158 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .item-main .item_text {
159 font-size: 16px;
160 }
161 #shopify-section-template--17389125894327__pdp_why_use_rainbow_ncrftG .section_btn {
162 font-size: 17px;
163 }
164 }
165</style>
166
167<div pdp_why_use_rainbow="" class="section_holder">
168 <div class="section_holder_wrapper">
169 <div class="left_part">
170
171
172 <img src="//spacegoods.com/cdn/shop/files/PDP_new_2000x.webp?v=1720521440" alt="Image" data-flavor="Coffee">
173
174
175
176 <img src="//spacegoods.com/cdn/shop/files/PDP_new_2000x.webp?v=1720521440" alt="Image" data-flavor="Chocolate" style="display: none;">
177
178
179
180 <img src="//spacegoods.com/cdn/shop/files/PDP_new_2000x.webp?v=1720521440" alt="Image" data-flavor="Vanilla Cinnamon" style="display: none;">
181
182
183
184 <img src="//spacegoods.com/cdn/shop/files/strawberry_edit_2_2000x.jpg?v=1721762329" alt="Image" data-flavor="Strawberry" style="display: none;">
185
186
187
188 <img src="//spacegoods.com/cdn/shop/files/mix_2_2e82c99b-f91c-437a-a68e-12ddc274715d_2000x.webp?v=1723624267" alt="Image" data-flavor="Raw Chocolate (Decaf)" style="display: none;">
189
190
191
192
193
194
195
196
197
198
199
200
201 </div>
202 <div class="right_part">
203 <div class="seciton_title">Why thousands start their day with Rainbow Dust -</div>
204 <div class="section_items">
205
206
207
208
209
210
211
212
213
214
215
216
217 <div class="section_item">
218 <div class="item-main">
219 <span></span>
220 <div class="item_text">You want to get in 'the zone' for increased productivity</div>
221 </div>
222
223 </div>
224
225
226
227 <div class="section_item">
228 <div class="item-main">
229 <span></span>
230 <div class="item_text">you want an instant burst of enery &amp; removal of brain fog</div>
231 </div>
232
233 </div>
234
235
236
237 <div class="section_item">
238 <div class="item-main">
239 <span></span>
240 <div class="item_text">you love coffee but don't like the jitters or anxiety that follow</div>
241 </div>
242
243 </div>
244
245
246
247 <div class="section_item">
248 <div class="item-main">
249 <span></span>
250 <div class="item_text">you like to feel stimulated but don't enjoy the usual crash</div>
251 </div>
252
253 </div>
254
255
256
257 <div class="section_item">
258 <div class="item-main">
259 <span></span>
260 <div class="item_text">you want to get into 'work mode' or 'flow state' but also be able to sleep later</div>
261 </div>
262
263 <a href="https://spacegoods.com/products/rainbow-dust-premium-starter-kit-chocolate" class="section_btn">GET STARTED &gt;</a>
264
265 </div>
266
267
268 </div>
269 </div>
270 </div>
271</div>
272<script>
273
274</script>
275
276</div>

Related snippets