[{"content":"Name: The name Fatihah means that which opens a subject or a book or any other thing. It has several names among which one is the Foundation of Qur’an. It is also known as Umm-ul-Qur’an or the Mother of the Qur’an. It is because it contains seven often repeated ayaat and it is a summary of what the entire Qur’an is about.\nPeriod of Revelation: It is one of the very earliest Revelations to the Prophet ﷺ. We learn from authentic traditions that it was the first complete Surah which was revealed to the Prophet ﷺ.\nTheme: The Surah is a du’a and the rest of the Qur’an that follows is the reply to this du’a. It has been placed at the very beginning of the book to teach this lesson to the reader: if you sincerely want to benefit from the Qur’an, you should offer this prayer to the Lord of the Worlds. In this Surah, we ask Allah subhanahu wa ta’ala for ‘alssirata almustaqeem’ meaning ‘the Right Way’. In reply to this du’a, Allah subhanahu wa ta’ala presents us the entire Qur’an as if to say if you want to walk on the path of the righteous people, then these are the instructions that you have to abide by.\nThe Virtues of Al-Fatihah: Muslim recorded that Abu Huraira radhiAllahu ‘anhu said that the Prophet ﷺ said, “Whoever performs any prayer in which he did not read Umm-ul-Qur’an, then this prayer is incomplete.” He said it thrice.\nBesides making its recitation compulsory for the validity of Salah, Al-Fatihah is the only Surah where Allah subhanahu wa ta’ala responds to us as we recite it.\nAbu Huraira was asked, “When we stand behind the Imam?” He said, “Read it to yourself, for I heard the Messenger of Allah ﷺ say,\nAllah, the Exalted, said, ‘I have divided the prayer (Al-Fatihah) into two halves between Myself and My servant, and My servant shall have what he asks for.’\nIf he says,\nبِسْمِ اللَّهِ الرَّحْمَـنِ الرَّحِيمِ\nIn the name of Allah, the Most Beneficent, the Most Merciful. (1:1)\nالْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ\nAll the praises and thanks be to Allah, the Lord of the ‘Alameen (mankind, jinns and all that exists). (1:2)\nAllah subhanahu wa ta’ala says, ‘My servant has praised Me.’\nWhen the servant says,\nالرَّحْمَـنِ الرَّحِيمِ\nThe Most Beneficent, the Most Merciful. (1:3)\nAllah says, ‘My servant has glorified Me.’\nWhen he says,\nمَـلِكِ يَوْمِ الدِّينِ\nThe Owner of the Day of Recompense. (1:4)\nAllah subhanahu wa ta’ala says, ‘My servant has glorified Me,’ or ‘My servant has related all matters to Me.’\nWhen he says,\nإِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ\nYou (alone) we worship, and You (alone) we ask for help. (1:5)\nAllah says, ‘This is between Me and My servant, and My servant shall acquire what he sought.’\nWhen he says,\nاهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ – صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلاَ الضَّآلِّينَ\nGuide us to the straight path. The path of those upon whom You have bestowed favor, not of those who have evoked [Your] anger or of those who are astray. (1: 6-7)\nAllah says, ‘This is for My servant, and My servant shall acquire what he asked for.’”\nUnderstanding the virtue of this Surah, we should not rush through its recitation in Salah, but rather pause after every ayah as if waiting for Allah’s response and then move on to the next ayah. While having human conversations we pause and give the other person a chance to respond. We don’t rush through the conversation without pausing in between. Then why do we have to rush while speaking to Allah subhanahu wa ta’ala, the Lord of the Worlds?\nIf you want your du’a to be heard, and responded to then relax, pause, think of the depth of your statement. Be in a state of spirituality. Shed some tears, be sincere in your repentance. By the time you finish your Salah, you will feel rejuvenated. In sha Allah!\n","permalink":"/posts/islamic/quran/juz-one/surah-al-fatihah/","summary":"\u003ch2 id=\"name\"\u003eName:\u003c/h2\u003e\n\u003cp\u003eThe name Fatihah means \u003cstrong\u003ethat which opens a subject or a book or any other thing\u003c/strong\u003e. It has several names among which one is the Foundation of Qur’an. It is also known as Umm-ul-Qur’an or the Mother of the Qur’an. It is because it contains seven often repeated ayaat and it is a summary of what the entire Qur’an is about.\u003c/p\u003e\n\u003ch2 id=\"period-of-revelation\"\u003ePeriod of Revelation:\u003c/h2\u003e\n\u003cp\u003eIt is one of the very earliest Revelations to the Prophet ﷺ. We learn from authentic traditions that it was the first complete Surah which was revealed to the Prophet ﷺ.\u003c/p\u003e","title":"Surah Al-Fatihah – Introduction"},{"content":" سورۂ نمل کی ایک بڑی ہی پیاری آیت ہے۔۔۔ اور میں چاہتا ہوں کہ آپ اسے ذرا توجہ کے ساتھ پڑھیں۔\nکیا ان لوگوں نے آسمان و زمین کے عالم میں غور نہیں کیا؟\nاور ان چیزوں میں کہ جو اللہ نے پیدا کی ہیں ؟ (الأعراف 7:185)\nکس طرح کا غور ؟میں آپ کو ایک مثال دیتا ہوں۔سورۃ نمل کی ایک آیت ہے اور نمل کا مطلب ہوتا ہے ایک چیونٹی ۔کیوں کہ النمل میں ایک چیونٹی کا واقعہ ہے کہ کیسے ۔۔۔\nجب حضرت سلیمانؑ چیونٹیوں کے ایک میدان میں پہنچے تو ایک چیونٹی نے کہا کہ بھاگ جاؤ ۔۔۔اپنے اپنے گھروں میں چھپ جاؤ ،کہیں ایسا نہ ہو کہ بے خبری میں سلیمان اور ان کا لشکر تمہیں روند ڈالے (النمل 27:18)اس آیت میں ، اس میں موجود اللہ کی تخلیق کردہ چیزوں میں ۔۔۔\nآپ کیسے غور کر سکتے ہیں ؟اس آیت کو غور سے پڑھیئے ، اور عربی میں پڑھیئے کیوں کہ ترجمہ ۔۔۔ اس آیت میں چھپی حیرانیوں کا حق کبھی ادا کر ہی نہیں سکتا ۔\n’’قَالَتْ نَمْلَةٌۭ‘‘ یعنی چیونٹی نے کہا ۔۔۔\nاور قالت سے پتہ چلتا ہے کہ وہ ایک فی میل چیونٹی تھی\n’’ٱدْخُلُوا۟ مَسَـٰكِنَكُمْ‘‘ یعنی اپنی گھروں میں داخل ہو جاؤ ۔۔۔\nاور اس سے پتہ چلتا ہے کہ وہ چیونٹیوں کے اس آرڈر سے تعلق رکھتی تھی کہ جو اڑ نہیں سکتی ۔لیکن کیا چونٹیاں اڑتی بھی ہیں ؟\nجی بالکل ۔۔۔ اگر آپ ’’hymenopetra‘‘ یعنی کیڑوں کی سٹڈیز میں تھوڑی سی ریسرچ کریں تو آپ دیکھیں گے کہ چیونٹیوں کی کالونی میں چار آرڈرز ہوتے ہیں ، یعنی چار درجات ہوتے ہیں ۔پروں والی چیونٹیاں آپ عموماً اس لیے نہیں دیکھتے کیوں کہ وہ کبھی اپنے ’’nest‘‘ سے ، اپنی کالونی سے باہر نہیں آتیں (سوائے برسات کے دنوں کے)جبکہ باہر آنے والی چیونٹیاں صرف اور صرف ۔۔۔ فی میل ہوتی ہیں اور صرف اور صرف اس آرڈر کی ہوتی ہے کہ جن کے پر نہیں ہوتے ۔لہٰذا وہ صرف ایک ہی صورت میں سلیمانؑ کے لشکر سے بچ سکتی تھیں کہ وہ بھاگ کر ۔۔۔ زمین کے اندر اپنی کالونی میں داخل ہو جائیں ۔پھر وہ چیونٹی کہتی ہے کہ ’’لَا يَحْطِمَنَّكُمْ‘‘۔۔۔\nاب اس کا محاورتاً ترجمہ تو یہی ہوا ہے کہ ’’وہ تمہیں کچل نہ دیں‘‘ لیکن ۔۔۔ اس کا لفظی ترجمہ ، اس کا لغوی ترجمہ یا یوں کہہ لیں کہ اس کا حرف بہ حرف ترجمہ بنتا ہے کہ ’’کہیں وہ تمہیں توڑ نہ دیں‘‘ ۔توڑ نہ دیں ؟ چیونٹیوں کو کیسے توڑتے ہیں ؟ایک مرتبہ پھر سے آپ کے ساتھ اپنا ریسرچ ورک شیئر کرتا ہوں جہاں ’’the journal of hymenopetra 2016‘‘ سے ہمیں پتہ چلتا ہے کہ ایک چیونٹی ۔۔۔ایک خاص قسم کی چیونٹی ہوتی ہے ’’the leaf cutter ant‘‘ ۔۔۔\nکہ جس کے جسم پر سب سے باہر کسی قسم کا ایک ’’exoskeleton‘‘ ہوتا ہے اور میں آپ کو دو ہزار بیس کے نیچر میگزین سے ایک پیرائے پڑھ کر سنا رہا ہوں ۔’’کہ یوں تو کیڑوں کی کئی قسموں کے جسم پر ایک ایکسو سکیلیٹن ہوتا ہے لیکن leaf-cutter چیونٹیوں کے جسم پر آج ہم ایک ایسی چیز دیکھ رہے ہیں کہ جو پہلے کبھی نہیں دیکھی گئی تھی ۔کسی قسم کے بائیو کرسٹل سے بنا ایک حفاظتی کور کہ جو صرف خوردبین سے دیکھنے پر دکھائی دے گا ۔اور اگر چیونٹی پر کوئی وزنی چیز گرے تو اس کا جسم نہیں بلکہ پہلے ۔۔۔\nچیونٹی کا یہ بائیو کرسٹل کور کسی شیشے کی طرح ٹوٹے گا‘‘\nNature Magazine (Bio-Mineral Armour in Leaf-Cutter Ants 2020)\nيَحْطِمَنَّكُمْ کی ایگزیکٹ تشریح ۔۔۔کہیں وہ تمہیں توڑ نہ دیں ۔\nصرف اس ایک آیت پر غور کرنے سے دیکھیئے کہ ہم کیا کیا wonders کھلتے دیکھ رہے ہیں تو ذرا تصور کریں ۔۔۔کہ اگر ہم آیت بہ آیت ۔۔۔\nلفظ بہ لفظ قرآن کی کی تشریح کریں تو ہم پر کون کون سے علوم وا ہوں گے ۔ویسے ہی نہیں أبوبکر إبن عربی نے اپنی کتاب ’’قانون التاویل‘‘ میں لکھا ہے کہ قرآن میں تقریباً ۔۔۔\nستتر ہزار علوم ہیں ۔ویسے ہی نہیں إبن عباسؓ نے فرمایا تھا کہ قرآن میں اس قدر علم ہے ۔۔۔\nکہ میرے اونٹ کی رسّی بھی گم جائے تو میں قرآن کے ذریعے سے اسے تلاش کر لیتا ہوں (الإتقان ج 2 ص 126)اور میں ۔۔۔ میرا نام محمد علی ساجد ہے اور میں اسی قرآن کا ایک بہت ادنیٰ سا طالب علم ہوں کہ جو اس میں چھپے ہوئے علوم پر نبی کریمؐ ۔۔۔صحابہ کرامؓ اور تابعین سے ملی معلومات ڈھونڈ ڈھونڈ کر پھر آپ کے ساتھ شیئر کرتا ہوں ۔\n","permalink":"/posts/islamic/surah-naml-ki-aik-ayat/","summary":"\u003cdiv class=\"urdu-post\" lang=\"ur\" dir=\"rtl\"\u003e\n\u003ch2 id=\"سورۂ-نمل-کی-ایک-بڑی-ہی-پیاری-آیت-ہے\"\u003eسورۂ نمل کی ایک بڑی ہی پیاری آیت ہے۔۔۔\u003c/h2\u003e\n\u003cp\u003eاور میں چاہتا ہوں کہ آپ اسے ذرا توجہ کے ساتھ پڑھیں۔\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eکیا ان لوگوں نے آسمان و زمین کے عالم میں غور نہیں کیا؟\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eاور ان چیزوں میں کہ جو اللہ نے پیدا کی ہیں ؟ (الأعراف 7:185)\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eکس طرح کا غور ؟میں آپ کو ایک مثال دیتا ہوں۔سورۃ نمل کی ایک آیت ہے اور \u003cstrong\u003eنمل\u003c/strong\u003e کا مطلب ہوتا ہے ایک \u003cstrong\u003eچیونٹی\u003c/strong\u003e ۔کیوں کہ النمل میں ایک چیونٹی کا واقعہ ہے کہ کیسے ۔۔۔\u003c/p\u003e","title":"سورۃ نمل کی ایک آیت"},{"content":"Are you tired of broken CSS, z-index wars, and buggy AI-generated code on your Shopify store?\nAs a Shopify Partner who has built over 200 stores, I heard your frustration. While I’ve been sharing free Shopify sections on Github .\nSo, I built something better for you.\nIntroducing the Ultimate Shopify GitHub Repository I am moving from single videos to a living library. I’ve launched a GitHub repository packed with the most updated, clean versions of our free Shopify sections.\nWhy This is a Game-Changer for Shopify Devs \u0026amp; Store Owners It’s Not Random AI Code: These aren’t just copy-paste prompts. These sections were built for real clients, tested on live stores, refined, and then released. Instant Bug Fixes: Found an issue with a section? Don’t touch the code. Simply go to the repository, click “Issues,” and submit a ticket. I will fix it for you completely free. How to Get Started Visit the Repository: Check the link in our description or bio to access the GitHub repo. Star \u0026amp; Save: Hit the Star button to bookmark it. I will be uploading new, tested sections constantly. Report Issues: If something looks off, use the “Issues” tab to let us know. I’ll handle the heavy lifting. Stop wasting time debugging. Start building with confidence using sections that are actually built for production.\n","permalink":"/posts/shopify/free-shopify-sections/","summary":"\u003cp\u003e\u003cstrong\u003eAre you tired of broken CSS, z-index wars, and buggy AI-generated code on your Shopify store?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eAs a \u003ca href=\"/contact\"\u003eShopify Partner\u003c/a\u003e\n who has built over 200 stores, I heard your frustration. While I’ve been sharing free Shopify sections on \u003ca href=\"https://github.com/alibhatti23\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cstrong\u003eGithub\u003c/strong\u003e\u003c/a\u003e\n.\u003c/p\u003e\n\u003cp\u003eSo, I built something better for you.\u003c/p\u003e\n\u003ch2 id=\"introducing-the-ultimate-shopify-github-repository\"\u003eIntroducing the Ultimate Shopify GitHub Repository\u003c/h2\u003e\n\u003cp\u003eI am moving from single videos to a living library. I’ve launched a \u003ca href=\"https://github.com/alibhatti23/free-shopify-sections\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eGitHub repository\u003c/a\u003e\n packed with the most updated, clean versions of our free Shopify sections.\u003c/p\u003e","title":"Free Shopify Sections – (100+ All Free Sections)"},{"content":"#DIV/0! and #N/A really make me crazy! How can I make them go away? Formula errors can be incredibly useful when you\u0026rsquo;re building spreadsheets because they help identify mistakes. However, there are many situations where errors are expected and displaying an ugly error message simply makes your worksheet look unprofessional.\nInstead of showing #DIV/0!, #N/A, or other Excel error codes, you can replace them with cleaner values such as 0, a blank cell, or a custom message.\nIn this guide, we\u0026rsquo;ll look at the most common error-handling techniques in Excel and learn how to create cleaner, more user-friendly spreadsheets.\nUnderstanding the #DIV/0! Error The #DIV/0! error occurs when a formula attempts to divide a number by zero.\nImagine you\u0026rsquo;re calculating the ratio of widgets produced to widgets sold. The values in cells B3:E3 contain the number of widgets made, while B4:E4 contains the number of widgets sold.\nIf no widgets were sold during a particular period, the value in the denominator becomes zero. Since division by zero is mathematically impossible, Excel displays a #DIV/0! error. A #DIV/0! error occurs when a formula attempts to divide a number by zero.\nFor many businesses, zero values are perfectly normal. Rather than displaying an error, it often makes more sense to show a zero or another meaningful result. Using IF to Prevent #DIV/0! Errors A common solution is to check whether the denominator contains zero before performing the division.\nTraditional Approach =IF(D4=0,0,D3/D4) This formula checks whether D4 equals zero. If it does, Excel returns 0; otherwise, it performs the division.\nShorter Approach Because Excel treats zero as FALSE and any non-zero number as TRUE, you can simplify the formula:\n=IF(D4,D3/D4,0) This formula reads as:\nIf D4 contains a value other than zero, divide D3 by D4. Otherwise, return 0. The first argument of the IF function usually contains a logical test such as D4=0, D4\u0026gt;0, or D4\u0026lt;\u0026gt;0. However, Excel automatically treats 0 as FALSE and any non-zero number as TRUE, which allows this useful shortcut.\nUnderstanding the #N/A Error Another common Excel error is #N/A.\nThis error typically occurs when a lookup function such as VLOOKUP cannot find the requested value within the lookup range.\nsuppose you\u0026rsquo;re searching for the employee name joe within the range A2:A6.\n=VLOOKUP(D1,A2:B6,2,0) If the value in D1 does not exist in the lookup table, Excel returns:\n#N/A\nWhile technically correct, displaying #N/A is often less helpful than showing a user-friendly message.\nReplacing #N/A With a Friendly Message Instead of displaying an error, you can return a custom message such as \u0026ldquo;Not Found\u0026rdquo;.\nThis approach allows users to immediately understand what happened without needing Excel knowledge.\nFor example, when a lookup value doesn\u0026rsquo;t exist in the lookup range, you might display:\nNot Found\ninstead of:\n#N/A\nBypassing the #N/A error.\nUsing ISERROR to Catch Errors If you\u0026rsquo;re working in older versions of Excel, you can use the ISERROR function to detect errors before displaying a result.\nHandling Division Errors =IF(ISERROR(D3/D4),0,D3/D4)\nHandling Lookup Errors =IF(ISERROR(VLOOKUP(D1,A2:B6,2,0)),\u0026ldquo;Not Found\u0026rdquo;,VLOOKUP(D1,A2:B6,2,0))\nThe ISERROR function checks whether a formula returns any Excel error. If an error exists, Excel displays the alternative value you specify.\nUsing IFERROR (Recommended) Starting with Excel 2007, Microsoft introduced the much simpler IFERROR function.\nSyntax =IFERROR(formula,value_if_error) This function evaluates a formula and automatically returns a replacement value whenever an error occurs.\nDivision Error =IFERROR(D3/D4,0)\nLookup Error =IFERROR(VLOOKUP(D1,A2:B6,2,0),\u0026ldquo;Not Found\u0026rdquo;)\nCompared to the ISERROR approach, IFERROR formulas are easier to read, easier to maintain, and often calculate faster.\nWhy IFERROR Is Better Using IFERROR offers several advantages:\nCleaner formulas Easier maintenance Better readability Faster calculations in many cases Handles most common Excel error types automatically If you\u0026rsquo;re using Excel 2007 or later, IFERROR is generally the preferred solution for error handling.\nBest Practices for Handling Formula Errors To keep your spreadsheets clean and professional:\nUse IFERROR whenever possible. Check denominators before division. Replace lookup failures with meaningful messages. Display blanks instead of errors in reports and dashboards. Use error handling only when errors are expected during normal operation. Investigate unexpected errors rather than hiding them. Final Thoughts Errors such as #DIV/0! and #N/A are a normal part of working with Excel. While they are useful during development and troubleshooting, they can make finished reports look cluttered and confusing.\nBy using functions such as IF, ISERROR, and especially IFERROR, you can create cleaner spreadsheets that are easier for users to understand and more professional in appearance.\nFrequently Asked Questions Why does Excel display a #DIV/0! error? The #DIV/0! error appears when a formula attempts to divide a number by zero or by a blank cell that Excel interprets as zero. Since division by zero is mathematically impossible, Excel returns this error.\nHow can I prevent a #DIV/0! error from appearing? You can use the IF function to test whether the divisor is zero before performing the calculation.\n=IF(D4,D3/D4,0) This formula returns the division result when D4 contains a non-zero value and returns 0 when D4 is zero.\nWhy does the formula =IF(D4,D3/D4,0) work? Excel treats zero as FALSE and any non-zero number as TRUE. Therefore, if D4 contains a value other than zero, Excel performs the division. If D4 is zero, Excel returns 0.\nWhat causes a #N/A error in Excel? A #N/A error occurs when a lookup function such as VLOOKUP cannot find the requested value in the lookup range.\nHow can I replace a #N/A error with a custom message? You can use IFERROR to return a custom value instead of displaying the error.\n=IFERROR(VLOOKUP(D1,A2:B6,2,0),\u0026ldquo;Not Found\u0026rdquo;) What does the ISERROR function do?\nISERROR checks whether a formula returns any Excel error. If an error is detected, it returns TRUE; otherwise, it returns FALSE.\nCan ISERROR handle more than just #DIV/0! and #N/A errors?\nYes. ISERROR can detect most common Excel errors, including:\n#DIV/0! #N/A #VALUE! #REF! #NAME? #NUM! What is the IFERROR function? IFERROR is an error-handling function available in Excel 2007 and later that evaluates a formula and returns an alternative value whenever an error occurs.\nHow is IFERROR different from using IF and ISERROR together? IFERROR combines both operations into a single function.\nInstead of:\n=IF(ISERROR(D3/D4),0,D3/D4)\nYou can simply write:\n=IFERROR(D3/D4,0)\nWhen should I use IFERROR? Use IFERROR whenever an error is expected as part of normal worksheet operation and you want to display a cleaner result such as:\n0\nA blank cell\n\u0026ldquo;Not Found\u0026rdquo;\nA custom message\ninstead of an Excel error code.\n","permalink":"/posts/excel/how-can-i-avoid-those-ugly-formula-errors/","summary":"\u003ch2 id=\"div0-and-na-really-make-me-crazy-how-can-i-make-them-go-away\"\u003e\u003cstrong\u003e#DIV/0! and #N/A really make me crazy! How can I make them go away?\u003c/strong\u003e\u003c/h2\u003e\n\u003cp\u003eFormula errors can be incredibly useful when you\u0026rsquo;re \u003cstrong\u003ebuilding spreadsheets\u003c/strong\u003e because they help identify mistakes. However, there are many situations where errors are expected and displaying an ugly error message simply makes your worksheet look unprofessional.\u003c/p\u003e\n\u003cp\u003eInstead of showing \u003cstrong\u003e#DIV/0!, #N/A,\u003c/strong\u003e or other Excel error codes, you can replace them with cleaner values such as \u003cstrong\u003e0\u003c/strong\u003e, a blank cell, or a custom message.\u003c/p\u003e","title":"How Can I Avoid Those Ugly Formula Errors like #DIV/0! and #N/A?"},{"content":"“AI is here… will SEO die?”\nIf you’ve been hearing this a lot, you’re not alone. But here’s the truth: AI actually needs SEO to work.\nLet’s break it down in a simple, practical way\n1. Understand How AI Works AI tools like ChatGPT or Google AI don’t magically know everything. They rely on data available on the internet.\n👉 No data = No visibility\nIf your website isn’t optimized, AI won’t pick it up. Simple as that.\n2. Fix Your SEO Foundation Before chasing AI trends, make sure your basics are strong:\nProper keyword research Optimized meta titles \u0026amp; descriptions Fast-loading website Image optimization (with alt text) 💡 Think of SEO as the “fuel” AI uses.\n3. Focus on First Page Rankings Did you know?\n👉 Less than 1% of users go to the second page of Google.\nIf you’re not ranking on page 1, you’re missing almost all organic traffic.\n4. Use an SEO App (Save Time) Instead of doing everything manually, use a Shopify SEO app.\nWith tools like SEO World (formerly SEO Ant), you can:\nFix SEO issues automatically Optimize images in bulk Improve site speed Get SEO health reports This saves hours of manual work.\n5. Optimize Images \u0026amp; Speed Heavy images slow down your store and hurt rankings.\nCompress images Add alt text Improve loading speed This alone can boost your SEO significantly.\n6. Create Content with AI Content is still king\nUse AI to:\nFind keywords Generate blog topics Write SEO-friendly articles Target low competition + high volume keywords for faster ranking.\n7. Improve On-Page SEO Make sure each product/page includes:\nH1, H2 headings Keyword-rich descriptions Internal linking You can even use AI tools to auto-optimize everything in one click.\n8. Don’t Ignore Technical SEO This is where most people struggle…\nFocus on:\nSchema markup (for rich results ⭐) Sitemap creation Indexing pages faster Fixing broken links Good tools can handle this for you automatically.\n9. Build Backlinks (Authority Matters) Google ranks websites based on trust.\nMore quality backlinks = higher authority = better rankings\nEven simple backlink strategies can make a big difference over time.\nFinal Thoughts AI is not replacing SEO… it’s making it more important than ever.\nIf your store has:\n✔ Strong SEO\n✔ Good content\n✔ Proper optimization\nThen you won’t just rank on Google… You’ll also show up in AI search results.\n","permalink":"/posts/seo/shopify-seo-tips-beginner-tutorial-rank-your-store-%231/","summary":"\u003cp\u003e“AI is here… will SEO die?”\u003c/p\u003e\n\u003cp\u003eIf you’ve been hearing this a lot, you’re not alone. But here’s the truth: AI actually needs SEO to work.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eLet’s break it down in a simple, practical way\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"1-understand-how-ai-works\"\u003e1. Understand How AI Works\u003c/h2\u003e\n\u003cp\u003eAI tools like ChatGPT or Google AI don’t magically know everything.\nThey rely on data available on the internet.\u003c/p\u003e\n\u003cp\u003e👉 No data = No visibility\u003c/p\u003e\n\u003cp\u003eIf your website isn’t optimized, AI won’t pick it up. Simple as that.\u003c/p\u003e","title":"Shopify SEO Tips for Beginners: How to Rank Your Store Higher on Google"},{"content":"Shopify’s Spring 2026 edition introduces groundbreaking features designed to help merchants build, scale, and sell more effectively online. In this comprehensive guide, we’ll explore the most important updates and how they can transform your ecommerce business.\n1. Agentic Storefront: Sell Inside Chat Platforms The Agentic Storefront is arguably the most revolutionary feature in Shopify Spring 2026. This feature allows your products to appear directly within:\nChatGPT Microsoft Copilot Other AI chat platforms Customers can now browse your products, ask questions, add items to cart, and complete checkout—all without leaving the chat interface. This seamless shopping experience eliminates friction and increases conversion rates.\nBenefits:\nReduced cart abandonment Improved customer experience Expanded sales channels 24/7 product availability in AI assistants 2. Shopify Agentic App: Monitor AI-Powered Sales Every Shopify store now comes with the Shopify Agentic App by default. This app provides:\nReal-time sales data from ChatGPT, Copilot, and other platforms Customer questions and inquiries about your products Detailed analytics on AI-driven transactions Insights to optimize product descriptions 3. Sidekick AI: Advanced Analytics Dashboard Sidekick is Shopify’s AI-powered analytics tool that now works across multiple partner apps, including:\nJudge.me Reviews Other supported integrations (constantly expanding) With Sidekick, you can query your analytics data in natural language and gain deeper insights into your business performance without manual data analysis.\n4. AI-Powered Shopify Inbox The enhanced Shopify Inbox now features AI capabilities that allow customers to:\nAsk questions in natural language Receive instant product information Add items to cart directly in the inbox Complete purchases without leaving the conversation This improves customer service efficiency and boosts sales opportunities.\n5. Rollout App: A/B Testing Made Simple Shopify’s native A/B Testing with Rollouts app enables merchants to:\nCreate A/B tests for theme sections Schedule tests automatically Measure user preferences Optimize website performance This eliminates the need for external A/B testing tools, making optimization accessible to all merchants.\n6. Campaign Autopilot: AI-Powered Multi-Channel Marketing One of the most impactful features is the new Growth Tab and Campaign Autopilot, which allows you to:\nCreate AI-powered marketing campaigns from a single dashboard Automatically post campaigns to Meta Ads and Shop App Monitor performance across multiple platforms Soon: Support for Shopify Messaging, ChatGPT Ads, and Microsoft Advertising Why This Matters:\nManaging multiple marketing channels used to be time-consuming and complex. With Campaign Autopilot, you can:\nSave hours on campaign creation Leverage AI to optimize ad performance Maintain consistent messaging across platforms Make data-driven marketing decisions How These Features Work Together The Shopify Spring 2026 updates create a comprehensive AI-powered ecosystem:\nDiscover: Customers find your products in ChatGPT and Copilot (Agentic Storefront) Engage: AI answers questions in Shopify Inbox Analyze: Sidekick provides actionable insights Optimize: Rollouts A/B testing improves performance Scale: Campaign Autopilot drives growth across channels What’s the Best Feature? Our Verdict While all features are valuable, Campaign Autopilot stands out as the most impactful for most merchants. Why?\nTime-saving: Automate multi-channel campaign management Cost-effective: Reduce marketing agency dependencies AI-powered: Leverage machine learning for better results Scalable: Grow your business without proportional labor costs Getting Started with Shopify Spring 2026 To leverage these new features:\nUpdate your Shopify store to the latest version Set up Shopify Agentic to enable ChatGPT integration Configure Campaign Autopilot for your preferred platforms Use Sidekick for data-driven decisions Test and optimize with Rollouts Conclusion Shopify Spring 2026 represents a major leap forward in ecommerce technology. By integrating AI throughout the entire merchant experience from product discovery to campaign management, Shopify is empowering businesses of all sizes to compete globally.\nThe question isn’t whether to adopt these features, but how quickly you can integrate them into your strategy.\n","permalink":"/posts/shopify/shopify-spring-2026-edition-the-only-updates-that-matter/","summary":"\u003cp\u003eShopify’s Spring 2026 edition introduces groundbreaking features designed to help merchants build, scale, and sell more effectively online. In this comprehensive guide, we’ll explore the most important updates and how they can transform your ecommerce business.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"1-agentic-storefront-sell-inside-chat-platforms\"\u003e1. Agentic Storefront: Sell Inside Chat Platforms\u003c/h2\u003e\n\u003cp\u003eThe Agentic Storefront is arguably the most revolutionary feature in Shopify Spring 2026. This feature allows your products to appear directly within:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eChatGPT\u003c/li\u003e\n\u003cli\u003eMicrosoft Copilot\u003c/li\u003e\n\u003cli\u003eOther AI chat platforms\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eCustomers can now browse your products, ask questions, add items to cart, and complete checkout—all without leaving the chat interface. This seamless shopping experience eliminates friction and increases conversion rates.\u003c/p\u003e","title":"Shopify Spring 2026 Edition: The Only Updates That Matter"},{"content":"In this step-by-step guide, I’ll show you exactly how to add a fully customizable button to any product page on Shopify. This method requires no advanced coding skills, works with any theme, and blends seamlessly with your store’s design. Let’s dive in.\nWhy Add a Custom Button? Before we get into the how, let’s talk about the why. Custom buttons unlock new ways to engage customers:\nOut-of-Stock Redirection: Instead of displaying a generic “out of stock” message, redirect interested customers to a contact form or waitlist. Special Promotions: Link to a custom landing page for bundle deals or limited-time offers. Product Inquiries: Add a “Ask a Question” button that goes directly to your contact page. Appointment Booking: For service-based businesses, link to a booking calendar. External Links: Direct customers to size guides, video demos, or PDF instructions. This tutorial was inspired by a real client request—their best-selling product went out of stock, and they wanted to capture leads instead of losing sales. The solution? A custom “Notify Me When Available” button.\nWhat You’ll Need A Shopify store (any plan) Access to your theme code (no coding experience required) 10-15 minutes of time Step-by-Step: Adding Your Custom Button 1. Create a New Product Template First, we’ll create a separate template for the product where you want the custom button.\nFrom your Shopify admin, go to Online Store \u0026gt; Themes. Click Edit code (for the published theme or a duplicate). In the left sidebar under Templates, click Add a new template. Select Product as the template type. Name it something recognizable, like “product.custom-button” and click Create template. This creates a copy of your default product template that you can modify without affecting other products.\n2. Assign the Template to Your Product Go to Products in your Shopify admin. Select the product where you want the custom button. In the Theme template dropdown (usually in the bottom-right of the product editor), select your newly created template. Click Save. Now, only this product will use your custom template.\n3. Hide Default Buttons In your new template, you’ll want to remove the standard “Add to Cart” and “Buy Now” buttons to avoid confusion.\nBack in the code editor, find your new template (e.g., product.custom-button.liquid). Locate the button section—this varies by theme, but often appears near {% form \u0026lsquo;product\u0026rsquo;, product %}. Look for the quantity selector and button code blocks. You can temporarily hide them by wrapping them in Liquid comment tags: {% comment %} Default button code here {% endcomment %} Or simply delete the button sections if you’re sure you won’t need them.\nTip: Make a backup of your template before deleting anything.\n4. Add Custom Button Code Now for the exciting part—adding your custom button.\nIn your template, decide where you want the button to appear (usually where the original buttons were). Add a Custom Liquid block (if using sections) or directly insert this code: \u0026lt;a href=\u0026#34;https://devwsp.myshopify.com/pages/contact\u0026#34; class=\u0026#34;button add-to-cart-button button\u0026#34;\u0026gt;Contact\u0026lt;/a\u0026gt; \u0026lt;style\u0026gt; .button{ width: 100%; } \u0026lt;/style\u0026gt; Replace the href value with your desired link URL. Change the button text (“Contact”) to your preferred call-to-action. 5. Style Your Button to Match Your Theme To make the button look native to your theme:\nFor Saver Theme Users:\nThe class button often works automatically. The width is set to 100% with the included CSS. For Other Themes:\nRight-click on an existing button on your site and select Inspect. Look for the class names (like btn, product-form__submit, etc.). Copy those classes into your custom button’s class attribute, keeping the existing “button” classes. 6. Adjust Width \u0026amp; Hover Effects The included CSS sets the button to full width (100%). To adjust this:\nChange width: 100%; to your preferred percentage (like width: 80%;) Add margin: 0 auto; to center the button if using less than 100% width For hover effects, inspect your theme’s existing buttons and copy their hover CSS Advanced Customization Ideas Once you’ve mastered the basic custom button, consider these enhancements:\nConditional Buttons Show different buttons based on product tags, inventory, or price using Liquid logic. Multiple Custom Buttons Add several buttons for different purposes by repeating the code structure with different links and text. Icon Integration Add Font Awesome or custom icons to your buttons by including icon HTML before your button text. Troubleshooting Common Issues Button doesn’t match theme styling: Use your browser’s Inspect Tool to identify the exact classes used by your theme’s native buttons. Check if your theme has predefined button styles in its style guide. Button not appearing: Ensure you’ve assigned the correct template to your product. Check for syntax errors in your code. Clear your browser cache and Shopify cache (Online Store \u0026gt; Themes \u0026gt; Actions \u0026gt; Clear cache). Mobile responsiveness issues: The 100% width should make it responsive automatically. Test on different devices to ensure proper display. Pro Tips for Maximum Impact Clear Call-to-Action: Use action-oriented text like “Join Waitlist,” “Get Quote,” or “Download Guide.” Strategic Placement: Position your button where customers naturally expect action buttons. Visual Consistency: Match colors, fonts, and hover effects to your theme for a seamless experience. Test Thoroughly: Check how the button looks and functions on mobile, tablet, and desktop. Track Performance: Use UTM parameters or Shopify Analytics to measure clicks and conversions from your custom button. Beyond the Button: Boosting Your Store’s Functionality While custom buttons solve specific problems, consider these additional upgrades for your Shopify store:\nTiered Discounts: Use apps like Big Bulk Discount to encourage larger purchases with volume pricing. HTML/CSS Fundamentals: Check out my beginner-friendly guides to confidently customize your store without breaking anything. Conclusion Adding a custom button to your Shopify product page is a powerful way to enhance customer experience and capture opportunities that standard ecommerce buttons miss. Whether you’re redirecting out-of-stock traffic, linking to special forms, or creating unique pathways through your store—this method gives you complete control without complex coding.\n","permalink":"/posts/shopify/how-to-add-custom-button-to-product-page/","summary":"\u003cp\u003eIn this step-by-step guide, I’ll show you exactly how to add a fully customizable button to any product page on Shopify. This method requires no advanced coding skills, works with any theme, and blends seamlessly with your store’s design. Let’s dive in.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"why-add-a-custom-button\"\u003eWhy Add a Custom Button?\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eBefore we get into the how, let’s talk about the why.\u003c/strong\u003e Custom buttons unlock new ways to engage customers:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eOut-of-Stock Redirection:\u003c/strong\u003e Instead of displaying a generic “out of stock” message, redirect interested customers to a contact form or waitlist.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSpecial Promotions:\u003c/strong\u003e Link to a custom landing page for bundle deals or limited-time offers.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eProduct Inquiries:\u003c/strong\u003e Add a “Ask a Question” button that goes directly to your contact page.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAppointment Booking:\u003c/strong\u003e For service-based businesses, link to a booking calendar.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eExternal Links:\u003c/strong\u003e Direct customers to size guides, video demos, or PDF instructions.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThis tutorial was inspired by a real client request—their best-selling product went out of stock, and they wanted to capture leads instead of losing sales. The solution? A custom \u003cstrong\u003e“Notify Me When Available”\u003c/strong\u003e button.\u003c/p\u003e","title":"How To Add Custom Button To Product Page"},{"content":"Create a new section file called story-timeline.liquid and add the following code:\nShow Code {% assign wbs_id = block.id | replace: \u0026#39;_\u0026#39;, \u0026#39;\u0026#39; | downcase %} {% style %} .wbs-journey-map-{{ wbs_id }} { padding: 60px 20px; background-color: {{ section.settings.background_color }}; overflow: hidden; } .wbs-journey-map__heading-{{ wbs_id }} { text-align: center; margin-bottom: 20px; color: {{ section.settings.text_color }}; font-size: {{ section.settings.heading_size }}px; } .wbs-journey-map__subheading-{{ wbs_id }} { text-align: center; margin-bottom: 60px; color: {{ section.settings.subtext_color }}; font-size: {{ section.settings.subheading_size }}px; max-width: 600px; margin-left: auto; margin-right: auto; } .wbs-journey-map__container-{{ wbs_id }} { max-width: {{ section.settings.max_width }}px; margin: 0 auto; position: relative; } .wbs-journey-map__timeline-{{ wbs_id }} { position: relative; padding: 40px 0; } .wbs-journey-map__line-{{ wbs_id }} { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background: linear-gradient(to bottom, {{ section.settings.timeline_start_color }}, {{ section.settings.timeline_end_color }}); border-radius: 2px; } @media screen and (max-width: 768px) { .wbs-journey-map__line-{{ wbs_id }} { left: 30px; } } .wbs-journey-map__stage-{{ wbs_id }} { position: relative; margin-bottom: 80px; opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .wbs-journey-map__stage-{{ wbs_id }}.visible { opacity: 1; transform: translateY(0); } .wbs-journey-map__stage-{{ wbs_id }}:last-child { margin-bottom: 0; } .wbs-journey-map__stage-content-{{ wbs_id }} { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } @media screen and (max-width: 768px) { .wbs-journey-map__stage-content-{{ wbs_id }} { grid-template-columns: 1fr; gap: 20px; padding-left: 80px; } } .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} { direction: rtl; } .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-text-{{ wbs_id }}, .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-image-{{ wbs_id }} { direction: ltr; } @media screen and (max-width: 768px) { .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} { direction: ltr; } } .wbs-journey-map__stage-marker-{{ wbs_id }} { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: {{ section.settings.marker_size }}px; height: {{ section.settings.marker_size }}px; background-color: {{ section.settings.marker_color }}; border: 4px solid {{ section.settings.background_color }}; border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px {{ section.settings.marker_ring_color }}; } @media screen and (max-width: 768px) { .wbs-journey-map__stage-marker-{{ wbs_id }} { left: 30px; } } .wbs-journey-map__stage-marker-{{ wbs_id }} svg { width: 50%; height: 50%; color: {{ section.settings.marker_icon_color }}; } .wbs-journey-map__stage-number-{{ wbs_id }} { font-size: 18px; font-weight: 700; color: {{ section.settings.marker_icon_color }}; } .wbs-journey-map__stage-text-{{ wbs_id }} { padding: 30px; background-color: {{ section.settings.card_background }}; border-radius: {{ section.settings.card_border_radius }}px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .wbs-journey-map__stage-text-{{ wbs_id }}:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .wbs-journey-map__stage-label-{{ wbs_id }} { display: inline-block; padding: 6px 16px; background-color: {{ section.settings.label_background }}; color: {{ section.settings.label_text_color }}; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } .wbs-journey-map__stage-title-{{ wbs_id }} { font-size: 28px; font-weight: 700; margin-bottom: 15px; color: {{ section.settings.text_color }}; } .wbs-journey-map__stage-description-{{ wbs_id }} { font-size: 16px; line-height: 1.6; color: {{ section.settings.subtext_color }}; } .wbs-journey-map__stage-image-{{ wbs_id }} { position: relative; border-radius: {{ section.settings.image_border_radius }}px; overflow: hidden; aspect-ratio: {{ section.settings.image_aspect_ratio }}; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .wbs-journey-map__stage-image-{{ wbs_id }} img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .wbs-journey-map__stage-image-{{ wbs_id }}:hover img { transform: scale(1.05); } .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} { width: 100%; height: 100%; background-color: #f4f4f4; display: flex; align-items: center; justify-content: center; } .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} svg { width: 80px; height: 80px; opacity: 0.3; } .wbs-journey-map__cta-{{ wbs_id }} { text-align: center; margin-top: 60px; } .wbs-journey-map__cta-button-{{ wbs_id }} { display: inline-block; padding: 16px 40px; background-color: {{ section.settings.button_color }}; color: {{ section.settings.button_text_color }}; text-decoration: none; border-radius: {{ section.settings.button_border_radius }}px; font-size: 18px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .wbs-journey-map__cta-button-{{ wbs_id }}:hover { background-color: {{ section.settings.button_hover_color }}; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .wbs-journey-map__empty-state-{{ wbs_id }} { text-align: center; padding: 80px 20px; color: {{ section.settings.subtext_color }}; } .wbs-journey-map__empty-state-{{ wbs_id }} svg { width: 100px; height: 100px; margin-bottom: 20px; opacity: 0.3; } {% endstyle %} \u0026lt;wbs-journey-map-{{ wbs_id }} class=\u0026#34;wbs-journey-map-{{ wbs_id }}\u0026#34; {{ section.shopify_attributes }}\u0026gt; {% if section.settings.heading != blank %} \u0026lt;h2 class=\u0026#34;wbs-journey-map__heading-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings.heading }}\u0026lt;/h2\u0026gt; {% endif %} {% if section.settings.subheading != blank %} \u0026lt;div class=\u0026#34;wbs-journey-map__subheading-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings.subheading }}\u0026lt;/div\u0026gt; {% endif %} \u0026lt;div class=\u0026#34;wbs-journey-map__container-{{ wbs_id }}\u0026#34;\u0026gt; {% assign has_stages = false %} {% for i in (1..6) %} {% assign title_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_title\u0026#39; %} {% if section.settings[title_key] != blank %} {% assign has_stages = true %} {% break %} {% endif %} {% endfor %} {% if has_stages %} \u0026lt;div class=\u0026#34;wbs-journey-map__timeline-{{ wbs_id }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;wbs-journey-map__line-{{ wbs_id }}\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; {% for i in (1..6) %} {% assign title_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_title\u0026#39; %} {% assign label_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_label\u0026#39; %} {% assign description_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_description\u0026#39; %} {% assign image_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_image\u0026#39; %} {% assign icon_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_icon\u0026#39; %} {% if section.settings[title_key] != blank %} \u0026lt;div class=\u0026#34;wbs-journey-map__stage-{{ wbs_id }}\u0026#34; data-stage\u0026gt; \u0026lt;div class=\u0026#34;wbs-journey-map__stage-marker-{{ wbs_id }}\u0026#34;\u0026gt; {% if section.settings[icon_key] == \u0026#39;number\u0026#39; %} \u0026lt;span class=\u0026#34;wbs-journey-map__stage-number-{{ wbs_id }}\u0026#34;\u0026gt;{{ i }}\u0026lt;/span\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;lightbulb\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;pencil\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;cube\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;gift\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;truck\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% elsif section.settings[icon_key] == \u0026#39;heart\u0026#39; %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% else %} \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt; \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M5 13l4 4L19 7\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; {% endif %} \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;wbs-journey-map__stage-content-{{ wbs_id }}\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;wbs-journey-map__stage-text-{{ wbs_id }}\u0026#34;\u0026gt; {% if section.settings[label_key] != blank %} \u0026lt;span class=\u0026#34;wbs-journey-map__stage-label-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[label_key] }}\u0026lt;/span\u0026gt; {% endif %} \u0026lt;h3 class=\u0026#34;wbs-journey-map__stage-title-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[title_key] }}\u0026lt;/h3\u0026gt; {% if section.settings[description_key] != blank %} \u0026lt;div class=\u0026#34;wbs-journey-map__stage-description-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[description_key] }}\u0026lt;/div\u0026gt; {% endif %} \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;wbs-journey-map__stage-image-{{ wbs_id }}\u0026#34;\u0026gt; {% if section.settings[image_key] != blank %} \u0026lt;img src=\u0026#34;{{ section.settings[image_key] | image_url: width: 800 }}\u0026#34; alt=\u0026#34;{{ section.settings[image_key].alt | escape }}\u0026#34; loading=\u0026#34;lazy\u0026#34; width=\u0026#34;{{ section.settings[image_key].width }}\u0026#34; height=\u0026#34;{{ section.settings[image_key].height }}\u0026#34; \u0026gt; {% else %} \u0026lt;div class=\u0026#34;wbs-journey-map__stage-image-placeholder-{{ wbs_id }}\u0026#34;\u0026gt; {{ \u0026#39;image\u0026#39; | placeholder_svg_tag }} \u0026lt;/div\u0026gt; {% endif %} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; {% endif %} {% endfor %} \u0026lt;/div\u0026gt; {% if section.settings.show_cta and section.settings.cta_text != blank %} \u0026lt;div class=\u0026#34;wbs-journey-map__cta-{{ wbs_id }}\u0026#34;\u0026gt; \u0026lt;a href=\u0026#34;{{ section.settings.cta_link }}\u0026#34; class=\u0026#34;wbs-journey-map__cta-button-{{ wbs_id }}\u0026#34;\u0026gt; {{ section.settings.cta_text }} \u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; {% endif %} {% else %} \u0026lt;div class=\u0026#34;wbs-journey-map__empty-state-{{ wbs_id }}\u0026#34;\u0026gt; {{ \u0026#39;image\u0026#39; | placeholder_svg_tag }} \u0026lt;p\u0026gt;{{ section.settings.empty_state_text }}\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; {% endif %} \u0026lt;/div\u0026gt; \u0026lt;/wbs-journey-map-{{ wbs_id }}\u0026gt; \u0026lt;script\u0026gt; (function() { class JourneyMap{{ wbs_id }} extends HTMLElement { constructor() { super(); this.stages = this.querySelectorAll(\u0026#39;[data-stage]\u0026#39;); this.observerOptions = { threshold: 0.2, rootMargin: \u0026#39;0px 0px -100px 0px\u0026#39; }; } connectedCallback() { this.setupIntersectionObserver(); } setupIntersectionObserver() { const observer = new IntersectionObserver((entries) =\u0026gt; { entries.forEach((entry, index) =\u0026gt; { if (entry.isIntersecting) { setTimeout(() =\u0026gt; { entry.target.classList.add(\u0026#39;visible\u0026#39;); }, index * {{ section.settings.animation_delay }}); observer.unobserve(entry.target); } }); }, this.observerOptions); this.stages.forEach(stage =\u0026gt; { observer.observe(stage); }); } } customElements.define(\u0026#39;wbs-journey-map-{{ wbs_id }}\u0026#39;, JourneyMap{{ wbs_id }}); })(); \u0026lt;/script\u0026gt; {% schema %} { \u0026#34;name\u0026#34;: \u0026#34;Story Timeline\u0026#34;, \u0026#34;settings\u0026#34;: [ { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Content\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;heading\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heading\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Our Product Journey\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;subheading\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Subheading\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Discover the story behind every product we create\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;empty_state_text\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Empty state text\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Add stages to create your product journey\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 1\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_1_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 1\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_1_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Idea\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_1_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Every great product starts with a spark of inspiration and a vision to create something meaningful.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_1_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_1_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;lightbulb\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 2\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_2_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 2\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_2_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Design\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_2_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Our talented designers bring ideas to life with careful attention to detail and aesthetics.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_2_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_2_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;pencil\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 3\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_3_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 3\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_3_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Production\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_3_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Quality craftsmanship meets modern manufacturing to create products that last.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_3_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_3_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;cube\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 4\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_4_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 4\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_4_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Packaging\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_4_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Thoughtfully packaged with sustainability in mind, ready to delight from the moment you receive it.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_4_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_4_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;gift\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 5\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_5_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 5\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_5_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Delivery\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_5_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Fast and reliable shipping ensures your product arrives safely at your doorstep.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_5_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_5_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;truck\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Stage 6\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_6_label\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Step 6\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_6_title\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;You\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_6_description\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;The final and most important step - bringing joy and value to your life every day.\u0026lt;/p\u0026gt;\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_6_image\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;stage_6_icon\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;heart\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Call to action\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;checkbox\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;show_cta\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Show button\u0026#34;, \u0026#34;default\u0026#34;: true }, { \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;cta_text\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Button text\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Explore Our Products\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;url\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;cta_link\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Button link\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Layout\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;max_width\u0026#34;, \u0026#34;min\u0026#34;: 800, \u0026#34;max\u0026#34;: 1400, \u0026#34;step\u0026#34;: 50, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Maximum width\u0026#34;, \u0026#34;default\u0026#34;: 1200 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;heading_size\u0026#34;, \u0026#34;min\u0026#34;: 24, \u0026#34;max\u0026#34;: 56, \u0026#34;step\u0026#34;: 2, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heading size\u0026#34;, \u0026#34;default\u0026#34;: 40 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;subheading_size\u0026#34;, \u0026#34;min\u0026#34;: 14, \u0026#34;max\u0026#34;: 24, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Subheading size\u0026#34;, \u0026#34;default\u0026#34;: 18 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;marker_size\u0026#34;, \u0026#34;min\u0026#34;: 40, \u0026#34;max\u0026#34;: 80, \u0026#34;step\u0026#34;: 5, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Marker size\u0026#34;, \u0026#34;default\u0026#34;: 60 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;card_border_radius\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 40, \u0026#34;step\u0026#34;: 2, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Card border radius\u0026#34;, \u0026#34;default\u0026#34;: 16 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;image_border_radius\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 40, \u0026#34;step\u0026#34;: 2, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image border radius\u0026#34;, \u0026#34;default\u0026#34;: 12 }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;image_aspect_ratio\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Image aspect ratio\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;1 / 1\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Square (1:1)\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;4 / 3\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Landscape (4:3)\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;16 / 9\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Wide (16:9)\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;3 / 4\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Portrait (3:4)\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;4 / 3\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Animation\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_delay\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 500, \u0026#34;step\u0026#34;: 50, \u0026#34;unit\u0026#34;: \u0026#34;ms\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Delay between stages\u0026#34;, \u0026#34;default\u0026#34;: 150 }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Colors\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;background_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;card_background\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Card background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;text_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Text\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#000000\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;subtext_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Subtext\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#666666\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;timeline_start_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Timeline start\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;timeline_end_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Timeline end\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#780406\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;marker_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Marker background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;marker_icon_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Marker icon\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;marker_ring_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Marker ring\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#f9e6e6\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;label_background\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#f1f1f1\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;label_text_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Label text\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#666666\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Button\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;button_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;button_text_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Text\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;button_hover_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Hover background\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#780406\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;button_border_radius\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 40, \u0026#34;step\u0026#34;: 2, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Border radius\u0026#34;, \u0026#34;default\u0026#34;: 8 } ], \u0026#34;presets\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;Story Timeline\u0026#34; } ] } {% endschema %} Story Timeline Shopify Section – Build a Powerful Brand Journey Experience Story Timeline Shopify Section is an effective way to visually communicate your brand’s journey, milestones, and values. Instead of presenting plain text on your About Us page, a timeline section allows you to tell your story step by step in a clean, engaging, and interactive format. This approach helps customers connect emotionally with your brand and builds long-term trust.\nWhat is a Story Timeline Shopify Section? A Story Timeline Shopify Section is a custom Shopify section designed to display key stages of your brand or product journey in chronological order. Each stage usually includes a label, title, description, image, and icon. The alternating left-right layout, combined with animations, keeps users engaged as they scroll through your story.\nThe section you’re using is a fully customizable Liquid-based solution, not a basic app. It utilizes dynamic settings from the Shopify theme editor, enabling merchants to update content without requiring code modifications.\nHow this custom code improves your Shopify store The provided Story Timeline Shopify Section code is well-structured and optimized for performance and flexibility. It uses:\nDynamic IDs (wbs_id) to prevent CSS and JS conflicts Responsive grid layouts that adapt perfectly to mobile devices Intersection Observer animations for smooth scroll-based reveals Theme editor settings for colors, typography, spacing, icons, and images Each stage (up to six) can be enabled or disabled automatically based on content availability, ensuring the section never looks broken or empty.\nCustomization made easy Through the Shopify schema settings, store owners can easily manage:\nTimeline headings and subheadings Stage titles, descriptions, labels, and icons Image aspect ratios and border radius Timeline colors, marker size, and animation delays Optional call-to-action button at the bottom This makes the Story Timeline Shopify Section ideal for non-technical users while still offering advanced design control for developers.\nFinal thoughts A well-designed Story Timeline Shopify Section turns your store into more than just a product catalog—it becomes a brand experience. With clean Liquid code, responsive design, and customizable settings, this timeline section is a powerful addition to any Shopify store focused on trust, transparency, and growth.\n","permalink":"/posts/shopify/story-timeline-in-shopify/","summary":"\u003cp\u003eCreate a new section file called \u003cstrong\u003estory-timeline.liquid\u003c/strong\u003e and add the following code:\u003c/p\u003e\n\u003cdetails\u003e\n\u003csummary\u003eShow Code\u003c/summary\u003e\n\n\u003cdiv class=\"code-block\" data-lang=\"liquid\"\u003e\u003cpre tabindex=\"0\"\u003e\u003ccode class=\"language-liquid\" data-lang=\"liquid\"\u003e\n{% assign wbs_id = block.id | replace: \u0026#39;_\u0026#39;, \u0026#39;\u0026#39; | downcase %}\n\n{% style %}\n  .wbs-journey-map-{{ wbs_id }} {\n    padding: 60px 20px;\n    background-color: {{ section.settings.background_color }};\n    overflow: hidden;\n  }\n\n  .wbs-journey-map__heading-{{ wbs_id }} {\n    text-align: center;\n    margin-bottom: 20px;\n    color: {{ section.settings.text_color }};\n    font-size: {{ section.settings.heading_size }}px;\n  }\n\n  .wbs-journey-map__subheading-{{ wbs_id }} {\n    text-align: center;\n    margin-bottom: 60px;\n    color: {{ section.settings.subtext_color }};\n    font-size: {{ section.settings.subheading_size }}px;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .wbs-journey-map__container-{{ wbs_id }} {\n    max-width: {{ section.settings.max_width }}px;\n    margin: 0 auto;\n    position: relative;\n  }\n\n  .wbs-journey-map__timeline-{{ wbs_id }} {\n    position: relative;\n    padding: 40px 0;\n  }\n\n  .wbs-journey-map__line-{{ wbs_id }} {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 4px;\n    height: 100%;\n    background: linear-gradient(to bottom, {{ section.settings.timeline_start_color }}, {{ section.settings.timeline_end_color }});\n    border-radius: 2px;\n  }\n\n  @media screen and (max-width: 768px) {\n    .wbs-journey-map__line-{{ wbs_id }} {\n      left: 30px;\n    }\n  }\n\n  .wbs-journey-map__stage-{{ wbs_id }} {\n    position: relative;\n    margin-bottom: 80px;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: all 0.6s ease;\n  }\n\n  .wbs-journey-map__stage-{{ wbs_id }}.visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .wbs-journey-map__stage-{{ wbs_id }}:last-child {\n    margin-bottom: 0;\n  }\n\n  .wbs-journey-map__stage-content-{{ wbs_id }} {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 60px;\n    align-items: center;\n  }\n\n  @media screen and (max-width: 768px) {\n    .wbs-journey-map__stage-content-{{ wbs_id }} {\n      grid-template-columns: 1fr;\n      gap: 20px;\n      padding-left: 80px;\n    }\n  }\n\n  .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} {\n    direction: rtl;\n  }\n\n  .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-text-{{ wbs_id }},\n  .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-image-{{ wbs_id }} {\n    direction: ltr;\n  }\n\n  @media screen and (max-width: 768px) {\n    .wbs-journey-map__stage-{{ wbs_id }}:nth-child(even) .wbs-journey-map__stage-content-{{ wbs_id }} {\n      direction: ltr;\n    }\n  }\n\n  .wbs-journey-map__stage-marker-{{ wbs_id }} {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: {{ section.settings.marker_size }}px;\n    height: {{ section.settings.marker_size }}px;\n    background-color: {{ section.settings.marker_color }};\n    border: 4px solid {{ section.settings.background_color }};\n    border-radius: 50%;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 0 0 8px {{ section.settings.marker_ring_color }};\n  }\n\n  @media screen and (max-width: 768px) {\n    .wbs-journey-map__stage-marker-{{ wbs_id }} {\n      left: 30px;\n    }\n  }\n\n  .wbs-journey-map__stage-marker-{{ wbs_id }} svg {\n    width: 50%;\n    height: 50%;\n    color: {{ section.settings.marker_icon_color }};\n  }\n\n  .wbs-journey-map__stage-number-{{ wbs_id }} {\n    font-size: 18px;\n    font-weight: 700;\n    color: {{ section.settings.marker_icon_color }};\n  }\n\n  .wbs-journey-map__stage-text-{{ wbs_id }} {\n    padding: 30px;\n    background-color: {{ section.settings.card_background }};\n    border-radius: {{ section.settings.card_border_radius }}px;\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n    transition: all 0.3s ease;\n  }\n\n  .wbs-journey-map__stage-text-{{ wbs_id }}:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);\n  }\n\n  .wbs-journey-map__stage-label-{{ wbs_id }} {\n    display: inline-block;\n    padding: 6px 16px;\n    background-color: {{ section.settings.label_background }};\n    color: {{ section.settings.label_text_color }};\n    border-radius: 20px;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin-bottom: 15px;\n  }\n\n  .wbs-journey-map__stage-title-{{ wbs_id }} {\n    font-size: 28px;\n    font-weight: 700;\n    margin-bottom: 15px;\n    color: {{ section.settings.text_color }};\n  }\n\n  .wbs-journey-map__stage-description-{{ wbs_id }} {\n    font-size: 16px;\n    line-height: 1.6;\n    color: {{ section.settings.subtext_color }};\n  }\n\n  .wbs-journey-map__stage-image-{{ wbs_id }} {\n    position: relative;\n    border-radius: {{ section.settings.image_border_radius }}px;\n    overflow: hidden;\n    aspect-ratio: {{ section.settings.image_aspect_ratio }};\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n  }\n\n  .wbs-journey-map__stage-image-{{ wbs_id }} img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n  }\n\n  .wbs-journey-map__stage-image-{{ wbs_id }}:hover img {\n    transform: scale(1.05);\n  }\n\n  .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} {\n    width: 100%;\n    height: 100%;\n    background-color: #f4f4f4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .wbs-journey-map__stage-image-placeholder-{{ wbs_id }} svg {\n    width: 80px;\n    height: 80px;\n    opacity: 0.3;\n  }\n\n  .wbs-journey-map__cta-{{ wbs_id }} {\n    text-align: center;\n    margin-top: 60px;\n  }\n\n  .wbs-journey-map__cta-button-{{ wbs_id }} {\n    display: inline-block;\n    padding: 16px 40px;\n    background-color: {{ section.settings.button_color }};\n    color: {{ section.settings.button_text_color }};\n    text-decoration: none;\n    border-radius: {{ section.settings.button_border_radius }}px;\n    font-size: 18px;\n    font-weight: 600;\n    transition: all 0.3s ease;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n  }\n\n  .wbs-journey-map__cta-button-{{ wbs_id }}:hover {\n    background-color: {{ section.settings.button_hover_color }};\n    transform: translateY(-2px);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);\n  }\n\n  .wbs-journey-map__empty-state-{{ wbs_id }} {\n    text-align: center;\n    padding: 80px 20px;\n    color: {{ section.settings.subtext_color }};\n  }\n\n  .wbs-journey-map__empty-state-{{ wbs_id }} svg {\n    width: 100px;\n    height: 100px;\n    margin-bottom: 20px;\n    opacity: 0.3;\n  }\n{% endstyle %}\n\n\u0026lt;wbs-journey-map-{{ wbs_id }} class=\u0026#34;wbs-journey-map-{{ wbs_id }}\u0026#34; {{ section.shopify_attributes }}\u0026gt;\n  {% if section.settings.heading != blank %}\n    \u0026lt;h2 class=\u0026#34;wbs-journey-map__heading-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings.heading }}\u0026lt;/h2\u0026gt;\n  {% endif %}\n\n  {% if section.settings.subheading != blank %}\n    \u0026lt;div class=\u0026#34;wbs-journey-map__subheading-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings.subheading }}\u0026lt;/div\u0026gt;\n  {% endif %}\n\n  \u0026lt;div class=\u0026#34;wbs-journey-map__container-{{ wbs_id }}\u0026#34;\u0026gt;\n    {% assign has_stages = false %}\n    {% for i in (1..6) %}\n      {% assign title_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_title\u0026#39; %}\n      {% if section.settings[title_key] != blank %}\n        {% assign has_stages = true %}\n        {% break %}\n      {% endif %}\n    {% endfor %}\n\n    {% if has_stages %}\n      \u0026lt;div class=\u0026#34;wbs-journey-map__timeline-{{ wbs_id }}\u0026#34;\u0026gt;\n        \u0026lt;div class=\u0026#34;wbs-journey-map__line-{{ wbs_id }}\u0026#34;\u0026gt;\u0026lt;/div\u0026gt;\n\n        {% for i in (1..6) %}\n          {% assign title_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_title\u0026#39; %}\n          {% assign label_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_label\u0026#39; %}\n          {% assign description_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_description\u0026#39; %}\n          {% assign image_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_image\u0026#39; %}\n          {% assign icon_key = \u0026#39;stage_\u0026#39; | append: i | append: \u0026#39;_icon\u0026#39; %}\n\n          {% if section.settings[title_key] != blank %}\n            \u0026lt;div class=\u0026#34;wbs-journey-map__stage-{{ wbs_id }}\u0026#34; data-stage\u0026gt;\n              \u0026lt;div class=\u0026#34;wbs-journey-map__stage-marker-{{ wbs_id }}\u0026#34;\u0026gt;\n                {% if section.settings[icon_key] == \u0026#39;number\u0026#39; %}\n                  \u0026lt;span class=\u0026#34;wbs-journey-map__stage-number-{{ wbs_id }}\u0026#34;\u0026gt;{{ i }}\u0026lt;/span\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;lightbulb\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;pencil\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;cube\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;gift\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;truck\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% elsif section.settings[icon_key] == \u0026#39;heart\u0026#39; %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% else %}\n                  \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; fill=\u0026#34;none\u0026#34; viewBox=\u0026#34;0 0 24 24\u0026#34; stroke=\u0026#34;currentColor\u0026#34;\u0026gt;\n                    \u0026lt;path stroke-linecap=\u0026#34;round\u0026#34; stroke-linejoin=\u0026#34;round\u0026#34; stroke-width=\u0026#34;2\u0026#34; d=\u0026#34;M5 13l4 4L19 7\u0026#34; /\u0026gt;\n                  \u0026lt;/svg\u0026gt;\n                {% endif %}\n              \u0026lt;/div\u0026gt;\n\n              \u0026lt;div class=\u0026#34;wbs-journey-map__stage-content-{{ wbs_id }}\u0026#34;\u0026gt;\n                \u0026lt;div class=\u0026#34;wbs-journey-map__stage-text-{{ wbs_id }}\u0026#34;\u0026gt;\n                  {% if section.settings[label_key] != blank %}\n                    \u0026lt;span class=\u0026#34;wbs-journey-map__stage-label-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[label_key] }}\u0026lt;/span\u0026gt;\n                  {% endif %}\n                  \u0026lt;h3 class=\u0026#34;wbs-journey-map__stage-title-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[title_key] }}\u0026lt;/h3\u0026gt;\n                  {% if section.settings[description_key] != blank %}\n                    \u0026lt;div class=\u0026#34;wbs-journey-map__stage-description-{{ wbs_id }}\u0026#34;\u0026gt;{{ section.settings[description_key] }}\u0026lt;/div\u0026gt;\n                  {% endif %}\n                \u0026lt;/div\u0026gt;\n\n                \u0026lt;div class=\u0026#34;wbs-journey-map__stage-image-{{ wbs_id }}\u0026#34;\u0026gt;\n                  {% if section.settings[image_key] != blank %}\n                    \u0026lt;img \n                      src=\u0026#34;{{ section.settings[image_key] | image_url: width: 800 }}\u0026#34; \n                      alt=\u0026#34;{{ section.settings[image_key].alt | escape }}\u0026#34;\n                      loading=\u0026#34;lazy\u0026#34;\n                      width=\u0026#34;{{ section.settings[image_key].width }}\u0026#34;\n                      height=\u0026#34;{{ section.settings[image_key].height }}\u0026#34;\n                    \u0026gt;\n                  {% else %}\n                    \u0026lt;div class=\u0026#34;wbs-journey-map__stage-image-placeholder-{{ wbs_id }}\u0026#34;\u0026gt;\n                      {{ \u0026#39;image\u0026#39; | placeholder_svg_tag }}\n                    \u0026lt;/div\u0026gt;\n                  {% endif %}\n                \u0026lt;/div\u0026gt;\n              \u0026lt;/div\u0026gt;\n            \u0026lt;/div\u0026gt;\n          {% endif %}\n        {% endfor %}\n      \u0026lt;/div\u0026gt;\n\n      {% if section.settings.show_cta and section.settings.cta_text != blank %}\n        \u0026lt;div class=\u0026#34;wbs-journey-map__cta-{{ wbs_id }}\u0026#34;\u0026gt;\n          \u0026lt;a href=\u0026#34;{{ section.settings.cta_link }}\u0026#34; class=\u0026#34;wbs-journey-map__cta-button-{{ wbs_id }}\u0026#34;\u0026gt;\n            {{ section.settings.cta_text }}\n          \u0026lt;/a\u0026gt;\n        \u0026lt;/div\u0026gt;\n      {% endif %}\n    {% else %}\n      \u0026lt;div class=\u0026#34;wbs-journey-map__empty-state-{{ wbs_id }}\u0026#34;\u0026gt;\n        {{ \u0026#39;image\u0026#39; | placeholder_svg_tag }}\n        \u0026lt;p\u0026gt;{{ section.settings.empty_state_text }}\u0026lt;/p\u0026gt;\n      \u0026lt;/div\u0026gt;\n    {% endif %}\n  \u0026lt;/div\u0026gt;\n\u0026lt;/wbs-journey-map-{{ wbs_id }}\u0026gt;\n\n\u0026lt;script\u0026gt;\n  (function() {\n    class JourneyMap{{ wbs_id }} extends HTMLElement {\n      constructor() {\n        super();\n        this.stages = this.querySelectorAll(\u0026#39;[data-stage]\u0026#39;);\n        this.observerOptions = {\n          threshold: 0.2,\n          rootMargin: \u0026#39;0px 0px -100px 0px\u0026#39;\n        };\n      }\n\n      connectedCallback() {\n        this.setupIntersectionObserver();\n      }\n\n      setupIntersectionObserver() {\n        const observer = new IntersectionObserver((entries) =\u0026gt; {\n          entries.forEach((entry, index) =\u0026gt; {\n            if (entry.isIntersecting) {\n              setTimeout(() =\u0026gt; {\n                entry.target.classList.add(\u0026#39;visible\u0026#39;);\n              }, index * {{ section.settings.animation_delay }});\n              observer.unobserve(entry.target);\n            }\n          });\n        }, this.observerOptions);\n\n        this.stages.forEach(stage =\u0026gt; {\n          observer.observe(stage);\n        });\n      }\n    }\n\n    customElements.define(\u0026#39;wbs-journey-map-{{ wbs_id }}\u0026#39;, JourneyMap{{ wbs_id }});\n  })();\n\u0026lt;/script\u0026gt;\n\n{% schema %}\n{\n  \u0026#34;name\u0026#34;: \u0026#34;Story Timeline\u0026#34;,\n  \u0026#34;settings\u0026#34;: [\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Content\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;heading\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Heading\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Our Product Journey\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;subheading\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Subheading\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Discover the story behind every product we create\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;empty_state_text\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Empty state text\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Add stages to create your product journey\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 1\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_1_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 1\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_1_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Idea\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_1_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Every great product starts with a spark of inspiration and a vision to create something meaningful.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_1_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_1_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;lightbulb\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 2\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_2_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 2\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_2_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Design\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_2_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Our talented designers bring ideas to life with careful attention to detail and aesthetics.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_2_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_2_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;pencil\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 3\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_3_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 3\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_3_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Production\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_3_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Quality craftsmanship meets modern manufacturing to create products that last.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_3_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_3_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;cube\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 4\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_4_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 4\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_4_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Packaging\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_4_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Thoughtfully packaged with sustainability in mind, ready to delight from the moment you receive it.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_4_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_4_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;gift\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 5\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_5_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 5\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_5_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Delivery\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_5_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;Fast and reliable shipping ensures your product arrives safely at your doorstep.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_5_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_5_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;truck\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Stage 6\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_6_label\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Step 6\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_6_title\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Title\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;You\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_6_description\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Description\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;The final and most important step - bringing joy and value to your life every day.\u0026lt;/p\u0026gt;\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;image_picker\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_6_image\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;stage_6_icon\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Icon\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;number\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Number\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;lightbulb\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Lightbulb\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;pencil\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pencil\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;cube\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Cube\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;gift\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Gift\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;truck\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Truck\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;heart\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Heart\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;check\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Check\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;heart\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Call to action\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;checkbox\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;show_cta\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Show button\u0026#34;,\n      \u0026#34;default\u0026#34;: true\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;inline_richtext\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;cta_text\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Button text\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;Explore Our Products\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;url\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;cta_link\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Button link\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Layout\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;max_width\u0026#34;,\n      \u0026#34;min\u0026#34;: 800,\n      \u0026#34;max\u0026#34;: 1400,\n      \u0026#34;step\u0026#34;: 50,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Maximum width\u0026#34;,\n      \u0026#34;default\u0026#34;: 1200\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;heading_size\u0026#34;,\n      \u0026#34;min\u0026#34;: 24,\n      \u0026#34;max\u0026#34;: 56,\n      \u0026#34;step\u0026#34;: 2,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Heading size\u0026#34;,\n      \u0026#34;default\u0026#34;: 40\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;subheading_size\u0026#34;,\n      \u0026#34;min\u0026#34;: 14,\n      \u0026#34;max\u0026#34;: 24,\n      \u0026#34;step\u0026#34;: 1,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Subheading size\u0026#34;,\n      \u0026#34;default\u0026#34;: 18\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;marker_size\u0026#34;,\n      \u0026#34;min\u0026#34;: 40,\n      \u0026#34;max\u0026#34;: 80,\n      \u0026#34;step\u0026#34;: 5,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Marker size\u0026#34;,\n      \u0026#34;default\u0026#34;: 60\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;card_border_radius\u0026#34;,\n      \u0026#34;min\u0026#34;: 0,\n      \u0026#34;max\u0026#34;: 40,\n      \u0026#34;step\u0026#34;: 2,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Card border radius\u0026#34;,\n      \u0026#34;default\u0026#34;: 16\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;image_border_radius\u0026#34;,\n      \u0026#34;min\u0026#34;: 0,\n      \u0026#34;max\u0026#34;: 40,\n      \u0026#34;step\u0026#34;: 2,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image border radius\u0026#34;,\n      \u0026#34;default\u0026#34;: 12\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;image_aspect_ratio\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Image aspect ratio\u0026#34;,\n      \u0026#34;options\u0026#34;: [\n        { \u0026#34;value\u0026#34;: \u0026#34;1 / 1\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Square (1:1)\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;4 / 3\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Landscape (4:3)\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;16 / 9\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Wide (16:9)\u0026#34; },\n        { \u0026#34;value\u0026#34;: \u0026#34;3 / 4\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Portrait (3:4)\u0026#34; }\n      ],\n      \u0026#34;default\u0026#34;: \u0026#34;4 / 3\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Animation\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;animation_delay\u0026#34;,\n      \u0026#34;min\u0026#34;: 0,\n      \u0026#34;max\u0026#34;: 500,\n      \u0026#34;step\u0026#34;: 50,\n      \u0026#34;unit\u0026#34;: \u0026#34;ms\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Delay between stages\u0026#34;,\n      \u0026#34;default\u0026#34;: 150\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Colors\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;background_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;card_background\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Card background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;text_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Text\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#000000\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;subtext_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Subtext\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#666666\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;timeline_start_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Timeline start\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;timeline_end_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Timeline end\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#780406\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;marker_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Marker background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;marker_icon_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Marker icon\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;marker_ring_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Marker ring\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#f9e6e6\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;label_background\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#f1f1f1\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;label_text_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Label text\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#666666\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;,\n      \u0026#34;content\u0026#34;: \u0026#34;Button\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;button_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#a42325\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;button_text_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Text\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#ffffff\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;button_hover_color\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Hover background\u0026#34;,\n      \u0026#34;default\u0026#34;: \u0026#34;#780406\u0026#34;\n    },\n    {\n      \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;,\n      \u0026#34;id\u0026#34;: \u0026#34;button_border_radius\u0026#34;,\n      \u0026#34;min\u0026#34;: 0,\n      \u0026#34;max\u0026#34;: 40,\n      \u0026#34;step\u0026#34;: 2,\n      \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;,\n      \u0026#34;label\u0026#34;: \u0026#34;Border radius\u0026#34;,\n      \u0026#34;default\u0026#34;: 8\n    }\n  ],\n  \u0026#34;presets\u0026#34;: [\n    {\n      \u0026#34;name\u0026#34;: \u0026#34;Story Timeline\u0026#34;\n    }\n  ]\n}\n{% endschema %}\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\u003c/details\u003e\n\u003ch2 id=\"story-timeline-shopify-section--build-a-powerful-brand-journey-experience\"\u003eStory Timeline Shopify Section – Build a Powerful Brand Journey Experience\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eStory Timeline Shopify Section\u003c/strong\u003e is an effective way to visually communicate your brand’s journey, milestones, and values. Instead of presenting plain text on your About Us page, a timeline section allows you to tell your story step by step in a clean, engaging, and interactive format. This approach helps customers connect emotionally with your brand and builds long-term trust.\u003c/p\u003e","title":"Story Timeline In Shopify(Without app- Free)"},{"content":"Web development is changing every year as there are new innovations and upgrades in technologies that make user experience and development better.\nAs a business owner and a website owner, it becomes important to have knowledge of what the future is going to be like.\nThere might be some new changes that you can implement in your website to sustain in this ever-changing market.\nConsidering this fact we will be discussing some web development trends that you would likely see in 2023.\n1. Blockchain Technology Blockchain is famous for its security and error-free data storage. With blockchain, users can perform safe transactions without interference from third parties. It has the potential to revolutionize business sectors by reducing cyber crimes.\nBlockchain works on algorithms that are impossible to break. All the data is stored on the network so that it is easily available to users. As the whole system is decentralized chances of mistakes reduce. If the need to transfer data across the network arises, no intermediaries are required.\nA lot of giant companies like Visa, Barclays, Walmart, etc adopted blockchain technology. As of now, there are only two service providers that offer this technology: MS Azure Blockchain Service and Amazon Web Services.\n2. PWA A Progressive Web Application is popular for its high-quality user experience. It has the potential to work as an alternative to native mobile apps.\nIt can deliver an excellent experience even when the user is offline using cached content. The most useful and trendy feature like push notifications is also available is PWAs. All it needs is a browser to work.\nThe benefit of using PWAs during web development is that it is capable of combining the capabilities of a mobile app and a website. The result is you get an excellent user experience, and improve user engagement and conversion rates.\nPopular platforms like Spotify and Starbucks have PWAs.\n3. IoT IoT was going to trend in 2024 as it is great when it comes to data transfer. It helps you engage with your customers easily and improves engagement.\nIoT works with all forms of operational models and website layouts. It can also be seen in sensors, cameras, and other equipment. This helps in solving client requirements more efficiently.\nThe best way to develop a smart ecosystem is by using IoT devices. It delivers data without any delay or errors. After using IoT you will gain more insights, improve overall user experience, analyse customer behaviour and more.\n4. AMP Accelerated Mobile Pages optimizes pages to load faster. Fast-loading pages rank better. AMP helps in making websites more user oriented and delivers a good website experience to low-speed internet users.\nSo the major benefit of using AMP is for SEO. You won’t need any sitemaps to get identified by search engines. It will also help lower bounce rates.\n5. AI Chatbots A smarter version of regular chatbots, AI chatbots use Natural Processing Language and Machine Learning to understand users’ intent and offer a human-like experience.\nThese chatbots are the future and they will help companies save costs by replacing the 24*7 support teams. It is easily integrable with websites and PWAs.\nIntegrating AI chatbots would be a good investment for a company. They can answer frequently asked questions, navigate customers to the right human assistant, and also take orders.\nThey are quick with responses and so resolve complaints faster. Thus, this elevates the user experience.\n6. Content Personalization Content personalization is an AI-driven approach to displaying relevant content. Developers use ML to enable software that can analyze incoming data, and detect patterns and personalized content. This technique can help companies elevate user experience.\nThe best examples are Netflix, Pinterest, Spotify, and many more. It curates results for viewers using ML. You don’t have to target a whole segment of users to personalize content. ML can identify each user’s interests and behaviour to show results based on that.\n7. Motion UI Beautiful creative websites can attract more eyes. Motion UI is an approach to make websites more intuitive and user-friendly.\nIt will definitely be trending in 2023 as web development with Motion UI offers an enjoyable user experience.\n8. Micro Frontends As the name explains, Micro Frontends break frontend monoliths into smaller manageable pieces. Microservice Architecture helps developers build a flexible backend, Micro Frontends help by cutting code in simple units before testing and deploying separately. It is easier to upgrade these and make the workflow simple.\nSo if you have a huge project and large-scale workflow, it becomes easier to manage it. As the codebases are small it becomes easy to manage. Smaller codebases promote reusability saving time and effort for your developers during website development.\n9. VR Virtuality is surely going to be seen more in 2023. VR is useful for virtual meetings. It can enhance the remote work culture for companies. The main purpose of using this is to create the best user experience which is the reason it will trend.\nVR helps customers visualise the products they are planning to buy. It is going to change the way travel and e-commerce industries function. Volvo used VR for test drives while IKEA is selling furniture online and giving more clarity on how that furniture will look in their home/offices.\n10. SPAs One of the most successful types of application is Single Page Application. Facebook, Google, Twitter, Netflix, PayPal, and much more use SPA and is very much expected that it will be in demand in 2023 as well.\nIt holds the attention of users and they seem to operate quickly. A visitor will have instant feedback, unlike regular websites. Here users don’t have to wait until the page loads.\nConclusion It is for sure that 2026 is going to witness a lot of advancement in web development. We discussed some important trends that can shape web development with a new perspective. All these trends focus on improving user experience which is quite the demand. If you know and implement these, it will help you maintain your position in this updating market.\nIn today’s digital landscape, the cost of digital marketing can vary significantly, from budget-friendly options like social media posting to more substantial investments in PPC advertising and SEO optimization. Understanding your business goals and target audience is key to determining the most effective and efficient allocation of resources within your digital marketing budget. Balancing cost-effectiveness with strategic planning can ensure that every dollar spent delivers measurable results and contributes to the growth of your online presence.\n","permalink":"/posts/html-5/10-web-development-trends/","summary":"\u003cp\u003eWeb development is changing every year as there are new innovations and upgrades in technologies that make user experience and development better.\u003c/p\u003e\n\u003cp\u003eAs a business owner and a website owner, it becomes important to have knowledge of what the future is going to be like.\u003c/p\u003e\n\u003cp\u003eThere might be some new changes that you can implement in your website to sustain in this ever-changing market.\u003c/p\u003e\n\u003cp\u003eConsidering this fact we will be discussing some web development trends that you would likely see in 2023.\u003c/p\u003e","title":"10 Web Development Trends"},{"content":"Thursday, May 21, 2026, it began – on June 2, 2026, it was over. Google marked the May 2026 Core Update as officially complete after roughly twelve days. The entry in the Google Search Status Dashboard is unambiguous: “The rollout was complete as of June 2, 2026.” The second confirmed broad core update of 2026 is done – and the phase in which reacting would only have produced noise is over.\nThe start fell on a notable moment: just 48 hours after Google I/O 2026, where Google presented what it described as one of its largest Search upgrades in years. Whether there is any substantive connection between the I/O announcements and this core update has not been communicated by Google. The timing is still worth noting.\nIn this article: The confirmed key dates for the completed May 2026 Core Update, the documented volatility course, the DACH status, the Google I/O 2026 context – and above all, how to cleanly analyze now whether your site was affected.\nThe Facts: Start, Duration, Completion Key Takeaway: Start May 21, 2026, completion June 2, 2026 – roughly twelve days of rollout. Both the announcement and the completion ran exclusively via the Google Search Status Dashboard and the Search Central account on X and LinkedIn, with no companion blog post. Google framed the update as a regular measure, not a special case. The official announcement came directly via the Google Search Status Dashboard . The start entry from May 21, 2026, 8:43 AM PDT reads: “Released the May 2026 core update. The rollout may take up to 2 weeks to complete.” Exactly twelve days later, on June 2, 2026 at 5:43 AM PDT, the completion entry followed: “The rollout was complete as of June 2, 2026.” There was no companion blog post, neither at launch nor at completion. This is now Google’s standard approach for broad core updates – the March 2026 Core Update was identical in this regard, with no supplementary document outlining update goals or affected sectors.\nParameter Details Start date May 21, 2026, per Dashboard entry around 8:40 AM PDT (5:40 PM CEST) Completion date June 2, 2026, 5:40 AM PDT (2:40 PM CEST) – officially confirmed Rollout duration Roughly 12 days (within the announced two-week window) Update type Broad Core Update (Ranking) Affected systems Google Search Ranking – global, all languages Official sources Google Search Status Dashboard, Search Central X/LinkedIn Companion blog post None Tip: The Google Search Status Dashboard at status.search.google.com remains the only official real-time source for update status and completion confirmation. For analysis: the completion date logged there (June 2) is the anchor point from which you count the waiting period until reliable analysis.\nRollout Complete: Timeline and Volatility Course Key Takeaway: The rollout ran from May 21 to June 2, 2026 and was marked by several volatility spikes – per industry reports especially on May 23, around May 30, and again in the 24 hours before completion. Google itself published no winners/losers profile and only reiterated its standard note that site owners need not do anything special. Fact (primary source): In the Google Search Status Dashboard the incident now shows as “Resolved.” Per the entry, it ran from 2026-05-21 08:40 to 2026-06-02 05:40 (times in US/Pacific). The completion note from June 2, 2026, 5:43 AM PDT reads verbatim: “The rollout was complete as of June 2, 2026.” The course at a glance – the key documented milestones of the rollout:\nTime Event May 21, 8:43 AM PDT Start entry in the Dashboard, rollout begins May 23 (Saturday) First strong ranking movements per industry tools (source: Search Engine Land) around May 28–30 Visibility peak and emerging trend reversal; renewed high volatility (sources: SEO Südwest, May 29; Search Engine Land) June 1–2 Renewed volatility in the 24 hours before completion (source: Search Engine Land) June 2, 5:43 AM PDT Completion entry in the Dashboard: “complete as of June 2, 2026” Industry observation (attributed):\nSEO Südwest reported an emerging trend reversal on May 29, 2026. According to that report, many websites in the ongoing core update were giving back “part of their gains” – though the documented examples still netted a clear increase. The pattern described: a visibility peak around May 28, followed by a decline the next day. (Source: SEO Südwest, May 29, 2026) Important context – visibility is not traffic:\nThe same analysis documented cases where visibility rose by more than 50 percent without clicks following suit. This is a recurring misunderstanding: visibility indices like Sistrix or Semrush are extrapolated ranking estimates across a keyword set – not a measurement of actual clicks. What ultimately holds up is the before-and-after comparison of your own Search Console data. Striking across the entire rollout window – desktop and mobile diverged sharply:\nThe Semrush Sensor for the Germany database (all categories) shows a clear pattern over the 30-day window. Desktop stayed consistently low (peak around 1.3, at 1.4 on June 3 – “Low range”), while mobile repeatedly jumped into the “High range” – with spikes around May 18, May 30, and again on June 1-2, still at 5.5 on June 3. Mobile volatility was thus several times higher than desktop for long stretches. Anyone watching desktop rankings only may, in my assessment, have missed the larger part of the movement – especially in the mobile-dominated DACH traffic. (Source: Semrush Sensor, Germany, all categories, 30-day course, as of June 3, 2026) What Google said at completion: A substantive recap or a profile of affected sectors did not materialize. Google merely repeated its standard framing – the update was “a regular update designed to better surface relevant, satisfying content for searchers from all types of sites,” and there was “nothing new or special that creators need to do” as long as they make satisfying content for people. (Source: Google Search Central / Search Engine Land) My take:\nThe repeated cycle of rise, pullback and renewed movement right up to the finish is exactly why reactive re-optimizing during a rollout is rarely wise. Anyone who had “course-corrected” in late May based on a visibility gain might have optimized toward an interim result that looked different again by June 2. Now, after completion, analysis finally makes sense. Timing and Context: Google I/O 2026 Key Takeaway: The May 2026 Core Update started two days after Google I/O 2026 – close in timing, but no confirmed substantive connection. Google presented what it described as major Search upgrades at I/O. The context matters for understanding the ranking environment, independently of the update itself. On May 19, 2026, Google held the I/O keynote. Elizabeth Reid, VP of Search, published the blog post “A new era for AI Search” (Google Blog, May 19, 2026). Then, two days later, the core update. Coincidence? Likely. But the context is still relevant for how you interpret the ranking environment going forward.\nWhat Google communicated at I/O 2026, according to the official Google blog post:\nOn May 19, 2026, Google held the I/O keynote. Elizabeth Reid, VP of Search, published the blog post “A new era for AI Search” (Google Blog, May 19, 2026). Then, two days later, the core update. Coincidence? Likely. But the context is still relevant for how you interpret the ranking environment going forward.\nWhat Google communicated at I/O 2026, according to the official Google blog post:\nAI Mode:\nGoogle states that AI Mode surpassed one billion monthly users within one year of launch. According to Google, queries more than doubled every quarter. Now globally available in all supported countries and languages. Gemini 3.5 Flash:\nNew default model in AI Mode worldwide – Google describes it as delivering “sustained frontier performance for agents and coding.” Information Agents:\n24/7 background agents that continuously monitor the web based on user-defined criteria and deliver synthesized updates. Launching summer 2026 for Google AI Pro and Ultra subscribers. Search box redesign:\nAccording to Google, “the biggest upgrade to our Search box in over 25 years.” Now supports text, images, files, videos, and Chrome tabs multimodally. Personal Intelligence:\nExpanded to nearly 200 countries and territories in 98 languages – no subscription required. My take on the timing: Core updates and feature releases follow different development cycles at Google – the two-day gap is most likely coincidental. What I can say: the search context in which this core update operates has shifted through the I/O announcements. Anyone treating AI Mode as a fringe phenomenon is, in my view, assessing their ranking landscape only partially.\n1. Google’s Still All About Helping Users Google made it crystal clear: their number one goal is to give users the best experience possible. Even with all the fancy AI stuff happening, search isn’t “done” yet. New platforms, changing user habits, and cool tech keep popping up, so Google’s always working to stay ahead. They’re also helping website owners with tools like Google Search Console and Google Analytics to drive traffic and grow online. Pretty user-friendly, right? 2. AI Content? No Problem, If It’s Helpful Wondering if you can use AI to create content? Google’s John Mueller said it’s totally fine—as long as it’s valuable for your audience. But here’s the catch: if your AI-generated content is just fluff or trying to trick search engines, Google’s quality checkers might flag it as low-quality. This comes from their updated January 2025 guidelines. So, focus on creating stuff that actually helps your readers, and you’re good to go! 3. How AI Search and AI Overviews Function and Optimization Strategies John Mueller detailed the integration of Large Language Models (LLMs) with search using Retrieval-Augmented Generation (RAG) and the grounding process for AI Overviews. He noted that opting out of AI Overviews is possible via the robots “nosnippet” configuration, as Google treats them as a search feature. Mueller clarified that no specific optimization is needed for Google’s AI features due to their novelty and evolving user behavior. However, he recommended using structured data for its efficiency and readability, focusing on elements visible in Search Engine Results Pages (SERPs).\nRegarding LLMs.txt, Mueller explained it may be relevant for systems unfamiliar with a site but is unlikely to be considered by Google, given their extensive site data. Currently, no AI systems are known to use LLMs.txt. Additionally, Google’s extended robots.txt controls allow management of content used for training Gemini and Vertex AI. This is a user-agent token, not a crawler, and does not impact search indexing or rankings. 4. Keeping an Eye on AI Overviews Is Tricky Want to know how AI Overviews are affecting your site? It’s not easy right now because Google Search Console doesn’t give much data on this. But don’t worry—Google’s working on better tracking tools, like updating data every hour, to help you see what’s going on. For now, just keep creating great content and stay tuned for updates! 5. The Future of Search Is AI + Classic SEO AI is shaking things up, but Google says the basics of SEO—like making sure your site is crawlable and indexable—are still super important. Think of it like this: AI is the shiny new toy, but the old-school SEO tricks are the foundation that keeps everything running smoothly. So, keep up with both to stay ahead in the game. Why This Matters The news from this Madrid meetup shows that Google is doubling down on AI while keeping users and website owners in mind. At Creatify, we’re excited to see how these changes will shape the future of search. Whether you’re a blogger, a business owner, or just curious about SEO, these insights are a reminder to focus on creating awesome content that people love.\n","permalink":"/posts/seo/google-may-2026-core-update/","summary":"\u003cp\u003eThursday, May 21, 2026, it began – on June 2, 2026, it was over. Google marked the May 2026 Core Update as officially complete after roughly twelve days. The entry in the Google Search Status Dashboard is unambiguous: “The rollout was complete as of June 2, 2026.” The second confirmed broad core update of 2026 is done – and the phase in which reacting would only have produced noise is over.\u003c/p\u003e","title":"Google May 2026 Core Update Explained: Key SEO Changes and Recovery Tips"},{"content":"Tired of manually reading hundreds of Twitter comments to gauge public opinion? Whether you’re a marketer analyzing brand sentiment, a politician understanding your audience, or a researcher studying social trends, this process is tedious and time-consuming.\nWhat if you Could automate it all?\nLet\u0026rsquo;s dive in.\nWhat We’re Building: The Automated Workflow: Our workflow will perform a series of automated tasks:\nAccepts a Tweet URL from you. Uses Apify to scrape all the comments from that Tweet. Sends those comments to a free AI model via OpenRouter. The AI analyzes the sentiment and provides a narrative summary. The final report is posted automatically into a Google Sheet. 1. Import the Free Workflow into N8n First, you need to get the workflow into your N8n instance.\nCreate a New Workflow: Log in to your N8n dashboard and click the “Create workflow” button. Import the Code: 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 { \u0026#34;name\u0026#34;: \u0026#34;Twitter Tweet A nalyzer\u0026#34;, \u0026#34;nodes\u0026#34;: [ { \u0026#34;parameters\u0026#34;: { \u0026#34;formTitle\u0026#34;: \u0026#34;Tweet Analyzer\u0026#34;, \u0026#34;formFields\u0026#34;: { \u0026#34;values\u0026#34;: [ { \u0026#34;fieldLabel\u0026#34;: \u0026#34;Tweet URL\u0026#34;, \u0026#34;placeholder\u0026#34;: \u0026#34;https://x.com/username/status/1234567890\u0026#34;, \u0026#34;requiredField\u0026#34;: true } ] }, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.formTrigger\u0026#34;, \u0026#34;typeVersion\u0026#34;: 2.2, \u0026#34;position\u0026#34;: [ -480, 100 ], \u0026#34;id\u0026#34;: \u0026#34;a7fa3440-aa5d-42aa-a3b4-417b3975a8aa\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;On form submission\u0026#34;, \u0026#34;webhookId\u0026#34;: \u0026#34;791ad1b4-eee4-4d00-97c6-5b0852c78ae2\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;conditions\u0026#34;: { \u0026#34;options\u0026#34;: { \u0026#34;caseSensitive\u0026#34;: true, \u0026#34;leftValue\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;typeValidation\u0026#34;: \u0026#34;strict\u0026#34;, \u0026#34;version\u0026#34;: 2 }, \u0026#34;conditions\u0026#34;: [ { \u0026#34;id\u0026#34;: \u0026#34;21171dd5-e8d4-4264-8332-274b585dd8e2\u0026#34;, \u0026#34;leftValue\u0026#34;: \u0026#34;={{ $json[\u0026#39;Tweet URL\u0026#39;] }}\u0026#34;, \u0026#34;rightValue\u0026#34;: \u0026#34;^https?:\\\\/\\\\/(www\\\\.)?(twitter|x)\\\\.com\\\\/.+\\\\/status\\\\/\\\\d+\u0026#34;, \u0026#34;operator\u0026#34;: { \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;operation\u0026#34;: \u0026#34;regex\u0026#34; } } ], \u0026#34;combinator\u0026#34;: \u0026#34;and\u0026#34; }, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.if\u0026#34;, \u0026#34;typeVersion\u0026#34;: 2.2, \u0026#34;position\u0026#34;: [ -240, 100 ], \u0026#34;id\u0026#34;: \u0026#34;f6dc641a-abe9-43c0-aac6-e68724b7784c\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;If\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;promptType\u0026#34;: \u0026#34;define\u0026#34;, \u0026#34;text\u0026#34;: \u0026#34;=You are a professional political and social media analyst who always responds in a specific JSON format.\\n\\nYour task is to analyze the following tweet replies and generate a structured, professional report.\\n\\nTweet Replies to Analyze:\\n\\n{{ $json.replyText }}\\n\\nInstructions for the Report Content:\\nThe report should be written in Markdown and help the author understand how their message was received. Base all insights on the actual content and language used in the replies.\\n\\nThe Markdown report must follow this structure:\\n\\nExecutive Summary: A one-paragraph summary of the overall reception (sentiment, surprises, tone).\\n\\nSentiment Breakdown: Approximate percentages (positive/neutral/negative), characteristics of each group, and representative examples.\\n\\nNarrative Analysis: 3–5 recurring narratives, each with a description, quotes, and a note on whether it\u0026#39;s organic or strategic.\\n\\nInfluential or Viral Replies: 3–5 standout replies with an explanation of their impact.\\n\\nAudience Insight: Analysis of audience expectations, misunderstandings, and perceptions.\\n\\nStrategic Observations: Suggestions for improvement, timing factors, and signals of pushback.\\n\\nFinal Output Format:\\nYour entire response MUST be a single, valid JSON object. Do not include any text before or after the JSON. The JSON object must have a single key named report_text, where the value is the complete Markdown report you generated.\\n\\nEXAMPLE OF THE REQUIRED OUTPUT STRUCTURE:\\n\\n\\n{\\n \\\u0026#34;report_text\\\u0026#34;: \\\u0026#34;# Full Sentiment \u0026amp; Narrative Report\\\\n\\\\n## 1. Executive Summary\\\\nOverall, the tweet received a polarized response, with strong support from one segment of the audience and significant criticism from another. The tone was largely passionate, with very few neutral replies.\\\\n\\\\n## 2. Sentiment Breakdown\\\\n- **Positive: 45%** - Supporters focused on the policy\u0026#39;s benefits, using words like \\\\\\\u0026#34;commonsense\\\\\\\u0026#34; and \\\\\\\u0026#34;necessary.\\\\\\\u0026#34;\\\\n- **Negative: 55%** - Critics raised concerns about unintended consequences and government overreach.\\\u0026#34;\\n}\u0026#34;, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;@n8n/n8n-nodes-langchain.agent\u0026#34;, \u0026#34;typeVersion\u0026#34;: 1.9, \u0026#34;position\u0026#34;: [ 780, 0 ], \u0026#34;id\u0026#34;: \u0026#34;c7b57c7b-1e5a-4aae-bff4-0c5787daf0c0\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;AI Agent\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;jsCode\u0026#34;: \u0026#34;// Get the JSON string from the AI output and parse it into a real object.\\nconst parsedData = JSON.parse($input.first().json.output);\\n\\n// Now, access the \u0026#39;report_text\u0026#39; key from the parsed object.\\nconst fullReport = parsedData.report_text;\\n\\n// Check if the report text exists.\\nif (!fullReport) {\\n throw new Error(\\\u0026#34;The key \u0026#39;report_text\u0026#39; was not found in the AI\u0026#39;s JSON output after parsing. Please ensure the AI prompt correctly instructs the model to use this key.\\\u0026#34;);\\n}\\n\\n// --- Helper function to extract content for a specific section ---\\n// This robust function remains the same.\\nfunction extractSection(text, title) {\\n // Use a case-insensitive regex that handles various markdown headings (##, ###) and optional numbering.\\n const regex = new RegExp(\\n `^##+\\\\\\\\s*(?:\\\\\\\\d+\\\\\\\\.\\\\\\\\s*)?${title}\\\\\\\\s*\\\\\\\\n([\\\\\\\\s\\\\\\\\S]*?)(?=^##+|$)`,\\n \u0026#39;gmi\u0026#39;\\n );\\n const match = regex.exec(text);\\n return match ? match[1].trim() : `Section \\\u0026#34;${title}\\\u0026#34; not found`;\\n}\\n\\n// --- Define the sections you want to extract ---\\nconst executiveSummary = extractSection(fullReport, \u0026#39;Executive Summary\u0026#39;);\\nconst sentimentBreakdown = extractSection(fullReport, \u0026#39;Sentiment Breakdown\u0026#39;);\\nconst narrativeAnalysis = extractSection(fullReport, \u0026#39;Narrative Analysis\u0026#39;);\\nconst influentialReplies = extractSection(fullReport, \u0026#39;Influential or Viral Replies\u0026#39;);\\nconst audienceInsight = extractSection(fullReport, \u0026#39;Audience Insight\u0026#39;);\\nconst strategicObservations = extractSection(fullReport, \u0026#39;Strategic Observations\u0026#39;);\\n\\n// --- Return the data ---\\nreturn {\\n executiveSummary,\\n sentimentBreakdown,\\n narrativeAnalysis,\\n influentialReplies,\\n audienceInsight,\\n strategicObservations\\n};\u0026#34; }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.code\u0026#34;, \u0026#34;typeVersion\u0026#34;: 2, \u0026#34;position\u0026#34;: [ 1140, 0 ], \u0026#34;id\u0026#34;: \u0026#34;78e50b0d-db3d-409b-a2cf-cd10cd202304\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Code2\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;operation\u0026#34;: \u0026#34;appendOrUpdate\u0026#34;, \u0026#34;documentId\u0026#34;: { \u0026#34;__rl\u0026#34;: true, \u0026#34;value\u0026#34;: \u0026#34;11mUAWW8fkQVfNSHT68IytC0Slw-DRbeLhdn8Ztvyg5k\u0026#34;, \u0026#34;mode\u0026#34;: \u0026#34;list\u0026#34;, \u0026#34;cachedResultName\u0026#34;: \u0026#34;Tweet Analyzer\u0026#34;, \u0026#34;cachedResultUrl\u0026#34;: \u0026#34;https://docs.google.com/spreadsheets/d/11mUAWW8fkQVfNSHT68IytC0Slw-DRbeLhdn8Ztvyg5k/edit?usp=drivesdk\u0026#34; }, \u0026#34;sheetName\u0026#34;: { \u0026#34;__rl\u0026#34;: true, \u0026#34;value\u0026#34;: \u0026#34;gid=0\u0026#34;, \u0026#34;mode\u0026#34;: \u0026#34;list\u0026#34;, \u0026#34;cachedResultName\u0026#34;: \u0026#34;Sheet1\u0026#34;, \u0026#34;cachedResultUrl\u0026#34;: \u0026#34;https://docs.google.com/spreadsheets/d/11mUAWW8fkQVfNSHT68IytC0Slw-DRbeLhdn8Ztvyg5k/edit#gid=0\u0026#34; }, \u0026#34;columns\u0026#34;: { \u0026#34;mappingMode\u0026#34;: \u0026#34;defineBelow\u0026#34;, \u0026#34;value\u0026#34;: { \u0026#34;Executive Summary\u0026#34;: \u0026#34;={{ $json.executiveSummary }}\u0026#34;, \u0026#34;Sentiment Breakdown\u0026#34;: \u0026#34;={{ $json.sentimentBreakdown }}\u0026#34;, \u0026#34;Narrative Analysis\u0026#34;: \u0026#34;={{ $json.narrativeAnalysis }}\u0026#34;, \u0026#34;Influential Replies\u0026#34;: \u0026#34;={{ $json.influentialReplies }}\u0026#34;, \u0026#34;Audience Insight\u0026#34;: \u0026#34;={{ $json.audienceInsight }}\u0026#34;, \u0026#34;Strategic Observations\u0026#34;: \u0026#34;={{ $json.strategicObservations }}\u0026#34;, \u0026#34;Tweet URL\u0026#34;: \u0026#34;={{ $(\u0026#39;On form submission\u0026#39;).item.json[\u0026#39;Tweet URL\u0026#39;] }}\u0026#34; }, \u0026#34;matchingColumns\u0026#34;: [ \u0026#34;Tweet URL\u0026#34; ], \u0026#34;schema\u0026#34;: [ { \u0026#34;id\u0026#34;: \u0026#34;Tweet URL\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Tweet URL\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true, \u0026#34;removed\u0026#34;: false }, { \u0026#34;id\u0026#34;: \u0026#34;Executive Summary\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Executive Summary\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true }, { \u0026#34;id\u0026#34;: \u0026#34;Sentiment Breakdown\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Sentiment Breakdown\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true }, { \u0026#34;id\u0026#34;: \u0026#34;Narrative Analysis\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Narrative Analysis\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true }, { \u0026#34;id\u0026#34;: \u0026#34;Influential Replies\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Influential Replies\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true }, { \u0026#34;id\u0026#34;: \u0026#34;Audience Insight\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Audience Insight\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true }, { \u0026#34;id\u0026#34;: \u0026#34;Strategic Observations\u0026#34;, \u0026#34;displayName\u0026#34;: \u0026#34;Strategic Observations\u0026#34;, \u0026#34;required\u0026#34;: false, \u0026#34;defaultMatch\u0026#34;: false, \u0026#34;display\u0026#34;: true, \u0026#34;type\u0026#34;: \u0026#34;string\u0026#34;, \u0026#34;canBeUsedToMatch\u0026#34;: true } ], \u0026#34;attemptToConvertTypes\u0026#34;: false, \u0026#34;convertFieldsToString\u0026#34;: false }, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.googleSheets\u0026#34;, \u0026#34;typeVersion\u0026#34;: 4.5, \u0026#34;position\u0026#34;: [ 1400, 0 ], \u0026#34;id\u0026#34;: \u0026#34;9644be77-2708-4867-ae12-910258cd92e0\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Google Sheets\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;operation\u0026#34;: \u0026#34;completion\u0026#34;, \u0026#34;respondWith\u0026#34;: \u0026#34;showText\u0026#34;, \u0026#34;responseText\u0026#34;: \u0026#34;Incorrect tweet URL, please re-run the workflow\u0026#34; }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.form\u0026#34;, \u0026#34;typeVersion\u0026#34;: 1, \u0026#34;position\u0026#34;: [ 80, 280 ], \u0026#34;id\u0026#34;: \u0026#34;38fd5a3d-1e1e-4c49-b6a6-bdf97983bf47\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Incorrect Form URL\u0026#34;, \u0026#34;webhookId\u0026#34;: \u0026#34;7c8d5f22-ee5d-4f2b-8952-90037207ac41\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;operation\u0026#34;: \u0026#34;completion\u0026#34;, \u0026#34;completionTitle\u0026#34;: \u0026#34;Tweet Processing\u0026#34;, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.form\u0026#34;, \u0026#34;typeVersion\u0026#34;: 1, \u0026#34;position\u0026#34;: [ 0, 0 ], \u0026#34;id\u0026#34;: \u0026#34;5f3ffb31-8cf6-4a46-a342-7ec3a48cd099\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Successful Form Submission\u0026#34;, \u0026#34;webhookId\u0026#34;: \u0026#34;9e9ff477-7710-43fe-a4a9-fab2ddf34b3a\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;method\u0026#34;: \u0026#34;POST\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;APIFY URL\u0026#34;, \u0026#34;sendBody\u0026#34;: true, \u0026#34;specifyBody\u0026#34;: \u0026#34;json\u0026#34;, \u0026#34;jsonBody\u0026#34;: \u0026#34;={\\n \\\u0026#34;includeNestedReplies\\\u0026#34;: false,\\n \\\u0026#34;postUrls\\\u0026#34;: [\\n \\\u0026#34;{{ $json[\u0026#39;Tweet URL\u0026#39;] }}\\\u0026#34;\\n ],\\n \\\u0026#34;resultsLimit\\\u0026#34;: 5\\n}\u0026#34;, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.httpRequest\u0026#34;, \u0026#34;typeVersion\u0026#34;: 4.2, \u0026#34;position\u0026#34;: [ 280, 0 ], \u0026#34;id\u0026#34;: \u0026#34;d83c0630-8d3f-457a-bf50-cf41298de0c6\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;HTTP Request1\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;fieldsToAggregate\u0026#34;: { \u0026#34;fieldToAggregate\u0026#34;: [ { \u0026#34;fieldToAggregate\u0026#34;: \u0026#34;replyText\u0026#34; } ] }, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;n8n-nodes-base.aggregate\u0026#34;, \u0026#34;typeVersion\u0026#34;: 1, \u0026#34;position\u0026#34;: [ 520, 0 ], \u0026#34;id\u0026#34;: \u0026#34;bb6ec4ba-954e-4cfe-bf42-ef7bd7632f65\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Aggregate\u0026#34; }, { \u0026#34;parameters\u0026#34;: { \u0026#34;model\u0026#34;: \u0026#34;deepseek/deepseek-r1:free\u0026#34;, \u0026#34;options\u0026#34;: {} }, \u0026#34;type\u0026#34;: \u0026#34;@n8n/n8n-nodes-langchain.lmChatOpenRouter\u0026#34;, \u0026#34;typeVersion\u0026#34;: 1, \u0026#34;position\u0026#34;: [ 680, 300 ], \u0026#34;id\u0026#34;: \u0026#34;fb99e727-f3af-4f5b-9541-73008caeb329\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;OpenRouter Chat Model\u0026#34; } ], \u0026#34;pinData\u0026#34;: {}, \u0026#34;connections\u0026#34;: { \u0026#34;On form submission\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;If\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;If\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;Successful Form Submission\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ], [ { \u0026#34;node\u0026#34;: \u0026#34;Incorrect Form URL\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;AI Agent\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;Code2\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;Code2\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;Google Sheets\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;Successful Form Submission\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;HTTP Request1\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;HTTP Request1\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;Aggregate\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;Aggregate\u0026#34;: { \u0026#34;main\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;AI Agent\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;main\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] }, \u0026#34;OpenRouter Chat Model\u0026#34;: { \u0026#34;ai_languageModel\u0026#34;: [ [ { \u0026#34;node\u0026#34;: \u0026#34;AI Agent\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;ai_languageModel\u0026#34;, \u0026#34;index\u0026#34;: 0 } ] ] } }, \u0026#34;active\u0026#34;: false, \u0026#34;settings\u0026#34;: { \u0026#34;executionOrder\u0026#34;: \u0026#34;v1\u0026#34; }, \u0026#34;versionId\u0026#34;: \u0026#34;6aa4f295-a9b8-4f6c-97c2-705b49ec4c46\u0026#34;, \u0026#34;meta\u0026#34;: { \u0026#34;instanceId\u0026#34;: \u0026#34;bf63e2f51dbc3f9b426b65f04f21e6baece93c635479343f7aa1d53bce881f40\u0026#34; }, \u0026#34;id\u0026#34;: \u0026#34;tIVoDRAsAfDr3LAF\u0026#34;, \u0026#34;tags\u0026#34;: [] } Copy and Paste: Open the JSON file, copy all the code, return to your blank N8n workflow, and press Ctrl+V (Windows) or Cmd+V (Mac) to paste it. The complete workflow with all its nodes will appear.\n2. Set Up the Apify Twitter Scraper The next node is the Apify Node, which is responsible for scraping the Tweet comments. We need to configure its API endpoint.\nSign Up for Apify: Go to Apify.com and sign up for a free account. You’ll get $5 in free credit, which is more than enough to get started with this project. Find the Correct API URL: Once logged in, go to the Integrations section in your account. Scroll down and find the API endpoint called “Run actor synchronously and get dataset items”. Click the copy icon to copy the URL. Configure the Node in N8n: Back in your N8n workflow, click on the Apify Node. In the parameters, find the “Resource” field and paste the URL you just copied into it. 3. Configure the AI with OpenRouter: We’ll use OpenRouter to access powerful AI models without paying for expensive API credits.\nCreate an OpenRouter Account Visit OpenRouter.ai and sign up. It’s quick and you can use your Google account. Allows integration with systems like Active Directory, Google Workspace, or SAML providers. Generate an API Key: After logging in, navigate to your “Keys” section. Click on “Create new key” and generate a new API key. Copy this key. Connect OpenRouter to N8n: In your N8n workflow, click on the “AI Agent” node (or similar node handling the AI call). Click on “Credentials” and then “Create New”. Select OpenRouter: Choose OpenRouter from the list of providers and paste your API key into the designated field. Save the credentials. Pro Tip: The workflow is pre-configured to use deepseek/deepseek-chat, a capable and cost-effective model available on OpenRouter.\n4. Connect Your Google Sheets To receive the final analysis, we need to connect N8n to Google Sheets.\nCreate a New Google Sheet: Create a blank Google Sheet in your Drive. Note its name. Set Up Google Sheets Credentials in N8n: N8n needs permission to write to your Sheet. Configure the Google Sheets Node: Click on the Google Sheets node in your workflow. Select your pre-configured Google account credentials. Then, specify the name of your Sheet and the specific range (e.g., Sheet1!A:A) where you want the data to be written. 5. Run Your Automated Analysis! You’re all set! Let’s test the workflow.\nClick “Test Workflow”: In N8n, click the “Execute Workflow” button. This will trigger the initial Form Node. Paste a Tweet URL: A window will pop up asking for a Tweet URL. Find a Tweet you want to analyze, copy its URL, and paste it into the field. Click “Submit”. Watch the Magic Happen: The workflow will now run automatically: The Apify node will scrape the comments. The AI node will process them and generate its analysis. The results will be sent to your Google Sheet. Note on Limits: By default, the Apify scraper is set to extract only 5 comments for demonstration purposes (to save time and credits). To analyze more, simply click on the Apify node, find the resultsLimit parameter in the JSON, and change 5 to 100 or any number you prefer. Conclusion and Next Steps: Congratulations! You’ve just built a powerful automation that turns social media chatter into actionable data. This is just the beginning—you can modify this workflow to analyze comments from YouTube, Reddit, or news articles.\nNeed a Custom Automation? If you have a repetitive task that’s eating up your time, let us automate it for you. We build custom workflows for cold emailing, lead generation, data processing, and much more Contact Us Apify Scrapper ","permalink":"/posts/seo/how-build-a-no-code-political-tweet-analyzer-with-n8n/","summary":"\u003cp\u003eTired of manually reading hundreds of Twitter comments to gauge public opinion? Whether you’re a marketer analyzing brand sentiment, a politician understanding your audience, or a researcher studying social trends, this process is tedious and time-consuming.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eWhat if you Could automate it all?\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eLet\u0026rsquo;s dive in.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"what-were-building-the-automated-workflow\"\u003eWhat We’re Building: The Automated Workflow:\u003c/h2\u003e\n\u003cp\u003eOur workflow will perform a series of automated tasks:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eAccepts a Tweet URL\u003c/strong\u003e from you.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eUses Apify\u003c/strong\u003e to scrape all the comments from that Tweet.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSends those comments\u003c/strong\u003e to a free AI model via OpenRouter.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eThe AI analyzes\u003c/strong\u003e the sentiment and provides a narrative summary.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eThe final report\u003c/strong\u003e is posted automatically into a Google Sheet.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"1-import-the-free-workflow-into-n8n\"\u003e1. Import the Free Workflow into N8n\u003c/h2\u003e\n\u003cp\u003eFirst, you need to get the workflow into your N8n instance.\u003c/p\u003e","title":"How Build a No-Code Political Tweet Analyzer with N8N [Free Workflow]"},{"content":"In today’s e-commerce world, providing a seamless shopping experience is key to increasing sales. Shopify’s default filters are great, but sometimes you want a more interactive and visually appealing way for customers to filter products. In this tutorial, I will show you how to add a custom Price Range Slider Filter to your Shopify theme for free.\nThis custom slider allows your customers to drag and select their preferred price range, making your collection pages more user-friendly.\nPlease follow the step-by-step code changes below to implement this feature.\nStep 1: custom-price-filter.liquid File Code Go to the Snippets folder in your theme files.\nCreate a new file named custom-price-filter.liquid.\nPaste your provided slider code into this file and Save it.\nThe complete Shopify Price Range Slider code can be downloaded below:\nDownload Price Range Slider Code Step 2: settings_schema.json File Changes Now we need to add the settings so you can control the colors and fonts directly from the Shopify Customizer.\nStep 1: Open the settings_schema.json file.\nStep 2: Find the closing bracket }, after the \u0026ldquo;theme_info\u0026rdquo; section\nStep 3: Paste the following code right after it:\nDownload settings_schema.json Step 3: Render the Filter in filter.liquid Now, we need to place the custom filter inside your theme’s filter file so it displays in the sidebar.\nIn your theme code editor. Open the filter.liquid file. Search for the term: “price-filter”. Look for the rendering block that looks like this:\n{%- render \u0026lsquo;price-filter\u0026rsquo;, filter: filter, filter_style: block_settings.filter_style should_render_clear: should_render_clear, id_prefix: \u0026lsquo;horizontal\u0026rsquo; -%}\nRight below that line, paste the code to render your new custom slider:\n{% render 'custom-price-filter' %} Next, search for ‘filter-remove-buttons’ inside the same file. You will see a block of code that looks like this:\n{% render 'filter-remove-buttons', filters: filters, results_url: results_url, show_filter_label: block_settings.show_filter_label, should_show_clear_all: false %} Cut this entire filter-remove-buttons block and paste it right under your new {% render \u0026lsquo;custom-price-filter\u0026rsquo; %} code block.\nClick Save. Step 4: Hide the Default Price Filter (CSS Fix) To prevent the default Shopify price filter from conflicting with your beautiful new custom slider, we need to hide the old one using CSS.\nGo to the Assets folder in your theme files. Open the base.css file. Scroll to the very bottom of the file and paste this code:\naccordion-custom:has([data-testid=\u0026quot;price-filter\u0026quot;]) { display: none !important; } Step 5: Final Steps in Theme Customizer Go to Online Store \u0026gt; Themes \u0026gt; Customize.\nNavigate to any Collection Page.\nClick on Product Grid settings and ensure the Desktop filter layout is set to Vertical.\nTo customize the look, go to Theme Settings (gear icon) and find the Price-Filter tab. Here you can adjust the labels, font sizes, and colors to match your brand.\n","permalink":"/posts/shopify/how-to-add-price-range-slider-in-shopify/","summary":"\u003cp\u003eIn today’s e-commerce world, providing a seamless shopping experience is key to increasing sales. Shopify’s \u003cstrong\u003edefault filters\u003c/strong\u003e are great, but sometimes you want a more \u003cstrong\u003einteractive and visually\u003c/strong\u003e appealing way for customers to filter products. In this tutorial, I will show you \u003cstrong\u003ehow to add a custom Price Range Slider Filter to your Shopify theme for free\u003c/strong\u003e.\u003c/p\u003e\n\u003cp\u003eThis custom slider allows your customers to drag and select their preferred price range, making your collection pages more user-friendly.\u003c/p\u003e","title":"How To Add a Price Range Slider in Shopify (Free Code)"},{"content":"Tired of boring product pages? What if you could add Instagram reels, YouTube demos, or customer reviews with just a copy and paste? No coding. No complex widgets. Just pure, simple magic.\nMeet your new secret weapon: The EmbedAny app . It turns any link into a beautiful embed with one clever trick.\nThe “Italicize \u0026amp; Embed” Magic Trick Here’s the entire process:\nCopy a link (from Instagram, TikTok, YouTube, Google Reviews—over 800 sites work!). Paste it into any Shopify text box (product description, blog post, homepage section). Make it italic. Yes, really. Just highlight the link and click the italic button. Save. Watch the link transform into a perfect, responsive embed. It feels like discovering a secret cheat code for your store.\nWhy This Changes Everything for Busy Store Owners You’re not just adding a video; you’re adding trust, context, and life.\nShow, Don’t Just Tell: Embed a quick TikTok of someone using your product. It’s 10x more convincing than a photo. Build Social Proof Instantly: A Google Reviews widget on your homepage builds credibility in seconds. Answer Questions Before They’re Asked: Embed a PDF manual or a FAQ video right on the product page. The best part? It keeps your site fast because the content loads intelligently from the original platform.\nYour Creative Playground: Ideas to Try Today For Homepages: Embed a looping brand vibe video from Vimeo. For Product Pages: Paste a link to a 5-star customer review video from YouTube. For Blogs: Embed an interactive SlideShare presentation. For Footers: Add an embedded Google Map so customers can find you. The Bottom Line For less than a fancy coffee per month, you can stop feeling limited by “what Shopify allows.” The EmbedAny app hands you the keys to a more dynamic, engaging store—all without a single line of code.\nReady to try the magic? Search “EmbedAny” in the Shopify App Store. Their free trial lets you test it risk-free. Paste your first link, hit italic, and prepare to be amazed.\n","permalink":"/posts/shopify/how-to-embed-any-social-media-content-in-shopify/","summary":"\u003cp\u003eTired of boring product pages? What if you could add Instagram reels, YouTube demos, or customer reviews with \u003cstrong\u003ejust a copy and paste?\u003c/strong\u003e No coding. No complex widgets. Just pure, simple magic.\u003c/p\u003e\n\u003cp\u003eMeet your new secret weapon: \u003ca href=\"https://apps.shopify.com/embed\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eThe EmbedAny app\u003c/a\u003e\n. It turns any link into a beautiful embed with one clever trick.\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"the-italicize--embed-magic-trick\"\u003eThe “Italicize \u0026amp; Embed” Magic Trick\u003c/h2\u003e\n\u003cp\u003eHere’s the entire process:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eCopy a link\u003c/strong\u003e (from Instagram, TikTok, YouTube, Google Reviews—over 800 sites work!).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePaste it\u003c/strong\u003e into any Shopify text box (product description, blog post, homepage section).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMake it italic.\u003c/strong\u003e Yes, really. Just highlight the link and click the italic button.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSave.\u003c/strong\u003e Watch the link transform into a perfect, responsive embed.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eIt feels like discovering a secret cheat code for your store.\u003c/p\u003e","title":"How To Embed ANY Social Media Content in Shopify (800+ Platforms Supported)"},{"content":"Running a Shopify store often means you need help. Whether you’re hiring a developer for custom theme work, a contractor to add products, or a team member to manage orders you need a safe way to grant access.\nHere’s the problem: Shopify’s basic plan limits you to just 2 staff members. Growth plan? 5 staff members. Advanced? 15. But what if you need more?\nThe solution is Shopify collaborator codes. This method lets you invite unlimited users without hitting plan limitations and maintain complete control over what they can access.\nWhy Collaborator Codes Are Better Than Staff Accounts Before diving into the steps, understand why collaborator codes are the smart choice:\nAdvantages:\nNo plan limitations (works on all Shopify plans) Granular permission control Easy to revoke access instantly Safer for temporary contractors Doesn’t count toward staff account limits Developers can request access without you creating accounts Step 1: Generate Your Collaborator Code 1. Log in to your Shopify store admin dashboard 2. Click the Settings icon (gear icon in the bottom left corner) 3. Select “Users and permissions” from the menu 4. Click on the “Security” tab 5. Look for “Invite third-party collaborators” 6. Copy your collaborator code 7. Your collaborator code is unique to your store and never changes. You can share it with multiple people. Step 2: Get Your Store URL Along with your collaborator code, you’ll need your store URL in this format:\nyourstore.myshopify.com\nThis appears right next to your collaborator code in the Security section.\nStep 3: Share With Your Developer or Collaborator What to send them:\nYour collaborator code Your store URL Share these only with people you trust using secure communication like email or Slack. Step 4: Developer Requests Access Once you’ve shared the code and URL, here’s what your developer should do:\nFor Developers Using Shopify Dev Dashboard:\n1. Go to the Shopify Dev Dashboard 2. Click “Request access” 3. Paste your store URL 4. Enter the collaborator code 5. Select specific permissions (theme development, online store, products, etc.) 6. Submit the request For Contractors and Team Members:\n1. Visit the Shopify Collaborator Portal 2. Enter the store URL 3. Enter the collaborator code 4. Select required permissions 5. Wait for your approval Step 5: Review and Approve Access Requests Once someone requests access using your code, you’ll receive a notification.\nTo approve:\n1. Go to Settings \u0026gt; Users and permissions 2. Check the “Pending access requests” section 3. Review the request 4. Click “Approve” to grant access or “Reject” to decline Step 6: Manage Permissions One of the biggest advantages is permission control. Only grant the minimum permissions needed:\nAvailable permissions include:\n1. Theme development 2. Online store 3. Blog 4. Product management 5. Order management 6. Customer management 7. Marketing and analytics Step 7: Remove Access When Finished Revoking access is simple and instant:\n1. Go to Settings \u0026gt; Users and permissions 2. Find the collaborator in the list. 3. Click the three-dot menu next to their name 4. Select “Remove access” 5. Confirm the removal 6. Their access is revoked immediately. Common Questions Q: Can I use the same code for multiple people?\nA: Yes! One code can be used by multiple developers.\nQ: Do collaborators count toward my staff account limit?\nA: No. Collaborators don’t count toward your staff member limit.\nQ: Is it safe to share my collaborator code?\nA: Relatively safe, but only share with trusted people.\nQ: Can collaborators access my financial data?\nA: Only if you grant them those specific permissions.\nQ: How many collaborators can I add?\nA: Unlimited! There’s no cap.\nUse Cases Hiring a Theme Developer: Grant theme development access only Adding a Content Manager: Give blog and product description access Virtual Assistant: Order management and customer service access Marketing Agency: Limited access to analytics and marketing tools Temporary Contractor: Full temporary access that you revoke when done Security Best Practices Do:\nOnly share codes with people you trust Regularly review who has access Grant minimum necessary permissions Remove access immediately when someone leaves Enable two-factor authentication on your main account Don’t:\nShare your collaborator code publicly Grant permissions you don’t understand Leave old collaborators with access after projects end Share with unknown third parties Troubleshooting Issue: Collaborator code not appearing Solution: Make sure you’re logged in as the store owner.\nIssue: Developer can’t find “Request Access” Solution: Direct them to the Shopify Collaborator Portal instead.\nIssue: Collaborator lost access unexpectedly Solution: Check if access was accidentally revoked. Re-invite them using the same code.\nKey Takeaways Collaborator codes let you add unlimited users without plan limitations Grant only the permissions people need Revoke access instantly when collaborators are done Works on all Shopify plans More secure than staff accounts for temporary access Ready to Invite Your First Collaborator? Now you know how to safely grant Shopify store access. Follow these steps:\n1. Generate your collaborator code 2. Share it securely with your developer 3. Review and approve their access request 4. Set appropriate permissions 5. Remove access when the project is complete 6. Start inviting your first collaborator today and manage your store with confidence. ","permalink":"/posts/shopify/how-to-give-collaborative-access/","summary":"\u003cp\u003eRunning a Shopify store often means you need help. Whether you’re hiring a developer for custom theme work, a contractor to add products, or a team member to manage orders you need a safe way to grant access.\u003c/p\u003e\n\u003cp\u003eHere’s the problem: Shopify’s basic plan limits you to just 2 staff members. Growth plan? 5 staff members. Advanced? 15. But what if you need more?\u003c/p\u003e\n\u003cp\u003eThe solution is Shopify collaborator codes. This method lets you invite unlimited users without hitting plan limitations and maintain complete control over what they can access.\u003c/p\u003e","title":"How To Give Shopify Store Access Safely"},{"content":"Did you know that out of every 10 people who visit an online store, 7 of them leave without finishing their purchase? That is a massive 70% of your potential revenue walking out the door!\nIf you aren’t actively trying to win those shoppers back, you are leaving serious money on the table. Luckily, you can fix this automatically by setting up an abandoned cart email campaign right inside Shopify.\nIf you tried looking for this setting recently, you might have noticed it’s completely gone from its old spot under Marketing Automations. Shopify changed things up, but don’t worry. In this quick guide, we’ll show you exactly where the new setting is hiding and how to get it running in just a few clicks.\nThe New Way to Find Abandoned Cart Settings in Shopify Previously, setting up these recovery campaigns meant navigating to the “Marketing” tab. However, in the latest Shopify updates, that option is no longer there.\nHere is how to find the new setup:\n1. Log into your Shopify admin dashboard. 2. Click on the Search bar at the top of your screen. 3. Type in “Messaging” and click on the Messaging app. This native messaging app comes automatically installed on all new Shopify stores. It handles your automation workflows without forcing you to pay for expensive third-party tools.\nStep-by-Step: Turning on Abandoned Cart Automations Once you are inside the Messaging app, launching your campaign takes less than a minute.\nStep 1: Choose a Template Click on the Create Automation button. You will see a list of ready-to-use marketing templates, including options for browsing history, welcoming new subscribers, and recovering checkouts. Select Recover Abandoned Cart.\nStep 2: Turn It On On the next screen, simply click Turn on Automation. Your campaign is now officially active!\nLook Under the Hood: How the Workflow Operates If you want to see exactly how this automation behaves, you can click on Edit Workflow. This opens up the visual backend step-by-step path managed by Shopify’s built-in automation system:\nThe Trigger:\nThe workflow starts the moment a customer leaves your online store without purchasing the items they added to their cart. The Wait Time:\nThe system safely waits for 4 hours of total inactivity. This ensures you don’t annoy someone who is still actively browsing or thinking it over. The Safety Checks:\nBefore hitting send, Shopify automatically checks to make sure the customer hasn’t placed an order within those 4 hours or received any other marketing emails recently. The Delivery:\nIf all conditions are met, the dynamic recovery email is automatically delivered straight to their inbox. Customizing Your Recovery Emails (Drag-and-Drop) You don’t want to send a boring, generic email to your customers. By clicking the Edit Email option inside the last step of your workflow, you can easily tweak the design.\nThe editor is completely drag-and-drop. You can easily change text alignment, adjust background colors, and add clean borders to match your store’s branding.\nThe best part? The product section is completely dynamic. You don’t have to manually guess what they liked; Shopify automatically pulls the exact product images and details that the specific customer left behind, making the email highly personalized and much more likely to convert.\nDon’t Forget Abandoned Checkouts! While you are fixing your cart abandonment, make sure to also turn on the Recover Abandoned Checkout automation.\nWhat is the difference?\nAbandoned Cart: A shopper added items to the cart but left before typing in any shipping or payment info. Abandoned Checkout: A shopper went all the way to the checkout page, typed in their details, but closed their browser right before hitting the final “Pay Now” button. The abandoned checkout automation waits for 10 hours before sending a tailored reminder email asking them to finish their incomplete order. Having both of these workflows active covers all your bases and secures maximum revenue protection.\nFinal Thoughts Setting up these basic safety nets is one of the easiest ways to scale your store’s conversions. Yet, shockingly, only about 10% to 15% of active merchants actually have these configured properly. Taking five minutes today to turn these on puts you way ahead of the competition.\n","permalink":"/posts/shopify/how-to-setup-abandon-card-in-shopify-store/","summary":"\u003cp\u003eDid you know that out of every \u003cstrong\u003e10 people who visit\u003c/strong\u003e an online store, 7 of them leave without finishing their purchase? That is a massive 70% of your potential revenue walking out the door!\u003c/p\u003e\n\u003cp\u003eIf you aren’t actively trying to win those shoppers back, you are leaving serious money on the table. Luckily, you can fix this automatically by setting up an abandoned cart email campaign right inside Shopify.\u003c/p\u003e","title":"How To Setup Abandoned Cart In Shopify"},{"content":"Step 1: Replace the code in _product-card-gallery.liquid Replace the following code in _product-card-gallery.liquid\n{%- if product.available == false or product.compare_at_price \u0026gt; product.price and product.available -%} \u0026lt;div class=\u0026quot; product-badges__badge product-badges__badge--rectangle {% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }}{% elsif product.compare_at_price \u0026gt; product.price %} color-{{ settings.badge_sale_color_scheme }}{% endif %} \u0026quot; \u0026gt; {%- if product.available == false -%} {{ 'content.product_badge_sold_out' | t }} {%- elsif product.compare_at_price \u0026gt; product.price -%} {{ 'content.product_badge_sale' | t }} {%- endif -%} \u0026lt;/div\u0026gt; {%- endif -%} With the following code\n{%- assign current_variant = product.selected_or_first_available_variant -%} {%- assign compare_at_price = product.compare_at_price_max -%} {%- assign price = product.price -%} {%- if product.available == false or compare_at_price \u0026gt; price -%} \u0026lt;div class=\u0026quot;product-badges__badge product-badges__badge--rectangle {% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }} {% else %} color-{{ settings.badge_sale_color_scheme }} {% endif %}\u0026quot; \u0026gt; {%- if product.available == false -%} {{ 'content.product_badge_sold_out' | t }} {%- else -%} {%- assign max_discount = 0 -%} {%- for variant in product.variants -%} {%- if variant.compare_at_price \u0026gt; variant.price -%} {%- assign diff = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price -%} {%- if diff \u0026gt; max_discount -%} {%- assign max_discount = diff | round -%} {%- endif -%} {%- endif -%} {%- endfor -%} {%- if max_discount \u0026gt; 0 -%}{{ max_discount }}% OFF{%- endif -%} {%- endif -%} \u0026lt;/div\u0026gt; {%- endif -%} Step 2: Create new block Open code editor, create a new code block file. Copy the following code:\n👉 Click to View Code {%- liquid assign unique_id = block.id -%} {% style %} .wsp-price-block-{{ unique_id }} { display: flex; flex-direction: column; gap: {{ block.settings.spacing }}px; /* This gap is between price-wrapper and (removed) unit-price */ align-items: {{ block.settings.alignment }}; /* This aligns the .wsp-price-wrapper horizontally */ } .wsp-price-wrapper-{{ unique_id }} { display: flex; flex-wrap: wrap; gap: {{ block.settings.price_spacing }}px; align-items: center; } .wsp-current-price-{{ unique_id }} { font-size: {{ block.settings.price_size }}px; font-weight: {{ block.settings.price_weight }}; color: {{ block.settings.price_color }}; line-height: 1; } .wsp-compare-price-{{ unique_id }} { font-size: {{ block.settings.compare_price_size }}px; color: {{ block.settings.compare_price_color }}; text-decoration: line-through; line-height: 1; } .wsp-discount-badge-{{ unique_id }} { background-color: {{ block.settings.discount_badge_bg }}; color: {{ block.settings.discount_badge_color }}; padding: {{ block.settings.badge_padding_vertical }}px {{ block.settings.badge_padding_horizontal }}px; border-radius: {{ block.settings.badge_border_radius }}px; font-size: {{ block.settings.discount_size }}px; font-weight: {{ block.settings.discount_weight }}; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } @keyframes wsp_bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} } @keyframes wsp_flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0.3;} } @keyframes wsp_pulse { 0% {transform: scale(1); } 50% {transform: scale(1.1); } 100% {transform: scale(1); } } @keyframes wsp_fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes wsp_slideInUp { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .wsp-discount-animated-text-{{ unique_id }} { display: inline-block; {% if block.settings.animation_type != \u0026#39;none\u0026#39; and block.settings.animation_type != blank %} animation-name: {{ block.settings.animation_type }}; animation-duration: {{ block.settings.animation_duration }}s; animation-timing-function: {{ block.settings.animation_timing_function }}; animation-iteration-count: {{ block.settings.animation_iteration_count }}; animation-delay: {{ block.settings.animation_delay }}s; animation-fill-mode: forwards; {% endif %} } @media screen and (max-width: 749px) { .wsp-current-price-{{ unique_id }} { font-size: {{ block.settings.price_size | times: 0.85 }}px; } .wsp-compare-price-{{ unique_id }} { font-size: {{ block.settings.compare_price_size | times: 0.85 }}px; } .wsp-discount-badge-{{ unique_id }} { font-size: {{ block.settings.discount_size | times: 0.85 }}px; padding: {{ block.settings.badge_padding_vertical | times: 0.85 }}px {{ block.settings.badge_padding_horizontal | times: 0.85 }}px; } } {% endstyle %} \u0026lt;div class=\u0026#34;wsp-price-block-{{ unique_id }} price\u0026#34; {{ block.shopify_attributes }}\u0026gt; \u0026lt;div class=\u0026#34;wsp-price-wrapper-{{ unique_id }}\u0026#34;\u0026gt; {%- assign selected_variant = product.selected_or_first_available_variant -%} \u0026lt;span class=\u0026#34;wsp-current-price-{{ unique_id }} price-item price-item--regular\u0026#34; data-regular-price\u0026gt; {{ selected_variant.price | money }} \u0026lt;/span\u0026gt; {% if selected_variant.compare_at_price \u0026gt; selected_variant.price %} \u0026lt;span class=\u0026#34;wsp-compare-price-{{ unique_id }} price-item price-item--sale\u0026#34; data-compare-price\u0026gt; {{ selected_variant.compare_at_price | money }} \u0026lt;/span\u0026gt; {% if block.settings.show_discount_badge %} {% assign compare_price = selected_variant.compare_at_price %} {% assign current_price = selected_variant.price %} {% assign discount_value = compare_price | minus: current_price %} {% assign discount_percentage = discount_value | times: 100.0 | divided_by: compare_price | round %} \u0026lt;span class=\u0026#34;wsp-discount-badge-{{ unique_id }}\u0026#34;\u0026gt; \u0026lt;span class=\u0026#34;wsp-discount-animated-text-{{ unique_id }}\u0026#34;\u0026gt; {% if block.settings.discount_badge_text != blank %} {{ block.settings.discount_badge_text | replace: \u0026#39;[discount]\u0026#39;, discount_percentage }} {% else %} {{ discount_percentage }}% off {% endif %} \u0026lt;/span\u0026gt; \u0026lt;/span\u0026gt; {% endif %} {% endif %} \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; {% schema %} { \u0026#34;name\u0026#34;: \u0026#34;Product Price (WSP)\u0026#34;, \u0026#34;tag\u0026#34;: \u0026#34;section\u0026#34;, \u0026#34;class\u0026#34;: \u0026#34;shopify-section--product-price-wsp\u0026#34;, \u0026#34;settings\u0026#34;: [ { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Layout\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;alignment\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Block Content Alignment\u0026#34;, \u0026#34;info\u0026#34;: \u0026#34;Aligns the price group (current, compare, badge) horizontally within this block. Effect depends on block\u0026#39;s width in the theme.\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;flex-start\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Left\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;center\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Center\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;flex-end\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Right\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;flex-start\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;spacing\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 20, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Vertical spacing (if multiple groups existed)\u0026#34;, \u0026#34;default\u0026#34;: 0, \u0026#34;info\u0026#34;: \u0026#34;Previously used for space below price group. Less relevant now.\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;price_spacing\u0026#34;, \u0026#34;min\u0026#34;: 4, \u0026#34;max\u0026#34;: 20, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Horizontal spacing (between price elements)\u0026#34;, \u0026#34;default\u0026#34;: 8 }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Current price\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;price_size\u0026#34;, \u0026#34;min\u0026#34;: 12, \u0026#34;max\u0026#34;: 60, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Font size\u0026#34;, \u0026#34;default\u0026#34;: 24 }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;price_weight\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Font weight\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;400\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Regular\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;500\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Medium\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;600\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Semibold\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;700\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Bold\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;600\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;price_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Color\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#000000\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Compare-at price\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;compare_price_size\u0026#34;, \u0026#34;min\u0026#34;: 12, \u0026#34;max\u0026#34;: 40, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Font size\u0026#34;, \u0026#34;default\u0026#34;: 16 }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;compare_price_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Color\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#767676\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Discount badge\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;checkbox\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;show_discount_badge\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Show discount percentage\u0026#34;, \u0026#34;default\u0026#34;: true }, { \u0026#34;type\u0026#34;: \u0026#34;text\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;discount_badge_text\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Custom text (use [discount] for percentage)\u0026#34;, \u0026#34;info\u0026#34;: \u0026#34;Example: Save [discount]% or [discount]% OFF!\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;Save [discount]%\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;discount_size\u0026#34;, \u0026#34;min\u0026#34;: 10, \u0026#34;max\u0026#34;: 24, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Font size\u0026#34;, \u0026#34;default\u0026#34;: 14 }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;discount_weight\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Font weight\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;400\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Regular\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;500\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Medium\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;600\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Semibold\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;700\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Bold\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;700\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;discount_badge_color\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Text color\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#FFFFFF\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;color\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;discount_badge_bg\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Background color\u0026#34;, \u0026#34;default\u0026#34;: \u0026#34;#E31B1B\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;badge_padding_vertical\u0026#34;, \u0026#34;min\u0026#34;: 2, \u0026#34;max\u0026#34;: 12, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Vertical padding\u0026#34;, \u0026#34;default\u0026#34;: 4 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;badge_padding_horizontal\u0026#34;, \u0026#34;min\u0026#34;: 4, \u0026#34;max\u0026#34;: 20, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Horizontal padding\u0026#34;, \u0026#34;default\u0026#34;: 8 }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;badge_border_radius\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 20, \u0026#34;step\u0026#34;: 1, \u0026#34;unit\u0026#34;: \u0026#34;px\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Border radius\u0026#34;, \u0026#34;default\u0026#34;: 4 }, { \u0026#34;type\u0026#34;: \u0026#34;header\u0026#34;, \u0026#34;content\u0026#34;: \u0026#34;Discount Animation\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_type\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Animation Type\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;none\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;None\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;wsp_bounce\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Bounce\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;wsp_flash\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Flash\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;wsp_pulse\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Pulse\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;wsp_fadeIn\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Fade In\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;wsp_slideInUp\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Slide In Up\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;none\u0026#34;, \u0026#34;info\u0026#34;: \u0026#34;Select an animation for the discount text.\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_duration\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Animation Duration\u0026#34;, \u0026#34;min\u0026#34;: 0.1, \u0026#34;max\u0026#34;: 5, \u0026#34;step\u0026#34;: 0.1, \u0026#34;unit\u0026#34;: \u0026#34;s\u0026#34;, \u0026#34;default\u0026#34;: 1, \u0026#34;info\u0026#34;: \u0026#34;How long the animation takes to complete one cycle.\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_timing_function\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Animation Speed Curve\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;ease\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Ease (default)\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;linear\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Linear\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;ease-in\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Ease In\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;ease-out\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Ease Out\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;ease-in-out\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Ease In Out\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;ease\u0026#34;, \u0026#34;info\u0026#34;: \u0026#34;Controls the acceleration curve of the animation.\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;select\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_iteration_count\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Animation Repetitions\u0026#34;, \u0026#34;options\u0026#34;: [ { \u0026#34;value\u0026#34;: \u0026#34;1\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Once\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;2\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Twice\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;3\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Three Times\u0026#34; }, { \u0026#34;value\u0026#34;: \u0026#34;infinite\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Infinite (loops forever)\u0026#34; } ], \u0026#34;default\u0026#34;: \u0026#34;1\u0026#34;, \u0026#34;info\u0026#34;: \u0026#34;How many times the animation should play.\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;range\u0026#34;, \u0026#34;id\u0026#34;: \u0026#34;animation_delay\u0026#34;, \u0026#34;label\u0026#34;: \u0026#34;Animation Delay\u0026#34;, \u0026#34;min\u0026#34;: 0, \u0026#34;max\u0026#34;: 10, \u0026#34;step\u0026#34;: 0.1, \u0026#34;unit\u0026#34;: \u0026#34;s\u0026#34;, \u0026#34;default\u0026#34;: 0, \u0026#34;info\u0026#34;: \u0026#34;Wait time before the animation starts.\u0026#34; } ], \u0026#34;presets\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;Product Price (WSP)\u0026#34; } ] } {% endschema %} \u0026lt;script\u0026gt; (function() { const productJson = {{ product | json }}; const uniqueId = \u0026#34;{{ unique_id }}\u0026#34;; const currencySymbol = \u0026#34;{{ cart.currency.symbol }}\u0026#34;; function formatMoney(cents) { if (typeof cents !== \u0026#39;number\u0026#39;) cents = parseInt(cents); return currencySymbol + (cents / 100).toFixed(2); } function updateLivePrice() { const currentPriceElem = document.querySelector(`.wsp-current-price-${uniqueId}`); const comparePriceElem = document.querySelector(`.wsp-compare-price-${uniqueId}`); const badgeElem = document.querySelector(`.wsp-discount-badge-${uniqueId}`); const badgeTextElem = document.querySelector(`.wsp-discount-animated-text-${uniqueId}`); if (!currentPriceElem) return; const params = new URLSearchParams(window.location.search); let variantId = params.get(\u0026#39;variant\u0026#39;); let selectedVariant = variantId ? productJson.variants.find(v =\u0026gt; v.id == variantId) : productJson.variants[0]; if (!selectedVariant) selectedVariant = productJson.variants[0]; currentPriceElem.innerHTML = formatMoney(selectedVariant.price); if (selectedVariant.compare_at_price \u0026gt; selectedVariant.price) { if (comparePriceElem) { comparePriceElem.style.display = \u0026#39;inline-block\u0026#39;; comparePriceElem.innerHTML = formatMoney(selectedVariant.compare_at_price); } if (badgeElem) { badgeElem.style.display = \u0026#39;inline-flex\u0026#39;; let discount = Math.round(((selectedVariant.compare_at_price - selectedVariant.price) * 100) / selectedVariant.compare_at_price); let configText = \u0026#34;{{ block.settings.discount_badge_text }}\u0026#34;; badgeTextElem.innerHTML = configText.includes(\u0026#39;[discount]\u0026#39;) ? configText.replace(\u0026#39;[discount]\u0026#39;, discount) : discount + \u0026#34;% off\u0026#34;; } } else { if (comparePriceElem) comparePriceElem.style.display = \u0026#39;none\u0026#39;; if (badgeElem) badgeElem.style.display = \u0026#39;none\u0026#39;; } } let lastUrl = location.href; new MutationObserver(() =\u0026gt; { if (location.href !== lastUrl) { lastUrl = location.href; updateLivePrice(); } }).observe(document, {subtree: true, childList: true}); document.addEventListener(\u0026#39;change\u0026#39;, (e) =\u0026gt; { if (e.target.name === \u0026#39;id\u0026#39; || e.target.closest(\u0026#39;.variant-input\u0026#39;)) { setTimeout(updateLivePrice, 50); } }); updateLivePrice(); })(); \u0026lt;/script\u0026gt; Step 3: Add block in Product Page Template Goto Customize theme \u0026raquo; Product Page Template and Add New Block as per the screenshot below: ","permalink":"/posts/shopify/how-to-show-sale-discount-percentage-on-shopify/","summary":"\u003ch2 id=\"step-1-replace-the-code-in-_product-card-galleryliquid\"\u003eStep 1: Replace the code in _product-card-gallery.liquid\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eReplace the following code in _product-card-gallery.liquid\u003c/strong\u003e\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e{%- if product.available == false or product.compare_at_price \u0026gt; product.price and product.available -%}\n    \u0026lt;div\n    class=\u0026quot;\n        product-badges__badge product-badges__badge--rectangle\n        {% if product.available == false %} color-{{ settings.badge_sold_out_color_scheme }}{% elsif product.compare_at_price \u0026gt; product.price %} color-{{ settings.badge_sale_color_scheme }}{% endif %}\n    \u0026quot;\n    \u0026gt;\n    {%- if product.available == false -%}\n        {{ 'content.product_badge_sold_out' | t }}\n    {%- elsif product.compare_at_price \u0026gt; product.price -%}\n        {{ 'content.product_badge_sale' | t }}\n    {%- endif -%}\n    \u0026lt;/div\u0026gt;\n{%- endif -%}\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cstrong\u003eWith the following code\u003c/strong\u003e\u003c/p\u003e","title":"How To Show Sale Discount Percentage on Shopify"},{"content":"Shopify is evolving fast and now, connecting your store with AI tools like Claude is easier than ever.\nPreviously, this required custom apps and technical setup. But now, you can connect your Shopify store and start chatting with your data in just a few clicks.\nHere’s how: 👇\nStep 1: Open Claude \u0026amp; Go to Settings Start by opening your Claude app. Head over to Settings → Connectors. Step 2: Browse Connectors Click on “Browse Connectors” and search for Shopify. You’ll see it marked as new and trending. Step 3: Connect Your Store Click the “+” icon and select your Shopify store. Then simply authorize access.\n👉 Claude will request permission to access:\nProducts Customers Orders Discounts Approve everything to proceed.\nStep 4: Start Using Your Data Once connected, open a new chat in Claude.\nYou can now ask things like:\n“List all my products” “Show my customers” “Analyze my orders” And it will instantly pull real data from your store.\nStep 5: Use AI for Growth This is where it gets powerful.\nYou can:\nGenerate reports Improve conversion rate (CRO) Get SEO suggestions Brainstorm marketing ideas All using your real Shopify data.\nBonus: Free Shopify Sections If you want to improve your store design without coding, you can also use free Shopify sections like:\nProduct sliders Pricing tables Animated banners (You can link your GitHub here)\nFinal Thoughts What used to be technical and messy is now simple and accessible.\nIf you’re a non-technical Shopify merchant, this is one of the easiest ways to start using AI to grow your store.\n","permalink":"/posts/shopify/how-to-use-claude-connector-for-shopify-store/","summary":"\u003cp\u003eShopify is evolving fast and now, connecting your store with AI tools like Claude is easier than ever.\u003c/p\u003e\n\u003cp\u003ePreviously, this required custom apps and technical setup. But now, you can connect your Shopify store and start chatting with your data in just a few clicks.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eHere’s how: 👇\u003c/strong\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"step-1-open-claude--go-to-settings\"\u003eStep 1: Open Claude \u0026amp; Go to Settings\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eStart by opening your Claude app.\u003c/li\u003e\n\u003cli\u003eHead over to Settings → Connectors.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"step-2-browse-connectors\"\u003eStep 2: Browse Connectors\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eClick on “Browse Connectors” and search for Shopify.\u003c/li\u003e\n\u003cli\u003eYou’ll see it marked as new and trending.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"step-3-connect-your-store\"\u003eStep 3: Connect Your Store\u003c/h2\u003e\n\u003cp\u003eClick the \u003cstrong\u003e“+”\u003c/strong\u003e icon and select your Shopify store.\nThen simply \u003cstrong\u003eauthorize access\u003c/strong\u003e.\u003c/p\u003e","title":"How To Use Claude Connector For Shopify"},{"content":"HTML5 Mobile Meta Tags There are several tags that are specifically geared to mobile devices. Among them are tags that tell browsers to take up the entire view-port and disable scaling, and to change the status bar color, which we will cover in the following section.\nView-port Meta Tag On the desktop, unless you’ve expanded your browser window size beyond the bounds of your monitor, the viewport size is the size of the browser window. On most mobile devices, the scale of the page can be controlled, but the viewport size remains the same, determined by the size of the device’s screen. The “viewport” tag allows us to dicate the logical dimensions and scaling of the browser viewport window on mobile.\nViewport tag is supported on all smartphones and all of the mobile devices. By setting the viewport width equal to device-width, we’re telling the browser to set the document width to the device width.\nThe view-port tag supports a comma-delimed list of the directives allowing us to dicate the width, scale, and heigh of the browser view-port. You can tell the browser to not allow scaling, ot to scale up to a maximum or down to a minimum value.\nwidth= | device-width Generally, you’ll want to use the key term device-width to set the view-port width to the width of the device, though numeric values are also valid. The default calues differs by browser, but is generally around 980. The minimum value is 200, the maximum 10,000.\nheight= | device-height Set to device-height, or a value like 480 for an iPhone 4 or older, defines the view-port height. This calue is generally omitted in favor of using only width. For reference, the minimum value is 223.\nuser-scalable = no|yes Determines whether or not the user can zoom in and out to change the scale of the view-port. Set to “YES” to allow scaling and “NO” to disallow scaling. The is yes. Setting to no also prevents scrolling on data entry. User scaling, if allowed, can be limited by the minimum-scale and maximum-scale properties of the view-port .\nThe default width rendered by most mobile browsers is 980px. By setting the width to device-width, the user does not need to zoom in on page load because you served them 980px width on a 320px device. We could have set the view-port width to 320 for 320 px instead of device-width, but then it would only work correctly on mobile devices of exactly 320px width. We are setting the width of the window to the width of the device, which optimal: it scales the page proportionally to the device without the author having to know the width of the device the user may be using.\nHowever, this is not necessarily optimal for all websites, but rather just for mobile sites and mobile web applications. Then, when user-scalable is enabled the user can zoom in to make the page more legible for those who can’t read small print.\nThe function of the view-port tag really is presentation, and was never part of any specifications; rather, it’s a feature initiated by Apple. The specification to convert the functionality from HTML mark-up to CSS with @view-port is well under way, and os partially supported in IE10.\n","permalink":"/posts/html-5/html-mobile-meta-tags/","summary":"\u003ch2 id=\"html5-mobile-meta-tags\"\u003eHTML5 Mobile Meta Tags\u003c/h2\u003e\n\u003cp\u003eThere are several \u003cmeta\u003e tags that are specifically geared to mobile devices. Among them are \u003cmeta\u003e tags that tell browsers to take up the entire view-port and disable scaling, and to change the status bar color, which we will cover in the following section.\u003c/p\u003e\n\u003ch2 id=\"view-port-meta-tag\"\u003eView-port Meta Tag\u003c/h2\u003e\n\u003cp\u003eOn the desktop, unless you’ve expanded your browser window size beyond the bounds of your monitor, the viewport size is the size of the browser window. On most mobile devices, the scale of the page can be controlled, but the viewport size remains the same, determined by the size of the device’s screen.\nThe “viewport” \u003cmeta\u003e tag allows us to dicate the logical dimensions and scaling of the browser viewport window on mobile.\u003c/p\u003e","title":"HTML5 Mobile Meta Tags"},{"content":"While HTML5 is a language that has been developing for more than Eight years , its application in real systems and popularization came after his triumph over XHTML2 to become the new standard markup language for web development.\nBecause of their relatively recent entry into the world of development, there are few who know exact science full properties of this new language. That is why in this article we have decided to list the key features of this markup in order to lay the groundwork necessary for proper development.\nSeveral new elements included this language, which today are compatible with all popular browsers in their latest versions. Firefox, Chrome, Safari and Opera have supported this language for some time, while Internet Explorer gave support since September 2010 with the beta version of IE9.\nHTML 5 and multimedia content HTML5 have introduced two new labels here whose names are ’audio’ and ‘video’ , its function is to allow us to add audio and video to a web page without using long codes ’embed’ , as is commonly done today to include flash videos or preloaded on a server.\nThe label ’video’ brings several attributes, among which are ‘control’ ‘autoplay’ ‘src’ ‘height’ ‘width’ ‘loop’ ‘preload’ ‘audio’ which gives us the opportunity to modify the player at will without resorting to CSS or Javascript . Besides this, ‘video’ allows the addition of text between the opening and closing tag.\nFor its part, the label ‘audio’ works similarly to sound content and has five attributes on their own, ‘autoplay’, ‘controls’, ‘loop’, ‘preload’ and ‘src’.\nSite structure with HTML 5 With new labels like HTML5 provides new levels of structuring. These labels are responsible for defining the different sections of a website, and many of them come with their own position in the defined page.\n‘section’ ‘footer’ ‘header’ ‘nav’ ‘article’ ‘aside’ ‘figure’ Forms with HTML 5 As regards forms, labeled ‘input’ remains the basis of everything, but with the difference that now has new ways to declare its type, which adds flexibility and facilitates the validation.\nA total of twenty-three types of ‘input’ that can be used in a form, among which we find the types ’date’, ‘datetime’, ‘datetimelocal’, ‘time’, ‘month’, ‘week’, ‘url‘, ‘range‘, number and email ‘ that were included with this release. With this there is no need to declare an input type ’text’ , condition characters it receives with Javascript and then validate the server side the value we are really hoping, just carefully define the type and the browser will process correctly data.\nInline elements The labels ’meter’, ‘time’, ‘mark’ and ‘progress’ were included to be used in representations of figures, dates, time, lists or progress bars, and so achieve better semantic structure. Generally used to wrap similar content, and as its name says each has a related content.\nCharts Perhaps one of the best projects presented is HTML5 tag ’canvas’ , considered by far the baby darling of this new standard because of its potential and great usability.\nThe label ’canvas’ allows us to display graphics by plane code to just giving us the opportunity to define a height and width for the area of stroke, allows the use of HTML5 events and when combined with Javascript you can create pure magic .\nYour accede to this tag through the stroke of Javascript functions, serves as a 2D drawing surface for presentation graphics, games, animations and image compositions.\nInteractive Elements Labels for this function are presented as ’datagrid’ , which can be used to provide an interactive data set. We also have the label ’details’ allows us to provide advice and other useful information.\nThe label ’menu’ , which had previously been declared obsolete, returns with a new functionality. It has two attributes, which are ’label’ and ‘type’ , and is used to define menu lists with controls.\nCharset and HTML5 DOCTYPE The charset of the site is defined with a fairly easy label to remember, meta charset = ‘UTF-8’ , while the new DOCTYPE is defined in a simpler way, simply stating that our website is HTML type! doctype html.\nChanges to attributes of existing elements in HMTL 5 HTML5 added some new attributes to elements that existed in the previous version of the language. For example, anchor type elements as ’a’ and elements of type ’area’ have received a new attribute that is called ’media’ , the item ’base’ now has an attribute ’target’ and the element ’meta ‘ has a ’charset’ as an attribute.\nMoreover there are certain attributes that deprecator, such is the case the attribute ’language’ label ‘script’, ‘border’ label ‘inc’, ‘name’ of the anchor type ‘a’ and ‘type’ as an attribute of ‘style’ and ‘script’\nElements deprecated in HTML 5 There are several elements that quedaro out of this new version, traditional labels like ‘font’ became better life, acompletan labels list\n’acronym’ ‘applet’ ‘basefont’ ‘big’ ‘center’ ‘dir’ ‘font’ ‘frame’ ‘frameset’ ‘isindex’ ‘noframes’ ‘noscript’ ‘s’ ‘strike’ ‘tt’ ‘u’ ","permalink":"/posts/html-5/html5-intro/","summary":"\u003cp\u003eWhile \u003ca href=\"https://html5up.net/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eHTML5\u003c/a\u003e\n is a language that has been developing \u003cstrong\u003efor more than Eight years\u003c/strong\u003e , its application in real systems and popularization came after his triumph over XHTML2 to become the new standard markup language for web development.\u003c/p\u003e\n\u003cp\u003eBecause of their relatively recent entry into the world of development, there are few who know exact science full properties of this new language. That is why in this article we have decided to list the key features of this markup in order to lay the groundwork necessary for proper development.\u003c/p\u003e","title":"HTML5-Intro"},{"content":"Your Shopify store is missing out on a massive opportunity. While everyone’s focused on Google search rankings, AI models like ChatGPT, Google Gemini, and Microsoft Copilot are becoming the new discovery channels. And here’s the thing: most store owners have no idea how to optimize for them.\nThis guide walks you through the exact steps we used to help our clients get their products visible in these AI platforms. No fluff, just actionable tactics.\nWhy You Should Care About AI Visibility Right Now AI agents are becoming the new search engine. When customers ask ChatGPT “where can I buy quality coffee,” your products could show up. But only if you optimize for it. Think of it as SEO 2.0, except most of your competitors aren’t doing it yet.\nShopify just released the Agentic Storefront feature that makes this possible. It’s already installed on your store. You just need to set it up properly.\nStep 1: Optimize Your Product Categories This is the foundation. AI models use product categories to understand what you’re selling.\nHere’s what to do:\nGo to your Shopify admin and open any product. You’ll see a “Category” field. Don’t leave it blank. Search for the most relevant category for your product. If you’re selling coffee, search for “coffee beverages.” If it’s a t-shirt, pick “apparel” or “clothing.”\nOnce you select a category, Shopify automatically shows you category-specific fields below. These are called category meta fields. For a coffee product, you might see fields for caffeine content, roast country, or grind size. Fill these in completely.\nWhy does this matter? AI models receive this structured data directly from your Shopify catalog. The more detailed and accurate your categories are, the better your chances of appearing in relevant AI searches.\nPro tip:\nGo through your entire product catalog and fill in categories for all items. Yes, it takes time. But this is one of the highest-impact optimizations you can do. Step 2: Create AI-Enhanced Product Descriptions Your regular product description might be great for humans, but AI models need a different format.\nHere’s the process:\nFirst, create a new meta field in your Shopify settings. Go to Settings \u0026gt; Meta fields and click on Products. Create a new meta field called “AI Product Description” and set it to multi-line text.\nNow here’s where it gets interesting. Take your existing product description and paste it into ChatGPT. Ask it to rewrite it in markdown format. Markdown is a structured way to format text that AI models understand better than plain prose.\nCopy that markdown-formatted description and paste it into your new AI Product Description meta field. Save it.\nFinally, go back to your Shopify catalog mappings and map this new meta field instead of your regular product description. This tells Shopify to send the AI-enhanced version to ChatGPT, Gemini, and Copilot.\nWhy markdown? It helps AI models parse your product information more accurately, leading to better visibility in their search results.\nStep 3: Customize Your agents.md File Every Shopify store has a file that AI agents read when they visit your site. It’s called agents.md, and by default, it’s pretty generic.\nYou can customize it to tell AI agents more about your store.\nGo to your Shopify admin and navigate to Online Store \u0026gt; Themes. Click the three dots next to your active theme and select Edit Code. Under Templates, create a new file called agents.md.liquid. In this file, you can add custom instructions for AI agents. For example, you might write something like: “This is a specialty coffee store focused on sustainable, single-origin beans from Ethiopia and Colombia. We offer subscription options and free shipping on orders over 50 dollars. When recommending products, prioritize our bestsellers and consider customer preferences for roast level.”\nThis context helps AI models understand your store better and recommend your products more accurately. The Quick Wins After you implement these three steps, check your Shopify Agentic app dashboard. You’ll see analytics showing clicks and sales from ChatGPT and Microsoft Copilot. This data is gold. Use it to see which products are getting visibility and which ones need optimization.\nStart with your top 10 products. Get those fully optimized first. Then expand to your entire catalog.\nWhat’s Next This is early-stage territory. Not many store owners are doing this yet. But that’s changing fast. The ones who optimize now will have a massive advantage when AI shopping becomes mainstream.\nThe best part? These changes don’t hurt your regular SEO. They only add more channels for customers to discover you.\nStart today. Pick one product, fill in its category completely, create an AI-enhanced description, and see how it performs. Then scale.\nYour future customers are asking AI about your products right now. Make sure your store answers back.\n","permalink":"/posts/shopify/rank-your-shopify-store-in-chatgpt/","summary":"\u003cp\u003eYour Shopify store is missing out on a massive opportunity. While everyone’s focused on Google search rankings, AI models like ChatGPT, Google Gemini, and Microsoft Copilot are becoming the new discovery channels. And here’s the thing: most store owners have no idea how to optimize for them.\u003c/p\u003e\n\u003cp\u003eThis guide walks you through the exact steps we used to help our clients get their products visible in these AI platforms. No fluff, just actionable tactics.\u003c/p\u003e","title":"Shopify Agentic Storefront – RANK Your Shopify Store in ChatGPT"},{"content":" If you’ve ever wondered why some websites appear at the top of Google While others stay buried on page 10, the answer is simple: SEO. Search Engine Optimization (SEO) is one of the most powerful digital marketing strategies used today, helping businesses improve their online visibility, attract the right audience, and generate long-term organic traffic. What Is SEO? Definition SEO (Search Engine Optimization) is the process of improving your website so it ranks higher on search engines like Google, Bing, and Yahoo. When your website appears higher in search results, more people can find your business, visit your website, and convert into customers. In simple terms: Better SEO = Higher Ranking = More Traffic = More Sales Unlike paid ads, SEO focuses on organic traffic, meaning you don’t pay Google for clicks — your website earns visibility by being relevant, trustworthy, and user-friendly. Why Is SEO Important for Businesses? Whether you run a small business or a large corporation, SEO brings huge benefits:\nIncreases visibility for people searching for your products or services. Builds trust and credibility, as users trust websites that rank on the first page. Drives high-quality traffic—people already interested in what you offer. Long-term results that continue to generate traffic without ongoing ad spend. Improves user experience, making your site faster, cleaner, and easier to navigate. Simply put: SEO is essential if you want to compete online. How Does SEO Work? SEO is a combination of strategies that help search engines understand your website, trust your content, and recommend it to users.\nKey Components of How SEO Works Keyword Research This is the foundation of SEO. It involves finding the exact words and phrases your audience is searching for on Google. Example: If your business sells web design services, users might search for: best web design company website development services affordable web design in New York Creatify uses advanced tools to identify keywords with high search volume and low competition, so you can rank faster. On-Page SEO On-page SEO refers to the optimization done directly on your website. This Includes: Writing SEO-Friendly Content Adding keywords naturally Optimizing headings (H1, H2, H3) Improving meta titles and descriptions Using internal links Optimizing images and alt text On-page SEO ensures Google understands what your content is about. Technical SEO Technical SEO focuses on improving your website’s backend structure, including: Website speed Mobile-friendliness Secure HTTPS connection Sitemap and website indexing Fixing crawl errors Improving Core Web Vitals A technically optimized website helps search engines crawl your pages easily — improving your ranking chances. Off-Page SEO (Backlinks) Off-page SEO is all about building your website’s reputation through backlinks — links from other websites pointing to yours. Google sees backlinks as votes of trust. More high-quality backlinks = higher authority = better rankings. At Creatify, we build natural, high-quality backlinks through: Guest posts Business listings High-authority blogs Social mentions Niche directories Content Creation Content is King — and Google loves websites that publish valuable, helpful content. Example Include: Blogs Guides Case Studies Service pages Infographics Videos Good SEO content answers the user’s question better than anyone else. User Experience (UX) Google values how users interact with your site. Important Factors: Page load speed Mobile responsiveness Easy navigation Clear call-to-action buttons Clean layout If people stay longer and engage more, Google rewards you with better rankings. How long Does SEO Take? SEO builds slowly but lasts long.\nTypical Timeline: Initial improvements: 1–3 months Ranking growth: 3–6 months Stable results: 6–12 months The Good News? Once your website ranks, the traffic continues for months and even years—without paying for ads. SEO Services by Creatify At Creatify, we offer complete, results-driven SEO services, including:\nKeyword research On-page \u0026amp; technical SEO High-quality backlink building Content writing \u0026amp; optimization Local SEO for Google Maps SEO reporting \u0026amp; analytics Our goal is simple: Grow your online visibility, increase traffic, and generate real sales for your business.\nFinal Thoughts SEO is one of the best investments for any business looking to grow online. It brings long-term traffic, builds trust, and helps you stay ahead of your competitors.\nWhether you’re a startup, small business, or established brand — SEO should be an essential part of your digital strategy.\nIf you’d like Creatify to help rank your website and grow your business online , feel free to reach out anytime.\n","permalink":"/posts/seo/what-is-seo-and-how-does-it-work/","summary":"\u003cul\u003e\n\u003cli\u003eIf you’ve ever wondered why some websites appear at the top of \u003cstrong\u003eGoogle\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003eWhile others stay buried on page 10, the answer is simple: \u003cstrong\u003eSEO\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eSearch Engine Optimization (SEO) is one of the most powerful digital marketing strategies used today,  helping businesses improve their online visibility, attract the right audience, and generate long-term   organic traffic.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"what-is-seo\"\u003eWhat Is SEO?\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eDefinition\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eSEO (Search Engine Optimization)\u003c/strong\u003e is the process of improving your website so it \u003cstrong\u003eranks higher\u003c/strong\u003e on search engines like Google, Bing, and Yahoo. When your website appears higher in search results, more people can find your business, visit your website, and convert into customers.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eIn simple terms:\u003c/strong\u003e\n\u003cstrong\u003eBetter SEO = Higher Ranking = More Traffic = More Sales\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cul\u003e\n\u003cli\u003eUnlike \u003cstrong\u003epaid ads\u003c/strong\u003e, SEO focuses on \u003cstrong\u003eorganic traffic\u003c/strong\u003e, meaning you don’t pay Google for clicks — your \u003cstrong\u003ewebsite earns visibility\u003c/strong\u003e by being relevant, trustworthy, and user-friendly.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"why-is-seo-important-for-businesses\"\u003eWhy Is SEO Important for Businesses?\u003c/h2\u003e\n\u003cp\u003eWhether you run a small business or a large corporation, SEO brings huge benefits:\u003c/p\u003e","title":"What Is SEO and How Does It Work?"},{"content":"Introduction: Why SEO Matters in Today’s World Imagine having a stunning website or online store, but no one can find it. Sounds frustrating, right? That’s where SEO Services come in. Search Engine Optimization (SEO) is the key to getting your business noticed on Google, Bing, and other search engines. Whether you’re a small business owner, an E-commerce seller, or a service provider, ranking higher on search results can bring you more customers and skyrocket your sales. At WebSensePro, our expert SEO Services help you climb the ranks, attract the right audience, and grow your business—all without breaking the bank. Let’s explore how we can make this happen for you! What Are SEO Services, and Why Do You Need Them? SEO is the process of optimizing your website so it appears at the top when people search for terms related to your business—like “best clothing store near me” or “affordable web design USA“. Here’s why SEO is a game-changer:\nMore Traffic: 75% of people never scroll past the first page of Google. Ranking higher means more clicks to your site.\nTargeted Customers: SEO brings in people actively searching for what you offer, making them more likely to buy.\nCost-Effective Marketing: SEO delivers long-term results, unlike paid ads, which stop working when you stop paying.\nBuilds Trust: Websites at the top of search results are seen as more credible and professional.\nBeat the Competition: If your competitors aren’t using SEO, you’ll leave them in the dust. If they are, you need it to keep up!\nWithout SEO, your website is like a shop hidden in a back alley. With it, you’re on the main street with a neon sign! How Creatify’s SEO Services Work for You At Creatify, we don’t believe in one-size-fits-all solutions. Our SEO Services are tailored to your business goals, industry, and audience. Here’s what you get when you partner with us:\nKeyword Research: We find the exact words your customers are searching for—like “buy handmade jewelry online” or “SEO services New york”—and target them strategically.\nOn-Page Optimization: We tweak your website’s content, titles, headings, and images to make it search-engine-friendly without losing its appeal.\nTechnical SEO: We fix behind-the-scenes issues like slow loading times, broken links, and mobile compatibility to ensure Google loves your site.\nContent Creation: Our team crafts blog posts, product descriptions, and landing pages that rank well and engage your visitors.\nLink Building: We secure high-quality backlinks from trusted websites to boost your authority and rankings.\nLocal SEO: If you’re targeting a specific area (like Karachi or Lahore), we optimize your site to dominate local searches.\nPerformance Tracking: We provide monthly reports showing your rankings, traffic, and growth—so you see real results.\nContinuous Improvement: SEO isn’t a one-time fix. We keep refining our strategy to keep you ahead. Real Results: SEO Success Stories Here’s how our SEO Services have transformed businesses:\nCase Study 1: The Local Bakery A small bakery wanted more foot traffic. We optimized their site for “best cakes in New York” and added them to Google My Business. Within 3 months, they ranked on page 1, saw a 60% increase in website visits, and doubled their orders. Case Study 2: The Online Retailer An E-commerce store selling gadgets struggled with zero visibility. We targeted keywords like “buy cheap electronics online” and fixed technical issues. In 3 months, their organic traffic tripled, and sales jumped by 80%.\nYour business could see similar growth—or even better—with our help!\nThe SEO Process: How We Get You to the Top Wondering how we work our magic? Here’s our step-by-step approach:\nFree SEO Audit: We analyze your current website to spot weaknesses and opportunities—yours for free in a 15-minute consultation.\nStrategy Planning: We create a custom SEO plan based on your industry, competitors, and goals.\nImplementation: Our team gets to work—optimizing pages, writing content, and building links.\nMonitoring: We track your rankings and traffic using tools like Google Analytics and Search Console.\nRefinement: We adjust the strategy monthly to ensure you keep climbing higher.\nPro Tips to Boost Your SEO Results While we handle the heavy lifting, here are some things you can do to support your SEO success:\nUpdate Regularly: Add fresh content like blogs or new product listings to keep your site active.\nUse Social Media: Share your website links on Facebook, Instagram, and Twitter to drive traffic and signals to Google.\nEncourage Reviews: Ask happy customers to leave positive reviews online—it helps with local SEO.\nFocus on Speed: A fast-loading site keeps visitors happy and improves rankings (we’ll optimize this for you!).\nTarget Long-Tail Keywords: Phrases like “affordable SEO services in USA” often convert better than generic terms like “SEO.”\nSpecial Offer – Get Started Today! Ready to dominate search results? For a limited time, sign up for our SEO Services within the next 7 days and enjoy 20% off your first 3 months plus a free website audit (worth $75!). This deal is exclusive to the first 10 clients, so act fast—your spot won’t wait!\nFrequently Asked Questions About SEO How long does SEO take?\nResults typically start showing in 2-3 months, with major gains in 6-12 months, depending on competition. Is it expensive?\nOur packages start as low as 150 UDS/month, making it affordable for any business. Can I do it myself?\nBasic SEO is possible, but expert strategies—like ours—save time and deliver faster, bigger results. Conclusion: Your Path to SEO Success Starts Here SEO isn’t just about ranking higher—it’s about growing your business, reaching more customers, and building a brand people trust. With Creatify SEO Services, you get a dedicated team, proven strategies, and measurable results that take your online presence to the next level. Don’t let your competitors steal the spotlight. Let’s get your website on page 1 of Google and turn clicks into cash!\nReady to boost your rankings?\nbook your free 15-minute SEO consultation . Let’s make your business the one everyone finds first! ","permalink":"/posts/seo/why-seo-matters/","summary":"\u003ch2 id=\"introduction-why-seo-matters-in-todays-world\"\u003eIntroduction: Why SEO Matters in Today’s World\u003c/h2\u003e\n\u003cp\u003eImagine having a \u003cstrong\u003estunning website\u003c/strong\u003e or \u003cstrong\u003eonline store\u003c/strong\u003e, but no one can find it. Sounds frustrating, right? That’s where SEO Services come in. Search Engine Optimization (SEO) is the key to getting your business noticed on Google, Bing, and other search engines. Whether you’re a small business owner, an E-commerce seller, or a service provider, ranking higher on search results can bring you more customers and skyrocket your sales. At WebSensePro, our expert SEO Services help you climb the ranks, attract the right audience, and grow your business—all without breaking the bank. Let’s explore how we can make this happen for you!\n\u003cimg alt=\"SEO Result\" loading=\"lazy\" src=\"/posts/assets/SEO/img-8.webp\"\u003e\u003c/p\u003e","title":"Why SEO Matters in Today’s World"}]