Shopify स्टोर में एनिमेशन कैसे जोड़ें

क्या Shopify में built-in एनिमेशन सेक्शन है?

एनिमेशन फ़ाइलों के लिए नहीं। Shopify थीम में कोई Lottie या Rive सेक्शन नहीं होता, और थीम एडिटर में कोई एनिमेशन एलिमेंट नहीं है। थीम में क्या मिलता है यह अलग-अलग होता है, लेकिन ज़्यादातर Online Store 2.0 थीम ये देती हैं:

• अपलोड या होस्ट किए गए वीडियो के लिए एक video सेक्शन या ब्लॉक;
• हल्के built-in इफ़ेक्ट, जैसे reveal-on-scroll, जिन्हें आप थीम सेटिंग्स में चालू या बंद करते हैं;
• एक Custom Liquid सेक्शन, जहाँ आप HTML और Liquid पेस्ट कर सकते हैं।

Shopify का हेल्प सेंटर इसे शर्त के साथ कहता है: "अगर आपकी थीम में Custom Liquid सेक्शन है, तो आप थीम एडिटर में अपना ऐप कोड उसमें जोड़ सकते हैं।" इस पर योजना बनाने से पहले अपनी थीम की सेक्शन लिस्ट जाँच लें।

इससे तीन रास्ते बचते हैं: शुरू से आखिर तक सीधे चलने वाली किसी भी चीज़ के लिए वीडियो, Lottie या Rive के लिए Custom Liquid, और no-code इंटरफ़ेस चाहिए तो ऐप्स। सिर्फ़ लूप होने वाले मैस्कॉट या एनिमेटेड लोगो के लिए अक्सर वीडियो ही काफ़ी होता है।

अपनी थीम में वीडियो सेक्शन कैसे जोड़ें?

थीम एडिटर में Add section चुनें और अपनी थीम का वीडियो सेक्शन चुनें। थीम के हिसाब से यह अपलोड की गई फ़ाइल या YouTube या Vimeo लिंक चलाता है। सजावटी लूप के लिए अपलोड की गई फ़ाइल चुनें और अगर सेक्शन में ये विकल्प हों तो autoplay और loop चालू करें; होस्टेड प्लेयर आमतौर पर अपने कंट्रोल और ब्रांडिंग दिखाते हैं।

प्रोडक्ट पेज अलग हैं: प्रोडक्ट मीडिया में .mp4, .mov या .webm फ़ॉर्मेट की वीडियो फ़ाइलें ली जाती हैं, जो प्रोडक्ट गैलरी में दिखती हैं। यह जगह प्रोडक्ट स्पिन या छोटे डेमो के लिए है, साइट को सजाने के लिए नहीं।

अपने सेक्शन लेआउट से मेल खाता चौकोर या वर्टिकल MP4 एक्सपोर्ट करें। अगर सेक्शन का बैकग्राउंड एक ही रंग का है, तो एनिमेशन को उसी रंग पर रेंडर करें, ताकि ट्रांसपेरेंसी की ज़रूरत न पड़े। ट्रांसपेरेंट ओवरले के लिए एक <video> एलिमेंट में दो फ़ाइलें चाहिए (Safari के लिए HEVC-alpha .mov, बाकी ब्राउज़र के लिए VP9-alpha WebM), जबकि थीम के वीडियो सेक्शन सिर्फ़ एक फ़ाइल लेते हैं। ऐसे में Custom Liquid इस्तेमाल करें।

हर Charmotion सेट में हर एनिमेशन का 1080×1080 MP4, एक 9:16 लॉन्च वीडियो और GIF प्रीव्यू शामिल हैं, सब सॉलिड बैकग्राउंड पर, जो थीम के वीडियो सेक्शन के लिए सही है। ट्रांसपेरेंट WebM और MOV और .riv फ़ाइल हर पेड प्लान के साथ मिलती हैं।

Custom Liquid सेक्शन से Lottie या Rive कैसे जोड़ें?

Shopify admin में Content, फिर Files में जाकर एनिमेशन फ़ाइल अपलोड करें और उसका फ़ाइल नाम कॉपी करें। थीम एडिटर में Custom Liquid सेक्शन जोड़ें और file_url फ़िल्टर से फ़ाइल को रेफ़र करें, जो उसका CDN URL लौटाता है।

dotLottie:

<dotlottie-wc src="{{ 'mascot.lottie' | file_url }}" autoplay loop
  style="width: 320px; height: 320px; margin: 0 auto"></dotlottie-wc>
<script type="module"
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

Rive, add-to-cart पर रिएक्ट करता हुआ:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "{{ 'mascot.riv' | file_url }}",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  document.addEventListener("submit", (e) => {
    if (e.target.matches('form[action*="/cart/add"]')) {
      r.viewModelInstance?.trigger("success").trigger();
    }
  });
</script>

Rive वाला उदाहरण किसी भी add-to-cart फ़ॉर्म के सबमिट होने पर success रिएक्शन फ़ायर करता है। जो थीम JavaScript से कार्ट में जोड़ती हैं, वे शायद फ़ॉर्म को सामान्य तरीके से सबमिट न करें, इसलिए अपनी थीम पर टेस्ट करें और ज़रूरत हो तो उसके कार्ट इवेंट्स से जोड़ें।

ट्रांसपेरेंट वीडियो भी इसी तरह काम करता है: एक <video autoplay muted loop playsinline>, जिसमें पहले .mov सोर्स और फिर .webm हो, और दोनों file_url की ओर पॉइंट करें।

क्या Shopify पर .riv या .json फ़ाइलें अपलोड कर सकते हैं?

Files पेज उन सभी फ़ाइलों के लिए है जिन्हें आपका स्टोर इस्तेमाल करता है, और file_url इन्हें Shopify के CDN से सर्व करता है। .riv या .lottie जैसा कोई खास एक्सटेंशन स्वीकार होता है या नहीं, यह Shopify के उस डॉक्यूमेंटेशन में साफ़ नहीं लिखा जिसे हम जाँच सके, इसलिए पहले अपलोड करके देखें। अगर Files इसे रिजेक्ट कर दे, तो आपके पास दो विकल्प हैं:

• फ़ाइल को कहीं और होस्ट करें। कोई भी CDN या object storage जो फ़ाइल को HTTPS पर CORS चालू करके सर्व करे, काम करेगा; पूरा URL src में डालें।
• दूसरा फ़ॉर्मेट इस्तेमाल करें। Lottie .json सादा टेक्स्ट है और dotLottie एक ZIP कंटेनर है; वीडियो एक्सपोर्ट से यह सवाल ही खत्म हो जाता है।

एनिमेशन फ़ाइलें छोटी रखें। फ़्लैट कैरेक्टर की Rive फ़ाइलें आमतौर पर कुछ दसियों किलोबाइट की होती हैं, जबकि बड़ा डाउनलोड Rive web runtime का होता है: Rive के अनुसार WebGL2 के लिए brotli-compressed करीब 648 KB। इसे सिर्फ़ उन्हीं templates पर लोड करें जिनमें एनिमेशन दिखता है, हर पेज के लिए theme.liquid में नहीं।

मेरा एनिमेटेड GIF लोगो स्थिर क्यों दिखता है?

कई थीम हेडर लोगो को Shopify की image pipeline से एक तय साइज़ में प्रोसेस करती हैं, और कुछ आउटपुट एनिमेटेड GIF का सिर्फ़ एक फ़्रेम दिखाते हैं। ऐसा होगा या नहीं, यह आपकी थीम पर निर्भर है, इसलिए सिर्फ़ एडिटर नहीं, लाइव स्टोरफ़्रंट पर प्रीव्यू देखें।

अगर आपका लोगो स्थिर है, तो हेडर को ठीक से चालू रखते हुए ये विकल्प हैं:

• हेडर एडिट करें। अगर आप code editor में सहज हैं, तो हेडर सेक्शन में लोगो इमेज की जगह एक छोटा <video autoplay muted loop playsinline>, file_url के ज़रिए मूल GIF की ओर पॉइंट करता <img>, या एक Rive canvas लगाएँ। पहले थीम की कॉपी (duplicate) बना लें।
• एनिमेटेड लोगो को कहीं और इस्तेमाल करें। हेडर के नीचे या हीरो सेक्शन में एक Custom Liquid सेक्शन थीम का कोड छुए बिना मोशन दिखा देता है।

हेडर का मोशन छोटा या हल्का रखें। जो लोगो लोड होने पर एक बार चलकर फिर idle हो जाए, वह आपके प्रोडक्ट्स से होड़ किए बिना ध्यान खींचता है। prefers-reduced-motion वाले विज़िटर्स और ईमेल व सोशल प्रीव्यू के लिए हमेशा एक स्थिर लोगो रखें।

क्या इसके बजाय ऐप इस्तेमाल करना चाहिए?

Shopify App Store के ऐप्स बिना कोड एडिट किए एनिमेटेड बैनर, Lottie प्लेयर या इफ़ेक्ट जोड़ सकते हैं। ये तब ठीक हैं जब आपकी थीम में Custom Liquid सेक्शन न हो या बाद में गैर-तकनीकी स्टाफ़ को एनिमेशन बदलना हो।

पहले इनकी कीमत को तौलें:

• परफ़ॉर्मेंस। ऐप्स अक्सर सिर्फ़ एनिमेशन वाले पेज पर नहीं, हर पेज पर स्क्रिप्ट डालते हैं। इंस्टॉल करने से पहले और बाद में अपने स्टोरफ़्रंट की स्पीड जाँचें।
• लॉक-इन। ऐप के अंदर बनाया गया कंटेंट आमतौर पर ऐप अनइंस्टॉल करने पर गायब हो जाता है या टूट जाता है।
• कीमत। कई एनिमेशन ऐप्स उस काम के लिए सब्सक्रिप्शन लेते हैं जो दस लाइन का Custom Liquid सेक्शन कर सकता है।

एक व्यावहारिक नियम: लूप के लिए थीम के वीडियो सेक्शन, एक-दो Lottie या Rive प्लेसमेंट के लिए Custom Liquid, और ऐप सिर्फ़ तब जब कई पेजों पर मैनेज्ड इंटरफ़ेस चाहिए।

Shopify थीम में Rive या Lottie एनिमेशन कैसे जोड़ें

1. फ़ाइल अपलोड करें. Shopify admin में Content, फिर Files में जाएँ और .riv, .lottie या वीडियो फ़ाइलें अपलोड करें।
2. Custom Liquid सेक्शन जोड़ें. जिस टेम्पलेट पर चाहिए, उस पर थीम एडिटर खोलें, Add section चुनें और Custom Liquid चुनें।
3. एम्बेड कोड पेस्ट करें. प्लेयर markup और script जोड़ें, और सोर्स के लिए {{ 'file-name' | file_url }} इस्तेमाल करें।
4. स्टोर इवेंट्स जोड़ें. add-to-cart या दूसरे इवेंट्स पर Rive ट्रिगर फ़ायर करें, और अपनी थीम के कार्ट व्यवहार के साथ टेस्ट करें।
5. स्पीड और मोशन सेटिंग्स जाँचें. पक्का करें कि प्लेयर सिर्फ़ उसी टेम्पलेट पर लोड हो और मोशन कम करें चालू होने पर एक स्थिर फ़्रेम दिखे।

अक्सर पूछे जाने वाले सवाल

क्या बिना ऐप के Shopify में Lottie जोड़ सकते हैं?

हाँ, अगर आपकी थीम में Custom Liquid सेक्शन है। Content, फिर Files में .lottie या .json अपलोड करें, और सेक्शन में {{ 'file.lottie' | file_url }} की ओर पॉइंट करता dotLottie web component और प्लेयर script पेस्ट करें।

क्या Shopify, Rive को सपोर्ट करता है?

सीधे तौर पर नहीं। Shopify थीम में कोई Rive सेक्शन नहीं है। आप Custom Liquid सेक्शन या थीम कोड में Rive का web runtime और .riv फ़ाइल एम्बेड कर सकते हैं, और add-to-cart जैसे स्टोरफ़्रंट इवेंट्स पर रिएक्ट करने के लिए उसकी स्टेट मशीन इस्तेमाल कर सकते हैं।

Shopify प्रोडक्ट पर कौन से वीडियो फ़ॉर्मेट अपलोड कर सकते हैं?

प्रोडक्ट मीडिया में .mp4, .mov और .webm फ़ॉर्मेट की वीडियो फ़ाइलें ली जाती हैं, और वे प्रोडक्ट गैलरी में आपकी फ़ोटो के साथ दिखती हैं। स्टोरफ़्रंट पर सजावटी लूप के लिए अपनी थीम के वीडियो सेक्शन में muted, लूपिंग MP4 इस्तेमाल करें, या ट्रांसपेरेंसी चाहिए तो Custom Liquid सेक्शन।

इस गाइड से झटपट जवाब

• क्या Shopify स्टोर में Lottie या Rive जोड़ सकते हैं?

स्रोत

• Extending your theme, Shopify Help Center
• Liquid filter: file_url, Shopify.dev
• Product media types, Shopify Help Center
• dotlottie-web: players for web, React, Vue, Svelte and web components, LottieFiles on GitHub
• Web (JS) runtime, Rive
• Video with alpha transparency on the web, Jake Archibald