-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
608 lines (294 loc) Β· 111 KB
/
search.xml
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
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>ThemeKit request failed after 5 retries with error (Network)</title>
<link href="/2024/05/08/ThemeKit-request-failed-after-5-retries-with-error/"/>
<url>/2024/05/08/ThemeKit-request-failed-after-5-retries-with-error/</url>
<content type="html"><![CDATA[<h1 id="Issue-warning-details"><a href="#Issue-warning-details" class="headerlink" title="Issue warning details"></a>Issue warning details</h1><blockquote><p>request failed after 5 retries with error: Get β<a href="https://theme-kit-access.shopifyapps.com/cli/meta.json"">https://theme-kit-access.shopifyapps.com/cli/meta.json"</a>: context deadline exceeded (Client.Timeout exceeded while awaiting headers)</p></blockquote><p>In my routine utilization of ThemeKit for Shopify theme development, I frequently encounter the aforementioned errors intermittently, which can indeed be vexing. Hence, this time, I endeavor to pinpoint the root cause and comprehensively resolve it.</p><p>I have previously authored an article addressing this issue. However, the method outlined in that article proved ineffective on this occasion as well. If you havenβt already read it, you may consider reviewing this article.</p><a href="/2023/04/06/Shopify-Theme-Kit-request-failed-after-5-retries-with-error/" title="Shopify Theme Kit request failed after 5 retries with error">Shopify Theme Kit request failed after 5 retries with error</a><h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>You are using a VPN, and you have to utilize it to support your daily development.</li><li>Iβm using <code>Clash</code></li></ul><h1 id="Reason"><a href="#Reason" class="headerlink" title="Reason"></a>Reason</h1><p>This time, Iβve realized that despite activating VPN for global proxy, Terminal might not be utilizing the proxy. Upon verification, itβs confirmed that executing <code>curl google.com</code> in Terminal doesnβt yield a response. This is also why I occasionally encounter this issue in my local environment.</p><h1 id="How-to-solve"><a href="#How-to-solve" class="headerlink" title="How to solve"></a>How to solve</h1><p>Check your Clash proxy port number.</p><img src="/2024/05/08/ThemeKit-request-failed-after-5-retries-with-error/20240508232108.jpg" class="" title="Clash settings"><p>Run the following code snippet in the Terminal.</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">export http_proxy=http://localhost:7890</span><br><span class="line">export https_proxy=http://localhost:7890</span><br></pre></td></tr></table></figure><p>Thus, the issue has been resolved this time. </p>]]></content>
<categories>
<category> Shopify </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Disable viewport zooming iOS 10+ safari?</title>
<link href="/2024/01/01/disable-viewport-zooming-iOS-10-safari/"/>
<url>/2024/01/01/disable-viewport-zooming-iOS-10-safari/</url>
<content type="html"><![CDATA[<p>Usually this code will workingοΌbut unfortunately on IOS10+ itβs not working.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0"</span>></span></span><br></pre></td></tr></table></figure><h1 id="How-to-solve"><a href="#How-to-solve" class="headerlink" title="How to solve"></a>How to solve</h1><p>After so many trying, I found the helpful solution on</p><p> <a href="https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari">https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari</a></p><p>Using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action">toch-action</a> solved my problem, simple but effective</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span>, <span class="selector-tag">body</span> {</span><br><span class="line"> touch-action: pan-x pan-y</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Shopify custom font OTS parsing error Size of decompressed WOFF 2.0 is less than compressed size</title>
<link href="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/"/>
<url>/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/</url>
<content type="html"><![CDATA[<h1 id="Issue-warning-details"><a href="#Issue-warning-details" class="headerlink" title="Issue warning details"></a>Issue warning details</h1><img src="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/20230615111254.jpg" class="" title="Warning"><h1 id="Reason"><a href="#Reason" class="headerlink" title="Reason"></a>Reason</h1><p>Currently, I am not aware of the underlying cause; I merely know that this predicament emerged subsequent to the update of the Shopify online editor.</p><h1 id="How-to-solve"><a href="#How-to-solve" class="headerlink" title="How to solve"></a>How to solve</h1><p>Kindly log in to your Shopify backend, and subsequently enter the term βfileβ within the search field.</p><img src="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/20230615111807.jpg" class="" title="search bar"><p>Proceed with the upload of the custom font file that you intend to utilize.</p><img src="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/20230615111853.jpg" class="" title="upload"><p>Upon successful completion of the upload, click on the option to copy the file link.</p><img src="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/20230615112114.jpg" class="" title="upload"><p>To finalize the process, incorporate the custom font CSS code into your theme.</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">"ConthraxSb"</span>;</span><br><span class="line"> <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">"https://cdn.shopify.com/s/files/1/0383/1608/1284/files/ConthraxSb-Regular.woff?v=1686799251"</span>) <span class="built_in">format</span>(<span class="string">"woff"</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><img src="/2023/06/15/Shopify-custom-font-OTS-parsing-error-Size-of-decompressed-WOFF-2-0-is-less-than-compressed-size/20230615113216.jpg" class="" title="fixed"><p>PSοΌWhile Shopify recommends using βfile_urlβ as the preferred method, at the time of my writing, βfile_urlβ still exhibits the same issue as βasset_urlβ. Therefore, in this instance, I directly copied the file link for reference.</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">@font-face {</span><br><span class="line"> font-family: "Font name";</span><br><span class="line"> src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How to set the default availability as in-stock for Search & Discovery?</title>
<link href="/2023/04/16/How-to-set-the-default-availability-as-in-stock-for-Search-Discovery/"/>
<url>/2023/04/16/How-to-set-the-default-availability-as-in-stock-for-Search-Discovery/</url>
<content type="html"><![CDATA[<h1 id="How-it-works"><a href="#How-it-works" class="headerlink" title="How it works"></a>How it works</h1><p>As Search & Discovery doesnβt support setting default filter values, we can only modify the collections link through JavaScript.</p><h1 id="Javascript-code"><a href="#Javascript-code" class="headerlink" title="Javascript code"></a>Javascript code</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">class</span> <span class="title class_">LinkModifier</span> {</span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">constructor</span>(<span class="params">blockedKeywords, defaultFilterOptions</span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">blockedKeywords</span> = blockedKeywords;</span></span><br><span class="line"><span class="language-javascript"> <span class="variable language_">this</span>.<span class="property">defaultFilterOptions</span> = defaultFilterOptions.<span class="title function_">join</span>(<span class="string">'&'</span>);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="title function_">modifyLinks</span>(<span class="params"></span>) {</span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// Find all <a> tags with an href attribute that contains "collections" but does not contain "products"</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">const</span> links = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'a[href*="collections"]:not([href*="products"])'</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// Modify the href attribute of all matching <a> tags by adding the default filter options to the end of the URL</span></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// If the URL already contains a query string, add "&" to the end; otherwise, add "?"</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i < links.<span class="property">length</span>; i++) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> href = links[i].<span class="title function_">getAttribute</span>(<span class="string">'href'</span>);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="comment">// Check if the current URL contains any of the blocked keywords, and skip if it does</span></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">blockedKeywords</span>.<span class="title function_">some</span>(<span class="function"><span class="params">keyword</span> =></span> href.<span class="title function_">includes</span>(keyword))) {</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">continue</span>;</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> separator = href.<span class="title function_">indexOf</span>(<span class="string">'?'</span>) !== -<span class="number">1</span> ? <span class="string">'&'</span> : <span class="string">'?'</span>;</span></span><br><span class="line"><span class="language-javascript"> href += separator + <span class="variable language_">this</span>.<span class="property">defaultFilterOptions</span>;</span></span><br><span class="line"><span class="language-javascript"> links[i].<span class="title function_">setAttribute</span>(<span class="string">'href'</span>, href);</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript">}</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// Create an instance of the LinkModifier class with an array of blocked keywords and default filter options</span></span></span><br><span class="line"><span class="language-javascript"><span class="keyword">const</span> linkModifier = <span class="keyword">new</span> <span class="title class_">LinkModifier</span>([<span class="string">'blocked'</span>, <span class="string">'keywords'</span>, <span class="string">'go'</span>, <span class="string">'here'</span>], [<span class="string">'filter.v.availability=1'</span>, <span class="string">'filter.v.color=red'</span>]);</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="comment">// Wait for the page to finish loading, then execute the modifyLinks method of the LinkModifier instance</span></span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">window</span>.<span class="title function_">addEventListener</span>(<span class="string">'load'</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="language-javascript"> linkModifier.<span class="title function_">modifyLinks</span>();</span></span><br><span class="line"><span class="language-javascript">});</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure><h1 id="How-to-use"><a href="#How-to-use" class="headerlink" title="How to use"></a>How to use</h1><ul><li>Online store > themes > Actions > Edit code > theme.liquid</li><li>Copy the code above and paste it before the <code></body></code> tag.</li><li>Find this piece of code. </li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> linkModifier = <span class="keyword">new</span> <span class="title class_">LinkModifier</span>([<span class="string">'blocked'</span>, <span class="string">'keywords'</span>, <span class="string">'go'</span>, <span class="string">'here'</span>], [<span class="string">'filter.v.availability=1'</span>, <span class="string">'filter.v.color=red'</span>]);</span><br></pre></td></tr></table></figure><p>If we want some pages to not have default filter options, we can add those collection handles in the first parameter. If not, keep the array empty <code>[]</code>.</p><p>The second parameter is for the parameters that you wish to set as defaults, with the format of <code>filter name=filter value</code>.</p>]]></content>
<categories>
<category> Shopify </category>
<category> Search & Discovery </category>
<category> Theme </category>
<category> Filter </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
<tag> Search & Discovery </tag>
<tag> Filter </tag>
</tags>
</entry>
<entry>
<title>Shopify Theme Kit request failed after 5 retries with error</title>
<link href="/2023/04/06/Shopify-Theme-Kit-request-failed-after-5-retries-with-error/"/>
<url>/2023/04/06/Shopify-Theme-Kit-request-failed-after-5-retries-with-error/</url>
<content type="html"><![CDATA[<blockquote><p>request failed after 5 retries with error: Get β<a href="https://theme-kit-access.shopifyapps.com/cli/meta.json"">https://theme-kit-access.shopifyapps.com/cli/meta.json"</a>: context deadline exceeded (Client.Timeout exceeded while awaiting headers)</p></blockquote><h1 id="Environment"><a href="#Environment" class="headerlink" title="Environment"></a>Environment</h1><ul><li>OS: macOs Ventura 13.3, chip M1 MAX</li><li>Themekit version: ThemeKit 1.3.1</li></ul><h1 id="How-I-resolved-it"><a href="#How-I-resolved-it" class="headerlink" title="How I resolved it?"></a>How I resolved it?</h1><p>I utilized the password generated by a private app instead of <a href="https://shopify.dev/docs/themes/tools/theme-access">Theme Access app</a>.</p><p>If you have also begun utilizing Theme Kit based on <a href="https://shopify.dev/docs/themes/tools/theme-kit/getting-started">Theme kit getting started</a>, we may possibly encounter similar issues.</p><p>If you have attempted numerous methods and still have not attained a solution, perhaps you should abandon the utilization of the theme access app, as I did.</p><p>Although we might see such prompts, but it does not matter. After all, theme access is unusable for us. π
</p><img src="/2023/04/06/Shopify-Theme-Kit-request-failed-after-5-retries-with-error/20230406100422.jpg" class="" title="warning"><h1 id="Troubleshooting"><a href="#Troubleshooting" class="headerlink" title="Troubleshooting"></a>Troubleshooting</h1><p>If the aforementioned method did not resolve your issue, you can attempt to follow this thought process to search for an answer.</p><p>Here are some of the tests I have performed:</p><ul><li>Create a new theme access password and ensure that the password is correct.</li><li>Verify if the firewall has been enabled.</li><li>Update Theme Kit to the latest version.</li><li>Try using a different device.</li><li>Try using a different operating system. I tested on both macOS and Windows 10.</li><li>Test while utilizing VPN with global proxy, and try different country nodes.</li><li>Try using mobile data as a hotspot.</li><li>Try testing with different Shopify stores.</li></ul><h1 id="End"><a href="#End" class="headerlink" title="End"></a>End</h1><p>If you have any other solutions, please feel free to leave a comment to facilitate learning and discussion among everyone.</p>]]></content>
<categories>
<category> Shopify </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Range settings must have at most 101 steps</title>
<link href="/2023/03/18/Range-settings-must-have-at-most-101-steps/"/>
<url>/2023/03/18/Range-settings-must-have-at-most-101-steps/</url>
<content type="html"><![CDATA[<img src="/2023/03/18/Range-settings-must-have-at-most-101-steps/20230318175502.jpg" class="" title="Range step issue"><p>You may have same issue when setting shopify range step. </p><p>It means you can only have 100 <code>step</code> between <code>min</code> and <code>max</code></p><p>For example</p><p>When <code>step</code> is 1</p><p>You can setting <code>min</code> 0 and <code>max</code> 100</p><p>When <code>step</code> is 10</p><p>You can setting <code>min</code> 0 and <code>max</code> 1000</p><p>Following this rule, issue will gone! π</p>]]></content>
<categories>
<category> Shopify </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How to remove "sort by" option - Dawn theme Shopify</title>
<link href="/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/"/>
<url>/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li><li>Online store > themes > Actions > Edit code (Code editor)</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/20230104135507.jpg" class="" title="Collection sort by"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="facets-liquid"><a href="#facets-liquid" class="headerlink" title="facets.liquid"></a>facets.liquid</h3><p>1: Assign option name you want to hide (name connect with β + β )</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">assign sort_by_hidden_options = 'Best selling + Price, low to high' | split: ' + '</span><br></pre></td></tr></table></figure><img src="/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/20230104140455.jpg" class="" title="option name"><p>2: <code>Ctrl + F</code> Search keyword <code>{%- for option in results.sort_options -%}</code>, insert this code after it</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{%- if sort_by_hidden_options contains option.name -%}</span><br><span class="line"> {%- continue -%}</span><br><span class="line">{%- endif -%}</span><br></pre></td></tr></table></figure><p>Ps: there are multiple line need to add</p><img src="/2023/01/04/How-to-remove-sort-by-option-Dawn-theme-Shopify/20230104141000.jpg" class="" title="sort by code"><p>3: Save</p>]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Sticky Header - Dawn Theme Shopify (Update)</title>
<link href="/2022/10/02/Sticky-Header-Dawn-Theme-Shopify/"/>
<url>/2022/10/02/Sticky-Header-Dawn-Theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/10/02/Sticky-Header-Dawn-Theme-Shopify/chrome-capture-2022-7-27.gif" class="" title="sticky header"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="header-liquid"><a href="#header-liquid" class="headerlink" title="header.liquid"></a>header.liquid</h3><ul><li>Online store > themes > Actions > Edit code > Sections > header.liquid</li><li>change class <code>section-header</code> to <code> section-header shopify-section-header-sticky</code></li></ul><img src="/2022/10/02/Sticky-Header-Dawn-Theme-Shopify/Dingtalk_20221002200127.jpg" class="" title="sticky class"><h3 id="Settings"><a href="#Settings" class="headerlink" title="Settings"></a>Settings</h3><p>remember to disable sticky settings.</p><img src="/2022/10/02/Sticky-Header-Dawn-Theme-Shopify/Dingtalk_20221002200600.jpg" class="" title="disable sticky">]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Display the date, like "May 5th", using Liquid strftime?</title>
<link href="/2022/09/28/Display-the-date-like-May-5th-using-Liquid-strftime/"/>
<url>/2022/09/28/Display-the-date-like-May-5th-using-Liquid-strftime/</url>
<content type="html"><![CDATA[<h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/09/28/Display-the-date-like-May-5th-using-Liquid-strftime/Kani_0-1664333338151.png" class="" title="Date example"><h2 id="How-to-do-it"><a href="#How-to-do-it" class="headerlink" title="How to do it"></a>How to do it</h2><p><a href="http://strftime.net/">Strftime</a> doesnβt allow you to format a date with a suffix. </p><p>So we can build filter to get the correct suffix.</p><img src="/2022/09/28/Display-the-date-like-May-5th-using-Liquid-strftime/d01373f082025aaf375d185af1edab64034f1a37.webp" class="" title="Date rules"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{% assign day = "now" | date: "%e"| modulo: 10 %}</span><br><span class="line">{%- case day -%}</span><br><span class="line"> {%- when 1 -%}</span><br><span class="line"> {% assign suffix = 'st' %}</span><br><span class="line"> {%- when 2 -%}</span><br><span class="line"> {% assign suffix = 'nd' %}</span><br><span class="line"> {%- when 3 -%}</span><br><span class="line"> {% assign suffix = 'rd' %}</span><br><span class="line"> {%- else -%}</span><br><span class="line"> {% assign suffix = 'th' %}</span><br><span class="line">{%- endcase -%}</span><br><span class="line">{{ "now" | date: "%e[S] %B, %Y" | replace: '[S]',suffix }}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> Liquid </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
<tag> Liquid </tag>
</tags>
</entry>
<entry>
<title>Add Simple countdown timer to your shopify store via JavaScript</title>
<link href="/2022/08/28/Add-Simple-countdown-timer-to-your-shopify-store-via-JavaScript/"/>
<url>/2022/08/28/Add-Simple-countdown-timer-to-your-shopify-store-via-JavaScript/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/28/Add-Simple-countdown-timer-to-your-shopify-store-via-JavaScript/chrome-capture-2022-7-28.gif" class="" title="Countdown in AnnouncementBar"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="flash-sale-script-liquid"><a href="#flash-sale-script-liquid" class="headerlink" title="flash-sale-script.liquid"></a>flash-sale-script.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Snippets > β Create a new snippet</p></li><li><p>Paste code and save </p></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> Javascript count down timer</span></span><br><span class="line"><span class="comment"> data format: 2021-10-7 18:00:00</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> (<span class="keyword">function</span> (<span class="params"></span>) {</span><br><span class="line"></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">convertDateForIos</span>(<span class="params">date</span>) {</span><br><span class="line"> <span class="keyword">var</span> arr = date.<span class="title function_">split</span>(<span class="regexp">/[- :]/</span>);</span><br><span class="line"> date = <span class="keyword">new</span> <span class="title class_">Date</span>(arr[<span class="number">0</span>], arr[<span class="number">1</span>]-<span class="number">1</span>, arr[<span class="number">2</span>], arr[<span class="number">3</span>], arr[<span class="number">4</span>], arr[<span class="number">5</span>]).<span class="title function_">getTime</span>();</span><br><span class="line"> <span class="keyword">return</span> date;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">const</span> second = <span class="number">1000</span>,</span><br><span class="line"> minute = second * <span class="number">60</span>,</span><br><span class="line"> hour = minute * <span class="number">60</span>,</span><br><span class="line"> day = hour * <span class="number">24</span>;</span><br><span class="line"> <span class="comment">// get all timer placeholder by class</span></span><br><span class="line"> <span class="keyword">const</span> timers = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">'.CountdownTimer'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> endDay = <span class="string">"2022-08-29 18:00:00"</span>,</span><br><span class="line"> countDown = <span class="title function_">convertDateForIos</span>(endDay);</span><br><span class="line"> <span class="keyword">let</span> x = <span class="string">''</span>;</span><br><span class="line"> <span class="keyword">let</span> timerHtml = <span class="string">''</span>;</span><br><span class="line"> x = <span class="built_in">setInterval</span>(<span class="keyword">function</span> <span class="title function_">ins1</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="comment">// lock time zone</span></span><br><span class="line"> <span class="keyword">let</span> c = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toLocaleString</span>(<span class="string">'en-US'</span>, { <span class="attr">timeZone</span>: <span class="string">'Europe/London'</span> });</span><br><span class="line"> <span class="keyword">let</span> sensibleFormat = <span class="keyword">new</span> <span class="title class_">Date</span>(c);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">let</span> now = sensibleFormat.<span class="title function_">getTime</span>(),</span><br><span class="line"> distance = countDown - now;</span><br><span class="line"> <span class="keyword">let</span> dayText = <span class="title class_">Math</span>.<span class="title function_">floor</span>(distance / (day));</span><br><span class="line"> <span class="keyword">let</span> hoursText = <span class="title class_">Math</span>.<span class="title function_">floor</span>((distance % (day)) / (hour));</span><br><span class="line"> <span class="keyword">let</span> minutesText = <span class="title class_">Math</span>.<span class="title function_">floor</span>((distance % (hour)) / (minute));</span><br><span class="line"> <span class="keyword">let</span> secondText = <span class="title class_">Math</span>.<span class="title function_">floor</span>((distance % (minute)) / second);</span><br><span class="line"> <span class="keyword">if</span>(dayText){</span><br><span class="line"> timerHtml = <span class="string">'<b>'</span>+dayText+<span class="string">'</b>d <b>'</span>+hoursText+<span class="string">'</b>h <b>'</span>+minutesText+<span class="string">'</b>m <b>'</span>+secondText.<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>, <span class="string">'0'</span>)+<span class="string">'</b>s'</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> timerHtml = <span class="string">'<b>'</span>+hoursText+<span class="string">'h '</span>+minutesText+<span class="string">'m '</span>+secondText+<span class="string">'s</b>'</span>;</span><br><span class="line"> }</span><br><span class="line"> timers.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">element</span>){</span><br><span class="line"> element.<span class="property">innerHTML</span> = timerHtml;</span><br><span class="line"> });</span><br><span class="line"> <span class="comment">//do something later when date is reached</span></span><br><span class="line"> <span class="keyword">if</span> (distance < <span class="number">0</span>) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(x);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> ins1;</span><br><span class="line"> <span class="comment">//seconds</span></span><br><span class="line"> }(), <span class="number">1000</span>);</span><br><span class="line"> }());</span><br><span class="line"></span><br><span class="line"></script></span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="theme-liquid"><a href="#theme-liquid" class="headerlink" title="theme.liquid"></a>theme.liquid</h3><p>Paste code before <code></body></code></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% include 'flash-sale-script' %}</span><br></pre></td></tr></table></figure><h2 id="How-to-use"><a href="#How-to-use" class="headerlink" title="How to use"></a>How to use</h2><h3 id="announcement-bar-liquid"><a href="#announcement-bar-liquid" class="headerlink" title="announcement-bar.liquid"></a>announcement-bar.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > announcement-bar</p></li><li><p>Paste code at the position you want ( timer is right after announcement bar text</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="CountdownTimer"></span></span><br></pre></td></tr></table></figure><img src="/2022/08/28/Add-Simple-countdown-timer-to-your-shopify-store-via-JavaScript/Dingtalk_20220828185824.jpg" class="" title="AnnouncementBar code">]]></content>
<categories>
<category> Shopify </category>
<category> JavaScript </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Theme </tag>
<tag> JavaScript </tag>
</tags>
</entry>
<entry>
<title>Most-Used Shopify script conditions</title>
<link href="/2022/08/28/Most-Used-Shopify-script-conditions/"/>
<url>/2022/08/28/Most-Used-Shopify-script-conditions/</url>
<content type="html"><![CDATA[<blockquote><p>Shopify Scripts are small pieces of code that let you create personalized experiences for your customers in their cart and at checkout. <a href="https://help.shopify.com/en/manual/checkout-settings/script-editor">learn more</a></p></blockquote><h2 id="run-only-code-applied"><a href="#run-only-code-applied" class="headerlink" title="run only code applied"></a>run only code applied</h2><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> Input.cart.discount_code != <span class="literal">nil</span> <span class="keyword">and</span> Input.cart.discount_code.code == <span class="string">"Your code"</span></span><br><span class="line"> <span class="comment">#code here</span></span><br><span class="line"><span class="keyword">end</span></span><br></pre></td></tr></table></figure><h2 id="customer-is-not-empty-and-email-contains-target-domain"><a href="#customer-is-not-empty-and-email-contains-target-domain" class="headerlink" title="customer is not empty and email contains target domain"></a>customer is not empty and email contains target domain</h2><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">TARGET_DOMAIN</span> = <span class="string">'companydomain.com'</span></span><br><span class="line">customer = Input.cart.customer</span><br><span class="line"><span class="keyword">if</span> customer <span class="keyword">and</span> customer.email <span class="keyword">and</span> customer.email.<span class="keyword">include</span>?(<span class="variable constant_">TARGET_DOMAIN</span>)</span><br><span class="line"> <span class="comment">#code here</span></span><br><span class="line"><span class="keyword">end</span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> Shopify Script </category>
<category> Script Editor </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Shopify Script </tag>
<tag> Script Editor </tag>
</tags>
</entry>
<entry>
<title>Hiding a page from search engines</title>
<link href="/2022/08/27/Hiding-a-page-from-search-engines/"/>
<url>/2022/08/27/Hiding-a-page-from-search-engines/</url>
<content type="html"><![CDATA[<blockquote><p>You can hide pages that are not included in your <code>robots.txt.liquid</code> file by customizing the <code><head></code> section of your storeβs <code>theme.liquid</code> layout file. You need to include some code to noindex particular pages.</p></blockquote><ul><li>From your Shopify admin, go to Online Store > Themes.</li><li>Find the theme you want to edit, and then click Actions > Edit code.</li><li>Click the theme.liquid layout file.</li><li>paste the following code in the <code><head></code> section:</li></ul><h3 id="Hiding-βAll-Collectionβ-page"><a href="#Hiding-βAll-Collectionβ-page" class="headerlink" title="Hiding βAll Collectionβ page"></a>Hiding βAll Collectionβ page</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% if template == 'list-collections' %}</span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"noindex"</span>></span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><h3 id="Hiding-βSearchβ-page"><a href="#Hiding-βSearchβ-page" class="headerlink" title="Hiding βSearchβ page"></a>Hiding βSearchβ page</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% if template contains 'search' %}</span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"noindex"</span>></span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><h3 id="Hiding-a-specific-page-by-handle"><a href="#Hiding-a-specific-page-by-handle" class="headerlink" title="Hiding a specific page by handle"></a>Hiding a specific page by handle</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% if page.handle contains 'page-handle-you-want-to-exclude' %}</span><br><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"noindex"</span>></span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> SEO </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> SEO </tag>
</tags>
</entry>
<entry>
<title>Add free shipping progress bar - Dawn theme shopify</title>
<link href="/2022/08/23/Add-free-shipping-progress-bar-Dawn-theme-shopify/"/>
<url>/2022/08/23/Add-free-shipping-progress-bar-Dawn-theme-shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/23/Add-free-shipping-progress-bar-Dawn-theme-shopify/chrome-capture-2022-7-23.gif" class="" title="free shipping bar"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="main-product-liquid"><a href="#main-product-liquid" class="headerlink" title="main-product.liquid"></a>main-product.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Snippets > cart-drawer.liquid</p></li><li><p>find <code>{%- if cart != empty -%}</code></p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{%- if settings.cart_show_free_shipping_threshold -%}</span><br><span class="line"> {%- render 'cart-progress-bar' -%}</span><br><span class="line">{%- endif -%}</span><br></pre></td></tr></table></figure><h3 id="cart-progress-bar-liquid"><a href="#cart-progress-bar-liquid" class="headerlink" title="cart-progress-bar.liquid"></a>cart-progress-bar.liquid</h3><ul><li><p>Snippets > cart-progress-bar.liquid</p></li><li><p>paste code</p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">{% style %}</span><br><span class="line">.progress-bar {</span><br><span class="line"> height: 2px;</span><br><span class="line"> background: #fcfbf7;</span><br><span class="line"> border-radius: 3px;</span><br><span class="line"> margin: 10px auto; }</span><br><span class="line"></span><br><span class="line">.progress-percentage {</span><br><span class="line"> height: 2px;</span><br><span class="line"> background: #e56d6b;</span><br><span class="line"> border-radiud: 3px;</span><br><span class="line"> position: relative;</span><br><span class="line"> animation: fillBars 2.5s 1;</span><br><span class="line"> display: block!important;</span><br><span class="line">}</span><br><span class="line">.Cart__ShippingProgress {</span><br><span class="line"> background: #f0ebe5;</span><br><span class="line"> padding: 1rem 1.5rem;</span><br><span class="line"> margin-bottom: 1.5rem;</span><br><span class="line">}</span><br><span class="line">@keyframes fillBars {</span><br><span class="line"> from {</span><br><span class="line"> width: 0; </span><br><span class="line"> }</span><br><span class="line"> to {</span><br><span class="line"> width: 100%; </span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">{% endstyle %}</span><br><span class="line"></span><br><span class="line">{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}</span><br><span class="line">{%- assign free_standard_threshold_in_cents = settings.cart_free_standard_shipping_threshold | times: 100 -%}</span><br><span class="line">{%- assign free_shipping_percentage = cart.total_price | times: 100 | divided_by: threshold_in_cents -%}</span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"Cart__ShippingProgress"</span> <span class="attr">data-cart-total-price</span>=<span class="string">"{{cart.total_price}}"</span> <span class="attr">data-free-standard-threshold-in-cents</span>=<span class="string">"{{free_standard_threshold_in_cents}}"</span> <span class="attr">data-threshold-in-cents</span>=<span class="string">"{{threshold_in_cents}}"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"Drawer__Container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress-bar"</span>></span><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"progress-percentage"</span> <span class="attr">per</span>=<span class="string">"{{ free_shipping_percentage }}%"</span> <span class="attr">style</span>=<span class="string">"max-width:{{ free_shipping_percentage }}%"</span>></span><span class="tag"></<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> {%- if cart.total_price >= threshold_in_cents -%}</span><br><span class="line"> <span class="tag"><<span class="name">small</span>></span>{{- 'sections.cart.free_shipping' | t -}}<span class="tag"></<span class="name">small</span>></span></span><br><span class="line"> {%- else -%}</span><br><span class="line"> {%- capture remaining_amount -%}<span class="tag"><<span class="name">span</span> <span class="attr">data-money-convertible</span>></span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}<span class="tag"></<span class="name">span</span>></span>{%- endcapture -%}</span><br><span class="line"> <span class="tag"><<span class="name">small</span>></span>{{- 'sections.cart.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}<span class="tag"></<span class="name">small</span>></span></span><br><span class="line"> {%- endif -%}</span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p>Locales > en.default.json. Insert translations settings</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">"free_shipping"</span><span class="punctuation">:</span> <span class="string">"You are eligible for free shipping!"</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">"free_shipping_remaining_html"</span><span class="punctuation">:</span> <span class="string">"Spend {{remaining_amount}} more and get free shipping!"</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure><img src="/2022/08/23/Add-free-shipping-progress-bar-Dawn-theme-shopify/Dingtalk_20220823212801.jpg" class="" title="Insert translations"><h2 id="How-to-use"><a href="#How-to-use" class="headerlink" title="How to use"></a>How to use</h2><ul><li><p>Online store > themes > Customize</p></li><li><p>Theme settings > Cart</p></li></ul><img src="/2022/08/23/Add-free-shipping-progress-bar-Dawn-theme-shopify/Dingtalk_20220823213321.jpg" class="" title="enable progress bar">]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Add color swatch (basic) - Dawn Theme Shopify</title>
<link href="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/"/>
<url>/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220818233829.jpg" class="" title="color swatch"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="main-product-liquid"><a href="#main-product-liquid" class="headerlink" title="main-product.liquid"></a>main-product.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > main-product.liquid</p></li><li><p>replace</p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"</span>></span></span><br><span class="line"> {{ value }}</span><br><span class="line"><span class="tag"></<span class="name">label</span>></span></span><br></pre></td></tr></table></figure><p>with</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">%- if section.settings.enable_color_swatch -%}</span><br><span class="line"> {%- include 'color-swatch' -%}</span><br><span class="line">{%- else -%}</span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"</span>></span></span><br><span class="line"> {{ value }}</span><br><span class="line"> <span class="tag"></<span class="name">label</span>></span></span><br><span class="line">{%- endif -%}</span><br></pre></td></tr></table></figure><ul><li>edit schema content. insert this at last of json</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"type"</span><span class="punctuation">:</span> <span class="string">"header"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"content"</span><span class="punctuation">:</span> <span class="string">"t:sections.main-product.settings.color_swatch.label"</span></span><br><span class="line"><span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"type"</span><span class="punctuation">:</span> <span class="string">"checkbox"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"id"</span><span class="punctuation">:</span> <span class="string">"enable_color_swatch"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"default"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"label"</span><span class="punctuation">:</span> <span class="string">"t:sections.main-product.settings.enable_color_swatch.label"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220818234640.jpg" class="" title="add enable setting"><h3 id="en-default-schema-json"><a href="#en-default-schema-json" class="headerlink" title="en.default.schema.json"></a>en.default.schema.json</h3><p>Locales > en.default.schema.json. Insert translations settings</p><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220818235507.jpg" class="" title="translation"><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">,</span></span><br><span class="line"><span class="attr">"color_swatch"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"label"</span><span class="punctuation">:</span> <span class="string">"Color swatch"</span></span><br><span class="line"><span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">"enable_color_swatch"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"label"</span><span class="punctuation">:</span> <span class="string">"Enable color swatch"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><h3 id="base-css"><a href="#base-css" class="headerlink" title="base.css"></a>base.css</h3><ul><li><p>Assets > base.css ( if you have a custom css file, then please paste in there)</p></li><li><p>paste code at last </p></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> color swatch </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-class">.kani-color-swatch</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">36px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">36px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span><span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span><span class="meta">!important</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#fff</span><span class="meta">!important</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">variant-radios <span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">"radio"</span>]</span><span class="selector-pseudo">:checked</span>+<span class="selector-class">.kani-color-swatch</span> {</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">1px</span> <span class="number">#838383</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.kani-color-swatch</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">width</span>: <span class="built_in">calc</span>(<span class="number">100%</span> + <span class="number">8px</span>);</span><br><span class="line"> <span class="attribute">height</span>: <span class="built_in">calc</span>(<span class="number">100%</span> + <span class="number">8px</span>);</span><br><span class="line"> <span class="attribute">top</span>: -<span class="number">4px</span>;</span><br><span class="line"> <span class="attribute">left</span>: -<span class="number">4px</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.kani-color-swatch</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#e3e3e3</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="color-swatch-liquid"><a href="#color-swatch-liquid" class="headerlink" title="color-swatch.liquid"></a>color-swatch.liquid</h3><p>Snippets > β Create a new snippet</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">{%- assign downcase_option = option.name | downcase -%}</span><br><span class="line">{%- assign downcase_value = value | downcase -%}</span><br><span class="line">{%- if downcase_option contains 'color'-%}</span><br><span class="line"> <span class="tag"><<span class="name">label</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">class</span>=<span class="string">"kani-color-swatch"</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">data-bg-color</span>=<span class="string">"{{ downcase_value | downcase }}"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">style</span>=<span class="string">"background-color:{{ downcase_value | downcase }}"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">for</span>=<span class="string">"{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"</span></span></span><br><span class="line"><span class="tag"> <span class="attr">title</span>=<span class="string">"{{ value | escape }}"</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">label</span>></span></span><br><span class="line">{%- else -%}</span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"</span>></span></span><br><span class="line"> {{ value }}</span><br><span class="line"> <span class="tag"></<span class="name">label</span>></span></span><br><span class="line">{%- endif -%}</span><br></pre></td></tr></table></figure><h2 id="Enable-color-swatch"><a href="#Enable-color-swatch" class="headerlink" title="Enable color swatch"></a>Enable color swatch</h2><p>Online store > Customize</p><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220819000250.jpg" class="" title="product"><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220818234821.jpg" class="" title="enable setting"><h2 id="Important"><a href="#Important" class="headerlink" title="Important"></a>Important</h2><p>Product options name should include <code>color</code> word</p><img src="/2022/08/18/Add-color-swatch-basic-Dawn-Theme-Shopify/Dingtalk_20220819000032.jpg" class="" title="option name">]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How To Change " Buy It Now " Button Text</title>
<link href="/2022/08/18/How-To-Change-Buy-It-Now-Button-Text/"/>
<url>/2022/08/18/How-To-Change-Buy-It-Now-Button-Text/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/18/How-To-Change-Buy-It-Now-Button-Text/Kani_0-1660818384875.png" class="" title="Buy It Now"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="main-product-liquid"><a href="#main-product-liquid" class="headerlink" title="main-product.liquid"></a>main-product.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > main-product.liquid</p></li><li><p>replace </p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{{ form | payment_button }}</span><br></pre></td></tr></table></figure><p>with</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"shopify-payment-button__button shopify-payment-button__button--unbranded"</span> <span class="attr">onclick</span>=<span class="string">"document.querySelector('[data-testid]').click();"</span>></span></span><br><span class="line"> // edit text here</span><br><span class="line"> Custom Text</span><br><span class="line"><span class="tag"></<span class="name">button</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"display:none;"</span>></span></span><br><span class="line"> {{ form | payment_button }}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How to add infinite scroll collection - Dawn Theme Shopify</title>
<link href="/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/"/>
<url>/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/chrome-capture-2022-7-16.gif" class="" title="Infinite scroll"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="main-collection-product-grid-liquid"><a href="#main-collection-product-grid-liquid" class="headerlink" title="main-collection-product-grid.liquid"></a>main-collection-product-grid.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > main-collection-product-grid.liquid</p></li><li><p>Insert this code before <code>{% schema %}</code></p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% include 'collection-infinite-scroll' %}</span><br></pre></td></tr></table></figure><img src="/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/Dingtalk_20220816225008.jpg" class="" title="collection-infinite-scroll.liquid"><ul><li>find <code>pagination</code></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{%- if paginate.pages > 1 -%}</span><br><span class="line"> {% render 'pagination', paginate: paginate, anchor: '' %}</span><br><span class="line">{%- endif -%}</span><br></pre></td></tr></table></figure><ul><li>And insert this code after it</li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">{% if paginate.next %}</span><br><span class="line"> <a class="pagination__next" href="{{ paginate.next.url }}"></span><br><span class="line"> </span><br><span class="line"> </a></span><br><span class="line"> <!-- status elements --></span><br><span class="line"> <div class="scroller-status"></span><br><span class="line"> <div class="loader-ellips"></span><br><span class="line"> <span class="loader-ellips__dot"></span></span><br><span class="line"> <span class="loader-ellips__dot"></span></span><br><span class="line"> <span class="loader-ellips__dot"></span></span><br><span class="line"> <span class="loader-ellips__dot"></span></span><br><span class="line"> </div></span><br><span class="line"> <p class="infinite-scroll-last" style="text-align:center;">End of content</p></span><br><span class="line"> <p class="infinite-scroll-error" style="text-align:center;">No more pages to load</p></span><br><span class="line"> </div></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><img src="/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/20230401122147.jpg" class="" title="paginate"><h3 id="collection-infinite-scroll-liquid"><a href="#collection-infinite-scroll-liquid" class="headerlink" title="collection-infinite-scroll.liquid"></a>collection-infinite-scroll.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Snippets > β Create a new snippet</p></li><li><p>Paste code and save </p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line">{{ 'infinite-scroll.pkgd.min.js' | asset_url | script_tag }}</span><br><span class="line"><script></span><br><span class="line"> (function() {</span><br><span class="line"> // init InfiniteScroll</span><br><span class="line"> function initInfScroll() {</span><br><span class="line"> let elem = document.querySelector('#product-grid');</span><br><span class="line"> let infScroll = new InfiniteScroll( elem, {</span><br><span class="line"> // options</span><br><span class="line"> path: '.pagination__next',</span><br><span class="line"> append: '.product-grid .grid__item',</span><br><span class="line"> status: '.scroller-status',</span><br><span class="line"> hideNav: '.pagination-wrapper',</span><br><span class="line"> history: false</span><br><span class="line"> });</span><br><span class="line"> infScroll.on( 'last', function( body, path ) {</span><br><span class="line"> let status = document.querySelector('.scroller-status');</span><br><span class="line"> status.remove();</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> // run InfiniteScroll</span><br><span class="line"> initInfScroll();</span><br><span class="line"> // re-bind InfiniteScroll when new items inserted</span><br><span class="line"> let elem = document.querySelector('#ProductGridContainer');</span><br><span class="line"> elem.addEventListener("DOMNodeInserted", function (e) {</span><br><span class="line"> try {</span><br><span class="line"> initInfScroll();</span><br><span class="line"> } catch (error) {</span><br><span class="line"> }</span><br><span class="line"> }, false);</span><br><span class="line"> })();</span><br><span class="line"></script></span><br><span class="line"><style></span><br><span class="line"> .loader-ellips {</span><br><span class="line"> font-size: 20px; /* change size here */</span><br><span class="line"> position: relative;</span><br><span class="line"> width: 4em;</span><br><span class="line"> height: 1em;</span><br><span class="line"> margin: 10px auto;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .loader-ellips__dot {</span><br><span class="line"> display: block;</span><br><span class="line"> width: 1em;</span><br><span class="line"> height: 1em;</span><br><span class="line"> border-radius: 0.5em;</span><br><span class="line"> background: #555; /* change color here */</span><br><span class="line"> position: absolute;</span><br><span class="line"> animation-duration: 0.5s;</span><br><span class="line"> animation-timing-function: ease;</span><br><span class="line"> animation-iteration-count: infinite;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .loader-ellips__dot:nth-child(1),</span><br><span class="line"> .loader-ellips__dot:nth-child(2) {</span><br><span class="line"> left: 0;</span><br><span class="line"> }</span><br><span class="line"> .loader-ellips__dot:nth-child(3) { left: 1.5em; }</span><br><span class="line"> .loader-ellips__dot:nth-child(4) { left: 3em; }</span><br><span class="line"> </span><br><span class="line"> @keyframes reveal {</span><br><span class="line"> from { transform: scale(0.001); }</span><br><span class="line"> to { transform: scale(1); }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> @keyframes slide {</span><br><span class="line"> to { transform: translateX(1.5em) }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .loader-ellips__dot:nth-child(1) {</span><br><span class="line"> animation-name: reveal;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .loader-ellips__dot:nth-child(2),</span><br><span class="line"> .loader-ellips__dot:nth-child(3) {</span><br><span class="line"> animation-name: slide;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> .loader-ellips__dot:nth-child(4) {</span><br><span class="line"> animation-name: reveal;</span><br><span class="line"> animation-direction: reverse;</span><br><span class="line"> }</span><br><span class="line"></style></span><br></pre></td></tr></table></figure><h3 id="Infinite-Scroll"><a href="#Infinite-Scroll" class="headerlink" title="Infinite Scroll"></a>Infinite Scroll</h3><ul><li>download <a href="https://infinite-scroll.com/">infinite-scroll.pkgd.min.js</a> . οΌdonβt forget to start β it on GitHub. </li></ul><img src="/2022/08/16/How-to-add-infinite-scroll-collection-Dawn-Theme-Shopify/Dingtalk_20220816230003.jpg" class="" title="infinite scroll download page"><ul><li><p>Online store > themes > Actions > Edit code > Assets > β Add a new asset</p></li><li><p>Upload the file you just download</p></li></ul><p>Thatβs all! π</p>]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How to add red dot at header menu - Dawn theme Shopify</title>
<link href="/2022/08/15/How-to-add-red-dot-at-header-menu-Dawn-theme-Shopify/"/>
<url>/2022/08/15/How-to-add-red-dot-at-header-menu-Dawn-theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/15/How-to-add-red-dot-at-header-menu-Dawn-theme-Shopify/Dingtalk_20220815215305.jpg" class="" title="Edit red dot sale link"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="header-liquid"><a href="#header-liquid" class="headerlink" title="header.liquid"></a>header.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > header.liquid</p></li><li><p>replace code ( default code at line 437 and 482 )</p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"{{ link.url }}"</span> <span class="attr">class</span>=<span class="string">"header__menu-item header__menu-item list-menu__item link link--text focus-inset"</span>{% <span class="attr">if</span> <span class="attr">link.current</span> %} <span class="attr">aria-current</span>=<span class="string">"page"</span>{% <span class="attr">endif</span> %}></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> {%<span class="attr">-</span> <span class="attr">if</span> <span class="attr">link.current</span> %} <span class="attr">class</span>=<span class="string">"header__active-menu-item"</span>{% <span class="attr">endif</span> %}></span>{{ link.title | escape }}<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><p>with</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"{{ link.url }}"</span> <span class="attr">class</span>=<span class="string">"header__menu-item header__menu-item list-menu__item link link--text focus-inset {% if link.title contains '__red-dot' %}header__menu-item--red-dot{% endif %}"</span>{% <span class="attr">if</span> <span class="attr">link.current</span> %} <span class="attr">aria-current</span>=<span class="string">"page"</span>{% <span class="attr">endif</span> %}></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> {%<span class="attr">-</span> <span class="attr">if</span> <span class="attr">link.current</span> %} <span class="attr">class</span>=<span class="string">"header__active-menu-item"</span>{% <span class="attr">endif</span> %}></span>{{ link.title | remove: '__red-dot' | escape }}<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure><h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header__menu-item--red-dot</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.header__menu-item--red-dot</span><span class="selector-pseudo">:before</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">""</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>: tomato;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="How-to-use"><a href="#How-to-use" class="headerlink" title="How to use"></a>How to use</h2><p>Add <code>__red-dot</code> after the link name you want to add red dot.</p><img src="/2022/08/15/How-to-add-red-dot-at-header-menu-Dawn-theme-Shopify/Dingtalk_20220815215039.jpg" class="" title="Edit menu item">]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>Add Hover Effect to Mega Menu - Dawn Theme Shopify</title>
<link href="/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/"/>
<url>/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/</url>
<content type="html"><![CDATA[<h1 id="Before-you-start-it"><a href="#Before-you-start-it" class="headerlink" title="Before you start it"></a>Before you start it</h1><ul><li>Mega menu is released on Dawn 5.0.0</li><li>Dawn theme version at this post is 6.0.2</li><li>Duplicate your theme</li></ul><h2 id="Quick-Look-π"><a href="#Quick-Look-π" class="headerlink" title="Quick Look π"></a>Quick Look π</h2><img src="/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/chrome_capture_20220714.gif" class="" title="capture"><h2 id="Getting-started-βοΈ"><a href="#Getting-started-βοΈ" class="headerlink" title="Getting started βοΈ"></a>Getting started βοΈ</h2><h3 id="theme-liquid"><a href="#theme-liquid" class="headerlink" title="theme.liquid"></a>theme.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Layout > theme.liquid</p></li><li><p>Insert code before <code></body></code></p></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">function</span> <span class="title function_">bindMouseOverToMegaMenu</span> (item) {</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">addEventListener</span>(<span class="string">"mouseover"</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">setAttribute</span>(<span class="string">"open"</span>, <span class="literal">true</span>);</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">querySelector</span>(<span class="string">".mega-menu__content"</span>).<span class="title function_">addEventListener</span>(<span class="string">"mouseover"</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">setAttribute</span>(<span class="string">"open"</span>, <span class="literal">true</span>);</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">querySelector</span>(<span class="string">".mega-menu__content"</span>).<span class="title function_">addEventListener</span>(<span class="string">"mouseleave"</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">removeAttribute</span>(<span class="string">"open"</span>);</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">addEventListener</span>(<span class="string">"mouseleave"</span>, <span class="function">() =></span> {</span></span><br><span class="line"><span class="language-javascript"> item.<span class="title function_">removeAttribute</span>(<span class="string">"open"</span>);</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> });</span></span><br><span class="line"><span class="language-javascript"> }</span></span><br><span class="line"><span class="language-javascript"> <span class="keyword">let</span> items = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">".header__inline-menu"</span>).<span class="title function_">querySelectorAll</span>(<span class="string">"details.mega-menu"</span>);</span></span><br><span class="line"><span class="language-javascript"> items.<span class="title function_">forEach</span>(bindMouseOverToMegaMenu);</span></span><br><span class="line"><span class="language-javascript"> </span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><h3 id="header-liquid"><a href="#header-liquid" class="headerlink" title="header.liquid"></a>header.liquid</h3><ul><li><p>Online store > themes > Actions > Edit code > Sections > header.liquid</p></li><li><p>Replace css code from line 86 to line 117 ( between <code>{%- style -%}</code> and <code>{%- endstyle -%}</code>) with code below</p></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header</span>{</span><br><span class="line"> <span class="attribute">padding-top</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.padding_top</span> | times: <span class="number">0.5</span> | round: <span class="number">0</span> }}px;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.padding_bottom</span> | times: <span class="number">0.5</span> | round: <span class="number">0</span> }}px;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.section-header</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.margin_bottom</span> | times: <span class="number">0.75</span> | round: <span class="number">0</span> }}px;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">750px</span>) {</span><br><span class="line"> <span class="selector-class">.section-header</span> {</span><br><span class="line"> <span class="attribute">margin-bottom</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.margin_bottom</span> }}px;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">990px</span>) {</span><br><span class="line"> <span class="selector-class">.header</span>{</span><br><span class="line"> <span class="attribute">padding-top</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.padding_top</span> }}px;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: {{ <span class="selector-tag">section</span><span class="selector-class">.settings</span><span class="selector-class">.padding_bottom</span> }}px;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.mega-menu-connector</span> {</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">display</span>: flex;</span><br><span class="line"> <span class="attribute">justify-content</span>: center;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.mega-menu-connector</span><span class="selector-pseudo">:after</span> {</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">2.4rem</span>;</span><br><span class="line"> <span class="attribute">padding-bottom</span>: <span class="number">2.4rem</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><img src="/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/Dingtalk_20220814141053.jpg" class="" title="css code"><p>Insert code at line 464 before <code><summary></code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mega-menu-connector"</span>></span><span class="tag"><<span class="name">holder</span>></span><span class="tag"></<span class="name">holder</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><img src="/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/Dingtalk_20220814140857.jpg" class="" title="html code">]]></content>
<categories>
<category> Shopify </category>
<category> Dawn </category>
<category> Theme </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> Dawn </tag>
<tag> Theme </tag>
</tags>
</entry>
<entry>
<title>How to use fuzzy search with GraphQl</title>
<link href="/2022/08/01/How-to-use-fuzzy-search-with-GraphQl/"/>
<url>/2022/08/01/How-to-use-fuzzy-search-with-GraphQl/</url>
<content type="html"><![CDATA[<p>There is not document about fuzzy search with GraphQl. ( If Iβm wrong please paste link let me know π</p><p>For example, I have some products tagged by <code>discount_20</code>γ<code>discount_30</code>γ<code>discount_40</code>β¦β¦</p><p>What we usually do to search products via tag?</p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> products(<span class="keyword">first</span>: <span class="number">250</span>, query: "tag:'discount_'") {</span><br><span class="line"> edges {</span><br><span class="line"> node {</span><br><span class="line"> id</span><br><span class="line"> title</span><br><span class="line"> handle</span><br><span class="line"> tags</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>However, this query wonβt work, as it will only return products tagged by <code>discount_</code></p><p>So we need edit query to <code>tag:*(discount_)*</code></p><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> products(<span class="keyword">first</span>: <span class="number">250</span>, query: "tag:*(discount_)*") {</span><br><span class="line"> edges {</span><br><span class="line"> node {</span><br><span class="line"> id</span><br><span class="line"> title</span><br><span class="line"> handle</span><br><span class="line"> tags</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><img src="/2022/08/01/How-to-use-fuzzy-search-with-GraphQl/Kani_0-1659348593617.png" class="" title="GraphQl response">]]></content>
<categories>
<category> Shopify </category>
</categories>
<tags>
<tag> Shopify </tag>
<tag> GraphQl </tag>
</tags>
</entry>
</search>