Shopify store पर Framer landing pages कैसे चलाएँ

campaigns के लिए अपने Framer landing pages बनाएँ, और cart और checkout अपने Shopify store के अंदर ही रखें। cart permalink buyer को उस पार ले जाता है और उसका cart भी भर देता है। इस setup को दो चीज़ें तोड़ती हैं। दो domains देखकर आपका analytics गड़बड़ा जाता है, और दोनों जगह की prices अलग हो जाती हैं। दोनों एक दोपहर में ठीक हो सकते हैं।

अपने Framer landing pages और Shopify store को बाँट लें

Framer के पास वे pages जाते हैं जिन्हें आप अक्सर बदलते हैं और जिन पर design की छूट चाहिए: campaign landing pages, advertorials, brand की कहानी, launch pages और quiz के नतीजे। Shopify के पास पैसे से जुड़ी हर चीज़ रहती है: product pages, collections, cart, checkout, customer accounts और order status। checkout दोबारा मत बनाइए।

यह बँटवारा इसलिए चलता है क्योंकि दोनों सेट अलग काम करते हैं और उनके edit होने की रफ़्तार भी बहुत अलग है। इस महीने आप landing page के चार variants निकालेंगे, और checkout को एक बार भी नहीं छुएँगे।

एक से दूसरे तक पहुँचाने का काम cart permalink करता है

Shopify ने एक ऐसा URL format बताया है जो link से सीधे cart भर देता है। अपने Framer button को yourstore.com/cart/VARIANT_ID:QUANTITY पर भेजें। discount जोड़ना हो तो ?discount=CODE लगाएँ। एक से ज़्यादा item जोड़ना हो तो comma लगाएँ, जैसे /cart/11111:1,22222:2। और अगर आप चाहते हैं कि buyer सीधे checkout पर जाने की जगह cart page पर उतरे, तो ?storefront=true जोड़ दें।

variant ID आपको Shopify admin में variant खोलने पर URL में मिल जाती है। हर offer का एक permalink किसी साझा note में रखें। गलत variant ID हर buyer को गलत pack size पर भेज देगी, और यह बात आपको fulfilment report आने तक पता ही नहीं चलेगी।

ads पर एक डॉलर ख़र्च करने से पहले tracking ठीक करें

Framer और Shopify वाले ज़्यादातर setups यहीं चुपचाप टूटते हैं। visitor शुरू आपके Framer domain पर होता है और ख़त्म Shopify के checkout पर। सही configuration न हो तो GA4 एक session को दो गिन लेता है, और Meta के लिए click और purchase के बीच का धागा टूट जाता है।

चार काम करें। दोनों domains को GA4 की cross domain measurement लिस्ट में जोड़ें, या दोनों को एक ही root domain पर ले आएँ। Meta pixel Framer में लगाएँ, और दोबारा Shopify Customer Events के ज़रिए। अपने UTMs permalink के साथ आगे भेजें, ताकि छलांग के बाद भी source बचा रहे। फिर एक असली test purchase करें और पक्का करें कि वह GA4 में एक बार और Meta में एक बार दिखे, दो बार नहीं और शून्य बार भी नहीं।

दोनों systems में price एक जैसी रखें

जिस पल आपका Framer page 49 डॉलर कहता है और Shopify 54 डॉलर वसूलता है, उसी पल refund की माँगें और reviews की मुसीबत शुरू हो जाती है। हर page पर price ठीक एक ही जगह लिखें। इसे export की हुई image के अंदर कभी न रखें, और उस hero graphic के अंदर तो बिल्कुल नहीं जिसे बनाने में आपके दो घंटे लगे थे।

तीन landing pages से आगे बढ़ते ही offer को एक Framer CMS collection में ले जाएँ, जिसमें price, compare at price, permalink और stock status के fields हों। फिर एक edit हर page को update कर देगा। महीने में एक बार का reminder लगा लें कि हर live page को उसके Shopify product के बगल में खोलकर देखें कि दोनों एक ही बात कह रहे हैं।

जिस speed के आपने पैसे दिए हैं, उसे बचाकर रखें

Framer के pages शुरू में तेज़ होते हैं। फिर कोई एक chat widget, एक heatmap recorder, दो pixels और एक review embed जोड़ देता है, और 4G पर hero को चार सेकंड लग जाते हैं। Google की Largest Contentful Paint की सीमा, असली mobile visits के 75th percentile पर, 2.5 सेकंड है। पूरे page का बजट बस इतना ही है।

hero image को उसी size में भेजें जिसमें वह सच में दिखती है। उस पर lazy loading न लगाएँ। review widgets सिर्फ़ fold के नीचे load करें। test office के wifi पर desktop से नहीं, असली phone पर धीमी की गई mobile data पर करें।

Framer कब गलत tool है

200 SKUs वाला catalogue, जिसमें filtering, search और रोज़ बदलता stock हो, Shopify में ही रहना चाहिए, और Framer सिर्फ़ campaign pages के लिए। Framer वहाँ अपनी जगह बनाता है जहाँ design की क्वालिटी और बदलाव की रफ़्तार नतीजा तय करती है, यानी landing pages पर, catalogue देखने-भालने पर नहीं।

पूरा setup, क्रम से

अपना Framer domain जोड़ें। एक landing page और एक cart permalink बनाएँ। दोनों platforms पर pixel लगाएँ और UTMs को link के साथ आगे भेजें। एक असली purchase करें और उसे GA4, Meta और Shopify के order तक पीछा करते हुए देखें। इसके बाद ही उस पर ad का पैसा लगाएँ।

पहले page के लिए एक दिन रखें और उसके बाद हर page के लिए एक घंटा। यह पूरा stack चलाने की वजह ही रफ़्तार है, तो कोई नया angle पूरे sprint में नहीं, एक दोपहर में live हो जाना चाहिए।