Shopify आपको उत्पाद विकल्पों में चित्र जोड़ने की सुविधा देता है, ताकि ग्राहक देख सकें कि प्रत्येक विकल्प कैसा दिखता है। हालाँकि, Shopify द्वारा विनियमित होने के कारण, आप एक विकल्प मान के साथ केवल एक छवि ही जोड़ सकते हैं। तो, सवाल यह है कि एक विकल्प के साथ कई छवियाँ कैसे जोड़ी जाएँ?
Be Yours में एक उत्तर है, जिसमें आप एक विकल्प विकल्प मान के लिए कुछ छवियों को निर्दिष्ट कर सकते हैं । यह फ़ंक्शन विशेष रूप से रंग विकल्प के लिए उपयुक्त है, लेकिन आप इसे अन्य उद्देश्यों के लिए पूरी तरह से उपयोग कर सकते हैं जो आप चाहते हैं।
चरण:
आवश्यकताएं
- Be Yours 4.0.0 या बाद का संस्करण
-
आपको किसी वैरिएंट का चयन करने के बाद अन्य वैरिएंट के मीडिया को छिपाएँ को बंद करना होगा। यह विकल्प मूल Shopify व्यवहार के साथ संगत है - केवल एक छवि को एक विकल्प मान के साथ जोड़ना।
Be Yours में यह विकल्प निम्नलिखित अनुभागों में उपलब्ध है:
- विशेष उत्पाद अनुभाग
- उत्पाद जानकारी अनुभाग (उत्पाद पृष्ठों पर)
- उत्पाद जानकारी अनुभाग (उत्पाद मोडल पर)
एक विकल्प चुनें
अपने एडमिन में अपने उत्पाद को देखें और एक विकल्प चुनें जिसे आप अपनी छवियों को वर्गीकृत करना चाहते हैं। नीचे दिए गए उदाहरण में, मैंने रंग चुनने का फैसला किया। मेरा उत्पाद सफेद , गेहूँ और काले रंगों में उपलब्ध है और मैं केवल तभी संबंधित छवियाँ दिखाना चाहता हूँ जब कोई उपयोगकर्ता कोई विकल्प मान चुनता है।
छवियों के ALT टैग को संपादित करें
आपको छवि से संबंधित 'विकल्प नाम और विकल्प मान' निर्दिष्ट करने के लिए alt टैग को संपादित करना होगा:
- छवि पर माउस घुमाएं और छवि की जानकारी खोलने के लिए छह-बिंदु वाले बटन पर क्लिक करें
- Alt टेक्स्ट बॉक्स में, अपने विकल्प के नाम का उपयोग करके अपना Alt टेक्स्ट लिखें जिसे आपने विकल्प मान के साथ संयोजित किया है। यहाँ वाक्यविन्यास बहुत महत्वपूर्ण है और इसे निम्नलिखित क्रम में होना चाहिए:
#
(हैशटैग वर्ण)
option-name
(लोअरकेस, सभी रिक्त स्थानों को हाइफ़न से बदलें)
_
(अंडरस्कोर वर्ण)option-value
(लोअरकेस, सभी रिक्त स्थानों को हाइफ़न से बदलें)
उदाहरण के लिए, यदि मैं रंग विकल्प चुनता हूं और मैं किसी छवि को काले रंग से जोड़ना चाहता हूं, तो वैकल्पिक पाठ
#color_black
होना चाहिए
टिप्पणियाँ:
Be Yours संस्करण 7.2.0 से, हम अपने बहुविकल्पीय छवि सुविधा में एकाधिक भाषाओं का समर्थन करते हैं ।
अंग्रेजी और फ्रेंच के लिए नीचे दिए गए इस उदाहरण पर नज़र डालें। विकल्प का नाम अंग्रेजी में 'Color' और फ्रेंच में 'Couleur' है, विकल्प का मान अंग्रेजी में 'Black' और फ्रेंच में 'Noire' है।
उस छवि पर क्लिक करने के बाद जिसमें आप ALT टेक्स्ट जोड़ना चाहते हैं, ALT टेक्स्ट सेट करें:
#en:color_black,fr:couleur_noire
इसे करने का तरीका इस प्रकार है:
- भाषा कोड शामिल करें : प्रत्येक रंग के नाम से पहले भाषा कोड और उसके बाद कोलन (:) जोड़ें।
- प्रत्येक भाषा युग्म को अल्पविराम से अलग करें: प्रत्येक भाषा युग्म को अल्पविराम (,) से अलग करें। यह एक भाषा युग्म के अंत और अगले के आरंभ को इंगित करेगा।
- परिवर्तनों को सहेजने के लिए सहेजें पर क्लिक करें
- अन्य छवियों के लिए भी यही प्रक्रिया अपनाएँ
अपना स्वयं का alt text सेट करें (या रखें)
अगर मैं SEO उद्देश्यों के लिए अपना खुद का alt सेट करना चाहता हूँ (या रखना चाहता हूँ) तो क्या होगा? बस # वर्ण से पहले alt फ़ील्ड में कुछ भी जोड़ें , जैसे:
हम जानते हैं कि अधिकांश ग्राहक SEO के बारे में चिंतित हैं और आप उपरोक्त निर्देशों के अनुसार सभी छवियों में alt टैग जोड़कर अपनी SEO दक्षता में सुधार कर पाएंगे।
SEO: AVADA द्वारा इमेज ऑप्टिमाइज़र पेज स्पीड इमेज SEO के लिए एक अत्यधिक अनुशंसित ऐप है जो आपको खोज परिणामों में अपने प्रतिस्पर्धियों को पछाड़ने में मदद करता है। यह ऐप ऑटोमेशन के साथ आसानी से आपके SEO का लाभ उठाता है:
- छवि ALT/ मेटा टैग/ JSON-LD को Google-Search-अनुकूल बनाने के लिए अनुकूलित करना।
- अपनी वेबसाइट की गति बढ़ाने के लिए गुणवत्ता हानि के बिना छवि आकार को अनुकूलित करना।
>> SEO: इमेज ऑप्टिमाइज़र पेज स्पीड के बारे में आज ही अधिक जानें!
* छवियों का उपयोग केवल गैर-वाणिज्यिक उत्पाद प्रदर्शन उद्देश्यों के लिए किया जाता है, और इनका उपयोग केवल Be Yours थीम अनुदेश दस्तावेज़ में करने के लिए किया जाता है।
आगे सहायता की आवश्यकता है
यदि आपको अपनी Be Yours थीम के संबंध में कोई समस्या आती है या अतिरिक्त सहायता की आवश्यकता होती है, तो विशेषज्ञ मार्गदर्शन के लिए Roartheme की सहायता टीम से संपर्क करने में संकोच न करें।
RoarTheme के व्हाट्सएप के माध्यम से 8 घंटे के भीतर सहायता प्राप्त करने के लिए QR कोड को स्कैन करें
शेयर करना:
Be Yours 7.1.0 या बाद के संस्करण में कलर स्वैच कैसे सेट करें
गतिशील स्रोतों और मेटाफ़ील्ड का उपयोग करके अपने अनुकूलन का लाभ उठाएं