-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
407 lines (363 loc) · 23.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopify Admin</title>
<link rel="shortcut icon" href="https://crushingit.tech/hackathon-assets/shopify-icon.svg" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com/" />
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
</head>
<body>
<small id="liveElAnnouncer" class="sr-only" aria-live="polite" aria-atomic="true"></small>
<nav id="navEl'">
<div class="logo-container">
<a href="https://www.shopify.com/" target="_blank">
<img class="desktop_logo" src="https://crushingit.tech/hackathon-assets/shopify-icon-desktop.svg"
alt="shopify logo with icon and text" />
<img class="mobile_logo" src="https://crushingit.tech/hackathon-assets/shopify-icon.svg"
alt="shopify icon logo" />
</a>
</div>
<div class="search_input_pod">
<svg role="search icon" class="w_h-20" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.3226 13.3833C11.3996 14.0841 10.2484 14.5 9 14.5C5.96243 14.5 3.5 12.0376 3.5 9C3.5 5.96243 5.96243 3.5 9 3.5C12.0376 3.5 14.5 5.96243 14.5 9C14.5 10.2484 14.0841 11.3996 13.3833 12.3226L16.2803 15.2197C16.5732 15.5126 16.5732 15.9874 16.2803 16.2803C15.9874 16.5732 15.5126 16.5732 15.2197 16.2803L12.3226 13.3833ZM13 9C13 11.2091 11.2091 13 9 13C6.79086 13 5 11.2091 5 9C5 6.79086 6.79086 5 9 5C11.2091 5 13 6.79086 13 9Z"
fill="#B5B5B5" />
</svg>
<input aria-roledescription="search input field" class="search_input" type="text" name="earch"
placeholder="Search" />
</div>
<div class="others">
<button aria-label="Notification bell" aria-haspopup="true" aria-expanded="false" aria-controls="alertDropdownEl"
id="alertEl" class="notification">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.25203 14.4239L4.8061 14.1427C2.95144 13.9295 2.42542 11.4844 4.02838 10.5274L4.0933 10.4886C4.966 9.96761 5.50045 9.02609 5.50045 8.00969V7.5C5.50045 5.01472 7.51517 3 10.0005 3C12.4857 3 14.5005 5.01472 14.5005 7.5V8.00969C14.5005 9.02609 15.0349 9.96761 15.9076 10.4886L15.9725 10.5274C17.5755 11.4844 17.0495 13.9295 15.1948 14.1427L12.652 14.435V14.8C12.652 16.2912 11.4432 17.5 9.95203 17.5C8.46086 17.5 7.25203 16.2912 7.25203 14.8V14.4239ZM11.152 14.5H8.75203V14.8C8.75203 15.4627 9.28929 16 9.95203 16C10.6148 16 11.152 15.4627 11.152 14.8V14.5ZM8.00045 13H12.0005L15.0235 12.6525C15.453 12.6032 15.5748 12.0369 15.2036 11.8153L15.1387 11.7766C15.0591 11.7291 14.9815 11.6793 14.9057 11.6273C14.7506 11.521 14.6036 11.4055 14.4651 11.2818C14.4405 11.2598 14.4162 11.2377 14.3922 11.2152C13.5144 10.395 13.0005 9.23833 13.0005 8.00969V7.5C13.0005 5.84315 11.6573 4.5 10.0005 4.5C8.3436 4.5 7.00045 5.84315 7.00045 7.5V8.00969C7.00045 9.23833 6.48651 10.395 5.60871 11.2152C5.58469 11.2377 5.56039 11.2598 5.53583 11.2818C5.39734 11.4055 5.25029 11.521 5.09523 11.6273C5.01945 11.6793 4.94176 11.7291 4.86222 11.7766L4.79729 11.8153C4.4261 12.0369 4.5479 12.6032 4.97739 12.6525L8.00045 13Z"
fill="#E3E3E3" />
</svg>
</button>
<div role="menu" aria-roledescription="notification dropdown menu" aria-labelledby="alertEl" id="alertDropdownEl"
class="dropdown alert_dropdown gap-0">
<div class="alert_dropdown_top">
<p>Alerts</p>
<div>
<button>
<svg role="menuitem" aria-roledescription="filter alerts" class="alert_dropdown_funnel_svg" width="20"
height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6C3 5.58579 3.33579 5.25 3.75 5.25H16.25C16.6642 5.25 17 5.58579 17 6C17 6.41421 16.6642 6.75 16.25 6.75H3.75C3.33579 6.75 3 6.41421 3 6Z"
fill="#616161" />
<path
d="M6.75 14C6.75 13.5858 7.08579 13.25 7.5 13.25H12.5C12.9142 13.25 13.25 13.5858 13.25 14C13.25 14.4142 12.9142 14.75 12.5 14.75H7.5C7.08579 14.75 6.75 14.4142 6.75 14Z"
fill="#616161" />
<path
d="M5.5 9.25C5.08579 9.25 4.75 9.58579 4.75 10C4.75 10.4142 5.08579 10.75 5.5 10.75H14.5C14.9142 10.75 15.25 10.4142 15.25 10C15.25 9.58579 14.9142 9.25 14.5 9.25H5.5Z"
fill="#616161" />
</svg>
</button>
<button>
<svg role="menuitem" aria-roledescription="checked alerts" class="alert_dropdown_check_svg" width="20"
height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.2803 9.03033C13.5732 8.73744 13.5732 8.26256 13.2803 7.96967C12.9874 7.67678 12.5126 7.67678 12.2197 7.96967L9.25 10.9393L8.03033 9.71967C7.73744 9.42678 7.26256 9.42678 6.96967 9.71967C6.67678 10.0126 6.67678 10.4874 6.96967 10.7803L8.71967 12.5303C9.01256 12.8232 9.48744 12.8232 9.78033 12.5303L13.2803 9.03033Z"
fill="#616161" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10ZM15.5 10C15.5 13.0376 13.0376 15.5 10 15.5C6.96243 15.5 4.5 13.0376 4.5 10C4.5 6.96243 6.96243 4.5 10 4.5C13.0376 4.5 15.5 6.96243 15.5 10Z"
fill="#616161" />
</svg>
</button>
</div>
</div>
<p class="alert_dropdown_desc">
Alerts about your store and account will show here
</p>
</div>
<button role="button" aria-roledescription="user account name"
aria-describedby="click this button to open the drop down" aria-haspopup="true" aria-expanded="false"
aria-controls="dropdownEl" id="acctEl" class="account">
<p aria-roledescription="user account name">Davii Collections</p>
<h6 aria-roledescription="user account acronym" class="badge">DC</h6>
</button>
<div role="menu" aria-roledescription="user account dropdown menu" aria-labelledby="acctEl" id="dropdownEl"
class="dropdown acct_dropdown">
<div class="acct_dropdown_top">
<button role="menuitem" aria-roledescription="user account" class="acct_dropdown_top_top">
<div class="acct_dropdown_top_left">
<h6 class="badge">DC</h6>
<p>Davii Collections</p>
</div>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3332 4L5.99984 11.3333L2.6665 8" stroke="#303030" stroke-width="1.33333"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<a aria-roledescription="your account stores" class="acct_dropdown_store" href="https://admin.shopify.com/"
target="_blank" role="menuitem">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.257 3H6.74302C6.35944 3 5.9971 3.17611 5.76012 3.47772L3.37394 6.51468C3.13169 6.823 3 7.20375 3 7.59586V8.25C3 9.31867 3.60958 10.245 4.5 10.7001V15.25C4.5 16.2165 5.2835 17 6.25 17H13.75C14.7165 17 15.5 16.2165 15.5 15.25V10.7001C16.3904 10.245 17 9.31867 17 8.25V7.76879C17 7.26465 16.8307 6.77511 16.5192 6.3787L14.2399 3.47772C14.0029 3.17611 13.6406 3 13.257 3ZM13 15.5H13.75C13.8881 15.5 14 15.3881 14 15.25V11C13.212 11 12.5014 10.6686 12 10.1375C11.4986 10.6686 10.788 11 10 11C9.21199 11 8.50138 10.6686 8 10.1375C7.49862 10.6686 6.78801 11 6 11V15.25C6 15.3881 6.11193 15.5 6.25 15.5H10V13C10 12.4477 10.4477 12 11 12H12C12.5523 12 13 12.4477 13 13V15.5ZM6 9.5H5.75C5.05964 9.5 4.5 8.94036 4.5 8.25V7.59586C4.5 7.53985 4.51881 7.48545 4.55342 7.44141L6.86453 4.5H13.1355L15.3397 7.30543C15.4436 7.43757 15.5 7.60075 15.5 7.76879V8.25C15.5 8.94036 14.9404 9.5 14.25 9.5H14C13.3096 9.5 12.75 8.94036 12.75 8.25V7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75V8.25C11.25 8.94036 10.6904 9.5 10 9.5C9.30964 9.5 8.75 8.94036 8.75 8.25V7.75C8.75 7.33579 8.41421 7 8 7C7.58579 7 7.25 7.33579 7.25 7.75V8.25C7.25 8.94036 6.69036 9.5 6 9.5Z"
fill="#303030" />
</svg>
<p>All stores</p>
</a>
</div>
<span class="border-divide"></span>
<ul class="acct_dropdown_middle">
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Help
Center</a>
</li>
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/"
target="_blank">Changelog</a>
</li>
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Community
forums</a>
</li>
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Hire a
Shopify Partner</a>
</li>
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Keyboard
shortcuts</a>
</li>
</ul>
<span class="border-divide"></span>
<ul class="acct_dropdown_bottom">
<li style="padding: 8px">
<a class="acct_dropdown_store" style="display: block;" role="menuitem" href="https://admin.shopify.com/"
target="_blank">
<p>David Micheal</p>
<p>[email protected]</p>
</a>
</li>
<li>
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Manage
Account</a>
</li>
<li style="margin-bottom: 0px">
<a class="acct_dropdown_store" role="menuitem" href="https://admin.shopify.com/" target="_blank">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="wrapper">
<div role="doc-notice" aria-roledescription="select a plan container" id="toastEl" class="toast"
aria-live="assertive" aria-atomic="true">
<div class="toast_info">
<p>Extend your trial for $1/month for 3 months on select plans.</p>
<button id="toastMobileCloseEl" class="toast_mobile_close" style="cursor: pointer" aria-label="Close toast">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.9697 15.0303C14.2626 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2626 15.0303 13.9697L11.0607 10L15.0303 6.03033C15.3232 5.73744 15.3232 5.26256 15.0303 4.96967C14.7374 4.67678 14.2626 4.67678 13.9697 4.96967L10 8.93934L6.03033 4.96967C5.73744 4.67678 5.26256 4.67678 4.96967 4.96967C4.67678 5.26256 4.67678 5.73744 4.96967 6.03033L8.93934 10L4.96967 13.9697C4.67678 14.2626 4.67678 14.7374 4.96967 15.0303C5.26256 15.3232 5.73744 15.3232 6.03033 15.0303L10 11.0607L13.9697 15.0303Z"
fill="#E3E3E3" />
</svg>
</button>
</div>
<div class="toast_action">
<a href="https://www.shopify.com/pricing" role="button" class="toast_btn" aria-label="Select a plan">Select a
plan</a>
<button id="toastDesktopCloseEl" class="toast_desktop_close" aria-label="Close select pricing notification">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.9697 15.0303C14.2626 15.3232 14.7374 15.3232 15.0303 15.0303C15.3232 14.7374 15.3232 14.2626 15.0303 13.9697L11.0607 10L15.0303 6.03033C15.3232 5.73744 15.3232 5.26256 15.0303 4.96967C14.7374 4.67678 14.2626 4.67678 13.9697 4.96967L10 8.93934L6.03033 4.96967C5.73744 4.67678 5.26256 4.67678 4.96967 4.96967C4.67678 5.26256 4.67678 5.73744 4.96967 6.03033L8.93934 10L4.96967 13.9697C4.67678 14.2626 4.67678 14.7374 4.96967 15.0303C5.26256 15.3232 5.73744 15.3232 6.03033 15.0303L10 11.0607L13.9697 15.0303Z"
fill="#E3E3E3" />
</svg>
</button>
</div>
</div>
<div role="contentinfo" aria-roledescription="guide to setup your store" class="setup_guide_wrapper">
<div class="setup_guide_top">
<div id="setupGuideTogglerEl" class="setup_guide_toggler">
<h1>Setup guide</h1>
<button class="setup-toggle-button" aria-label="Expand and collapse setup guide content info">
<svg role="button" id="setupGuideArrowEl" class="setupGuide_arrow" width="20" height="20"
viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.5303 12.2803C14.2374 12.5732 13.7626 12.5732 13.4697 12.2803L10 8.81066L6.53033 12.2803C6.23744 12.5732 5.76256 12.5732 5.46967 12.2803C5.17678 11.9874 5.17678 11.5126 5.46967 11.2197L9.46967 7.21967C9.76256 6.92678 10.2374 6.92678 10.5303 7.21967L14.5303 11.2197C14.8232 11.5126 14.8232 11.9874 14.5303 12.2803Z"
fill="#4A4A4A" />
</svg>
</button>
</div>
<p role="doc-subtitle" class="setup_guide_desc">
Use this personalized guide to get your store up and running.
</p>
<div class="progress">
<label for="progressEl" id="progressCountEl">0 / 5 completed</label>
<progress id="progressEl" value="0" max="100">0%</progress>
</div>
</div>
<div id="setupGuideBottomEl" class="setup_guide_bottom">
<div class="personalized_guides expanded_guide">
<div class="personalized_guides_inner">
<div class="check_wrapper">
<label class="check_container">
<input class="input_check" type="checkbox" id="customise_online_store" name="customise_online_store" />
<div class="checkmark">
<svg class="svg_check" width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.8162 5.64149C14.0603 5.88557 14.0603 6.2813 13.8162 6.52538L8.39954 11.942C8.15546 12.1861 7.75974 12.1861 7.51566 11.942L4.80733 9.23371C4.56325 8.98963 4.56325 8.5939 4.80733 8.34983C5.0514 8.10575 5.44713 8.10575 5.69121 8.34983L7.9576 10.6162L12.9323 5.64149C13.1764 5.39742 13.5721 5.39742 13.8162 5.64149Z"
fill="white" />
</svg>
</div>
</label>
</div>
<p class="expanded_guide_title">Customize your online store</p>
</div>
<div class="personalized_guides_details expanded_guide_details">
<div class="personalized_guides_details_info">
<p>
Choose a theme and add your logo, colors, and images to
reflect your brand.
<a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes"
target="_blank">Learn more</a>
</p>
<button class="primary_btn cus-btn">Customize theme</button>
</div>
<img src="https://crushingit.tech/hackathon-assets/customise-store.png"
alt="image with color palette and a brush on a canvas" />
</div>
</div>
<div class="personalized_guides">
<div class="personalized_guides_inner">
<div class="check_wrapper">
<label class="check_container">
<input class="input_check" type="checkbox" id="customise_online_store" name="customise_online_store" />
<div class="checkmark">
<svg class="svg_check" width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.8162 5.64149C14.0603 5.88557 14.0603 6.2813 13.8162 6.52538L8.39954 11.942C8.15546 12.1861 7.75974 12.1861 7.51566 11.942L4.80733 9.23371C4.56325 8.98963 4.56325 8.5939 4.80733 8.34983C5.0514 8.10575 5.44713 8.10575 5.69121 8.34983L7.9576 10.6162L12.9323 5.64149C13.1764 5.39742 13.5721 5.39742 13.8162 5.64149Z"
fill="white" />
</svg>
</div>
</label>
</div>
<p>Add your first product</p>
</div>
<div class="personalized_guides_details">
<div class="personalized_guides_details_info">
<p>
Write a description, add photos, and set pricing for the
products you plan to sell.
<a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes"
target="_blank">Learn more</a>
</p>
<button class="primary_btn cus-btn" style="margin-right: 3px">
Add product
</button>
<button class="tertiary_btn cus-btn">Import product</button>
</div>
<img src="https://crushingit.tech/hackathon-assets/product.png"
alt="image with color palette and a brush on a canvas" />
</div>
</div>
<div class="personalized_guides">
<div class="personalized_guides_inner">
<div class="check_wrapper">
<label class="check_container">
<input class="input_check" type="checkbox" id="customise_online_store" name="customise_online_store" />
<div class="checkmark">
<svg class="svg_check" width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.8162 5.64149C14.0603 5.88557 14.0603 6.2813 13.8162 6.52538L8.39954 11.942C8.15546 12.1861 7.75974 12.1861 7.51566 11.942L4.80733 9.23371C4.56325 8.98963 4.56325 8.5939 4.80733 8.34983C5.0514 8.10575 5.44713 8.10575 5.69121 8.34983L7.9576 10.6162L12.9323 5.64149C13.1764 5.39742 13.5721 5.39742 13.8162 5.64149Z"
fill="white" />
</svg>
</div>
</label>
</div>
<p>Add a custom domain</p>
</div>
<div class="personalized_guides_details">
<div class="personalized_guides_details_info">
<p>
Your current domain is 222219.myshopify.com but you can add a
custom domain to help customers find your online store.
<a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes"
target="_blank">Learn more</a>
</p>
<button class="primary_btn cus-btn">Add domain</button>
</div>
<img src="https://crushingit.tech/hackathon-assets/website.png"
alt="image with color palette and a brush on a canvas" />
</div>
</div>
<div class="personalized_guides">
<div class="personalized_guides_inner">
<div class="check_wrapper">
<label class="check_container">
<input class="input_check" type="checkbox" id="customise_online_store" name="customise_online_store" />
<div class="checkmark">
<svg class="svg_check" width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.8162 5.64149C14.0603 5.88557 14.0603 6.2813 13.8162 6.52538L8.39954 11.942C8.15546 12.1861 7.75974 12.1861 7.51566 11.942L4.80733 9.23371C4.56325 8.98963 4.56325 8.5939 4.80733 8.34983C5.0514 8.10575 5.44713 8.10575 5.69121 8.34983L7.9576 10.6162L12.9323 5.64149C13.1764 5.39742 13.5721 5.39742 13.8162 5.64149Z"
fill="white" />
</svg>
</div>
</label>
</div>
<p>Name your store</p>
</div>
<div class="personalized_guides_details">
<div class="personalized_guides_details_info">
<p>
Your temporary store name is currently Davii collections. The
store name appears in your admin and your online store.
<a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes"
target="_blank">Learn more</a>
</p>
<button class="primary_btn cus-btn">Name store</button>
</div>
<img src="https://crushingit.tech/hackathon-assets/name-store.png"
alt="image with color palette and a brush on a canvas" />
</div>
</div>
<div class="personalized_guides">
<div class="personalized_guides_inner">
<div class="check_wrapper">
<label class="check_container">
<input class="input_check" type="checkbox" id="customise_online_store" name="customise_online_store" />
<div class="checkmark">
<svg class="svg_check" width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.8162 5.64149C14.0603 5.88557 14.0603 6.2813 13.8162 6.52538L8.39954 11.942C8.15546 12.1861 7.75974 12.1861 7.51566 11.942L4.80733 9.23371C4.56325 8.98963 4.56325 8.5939 4.80733 8.34983C5.0514 8.10575 5.44713 8.10575 5.69121 8.34983L7.9576 10.6162L12.9323 5.64149C13.1764 5.39742 13.5721 5.39742 13.8162 5.64149Z"
fill="white" />
</svg>
</div>
</label>
</div>
<p>Set up a payment provider</p>
</div>
<div class="personalized_guides_details">
<div class="personalized_guides_details_info">
<p style="margin-top: 10px">
Choose a payment provider to start accepting payments. You’ll
need to create an account with the payment provider and set it
up with your Shopify store.
<a href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes"
target="_blank">Learn more</a>
</p>
<button class="primary_btn cus-btn">Set up payment</button>
</div>
<img src="https://crushingit.tech/hackathon-assets/payment.png"
alt="image with color palette and a brush on a canvas" />
</div>
</div>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>