Coisa de Motos

चैनल के फ़ैन होते हैं। स्टोर को ऐसा ब्रांड चाहिए जिस पर लोग अपने पैसे का भरोसा करें।

Coisa de Motos ख़रीदने लायक़ कुछ बनने से पहले एक नाम, एक आवाज़ और एक कम्युनिटी था। इसे स्टोर में बदलने का मतलब था उस आवाज़ को बनाए रखना, ज़ोरदार, मज़ेदार और पूरी तरह सड़क से जुड़ी, और साथ ही इतना भरोसेमंद दिखना कि कोई यहाँ से R$2,000 की जैकेट ख़रीदे।

इसे फैलना भी था। वही पहचान मर्च पर, ब्रेक डिस्क और वाइज़र से भरी साइट पर, और स्टोरी और थंबनेल की साप्ताहिक लय पर दिखनी थी, जल्दी बनी और हमेशा पहचानी जाने वाली।

Shopify पर बना

हमने पूरा स्टोर Shopify पर बनाया और प्लेटफ़ॉर्म के इर्द-गिर्द कुछ बनाने के बजाय उसका जितना हो सका इस्तेमाल किया: ब्रांड के हिसाब से कस्टमाइज़ की गई थीम, कलेक्शन और वेरिएंट वाला कैटलॉग, सर्च और फ़िल्टर, चेकआउट और पेमेंट, MOTONAUTA जैसे डिस्काउंट कोड, ब्लॉग, और बाक़ी के लिए ऐप।

प्लेटफ़ॉर्म पर भरोसा करने से दो लोगों की टीम बिना सर्वर चलाए सैकड़ों पार्ट्स बेच पाई, और हमारा समय उस चीज़ के लिए बचा जो स्टोर को अलग बनाती है: वह कैसा दिखता है, कैसे व्यवस्थित है और क्या कहता है।

स्टोर राइडिंग गियर, कपड़े और सैकड़ों पार्ट्स बेचता है, इसलिए डिज़ाइन का ज़्यादातर काम चीज़ें ढूँढने के बारे में था। हेडर में एक बड़ा सर्च बार है, और एक मेगा मेन्यू पार्ट्स को सिस्टम के हिसाब से बाँटता है: मैकेनिक्स, ब्रेक, इलेक्ट्रिकल और बाक़ी।

ChatGPT के साथ कोड किया

Shopify थीम कस्टमाइज़ करने का मतलब है Liquid लिखना, Shopify की अपनी टेम्पलेट भाषा, HTML, CSS और JavaScript के साथ मिली हुई। हमारी थीम का कोड मैंने ChatGPT के साथ लिखा। मैं जो बदलाव चाहता था वह बताता, उसका दिया कोड Shopify के थीम एडिटर में पेस्ट करता, और देखता कि क्या होता है। जब कुछ टूटता, तो मैं कोड Shopify से वापस कॉपी करके बग के साथ ChatGPT को भेजता, जब तक वह चल न जाए।

AI कोडिंग तब शुरुआती दौर में थी, और जिस थीम एडिटर में मैं काम करता था उसमें इसका कुछ भी नहीं था। दो टैब के बीच कॉपी-पेस्ट था, लेकिन तब भी चीज़ें बनाने का मेरा तरीक़ा यही था।

ChatGPT

ऊपर एक बार जोड़ो जो पहली बार ख़रीदने वालों को MOTONAUTA से 5% छूट दे

{% if customer == blank %}
  <div class="promo-bar">
    5% off your first order:
    MOTONAUTA
  </div>
{% endif %}

Copy the code

बग वापस पेस्ट करो

Shopify · कोड एडिट करें

header.liquidtheme.liquid

1{% if customer == blank %}
2  <div class="promo-bar">
3    5% off your first order:
4    MOTONAUTA
5  </div>
6{% endif %}

एक स्टोरफ़्रंट जो बेचता है

होम पेज हफ़्ते के ऑफ़र से खुलता है, फिर वे कैटेगरी जो राइडर्स सबसे ज़्यादा ख़रीदते हैं: हेलमेट, जैकेट, ग्लव्स, बूट और पार्ट्स। ऊपर की एक पतली पट्टी हर पहली बार ख़रीदने वाले को कूपन MOTONAUTA से 5% छूट देती है, कम्युनिटी के अपने शब्द में, और अकाउंट उनका स्वागत “Salve, motonauta!” से करता है।

पार्ट्स, सिस्टम के हिसाब से

कैटेगरी एक मेगा मेन्यू में खुलती हैं जो वैसे ग्रुप की गई हैं जैसे एक मैकेनिक सोचता है, ताकि ब्रेक पैड ढूँढने वाले को कभी एग्ज़ॉस्ट से होकर स्क्रॉल न करना पड़े।

Coisa de Motos

फ़ोन के लिए बना

राइडर्स स्टोर तक Instagram और YouTube से पहुँचते हैं, अपने फ़ोन पर, इसलिए हर स्क्रीन जितनी डेस्कटॉप के लिए डिज़ाइन की गई, उतनी ही फ़ोन के लिए भी। हमने इस रास्ते को ख़रीदने की छह-स्टेप गाइड में भी बदला, होम पेज से चेकआउट तक, उन लोगों के लिए जिन्होंने कभी ऑनलाइन गियर नहीं ख़रीदा था।

1. 

   1 · साइट खोलें

2. 

   2 · एक कैटेगरी चुनें

3. 

   3 · जो दिख रहा है उसे सॉर्ट करें

4. 

   4 · प्रोडक्ट खोलें

5. 

   5 · डिटेल देखें

6. 

   6 · चेकआउट करें

ब्रांड की आवाज़ में प्रमोशन

साइट के हर कैंपेन को उसी सिस्टम में अपना बैनर मिलता है: हर चीज़ पर फ़्री शिपिंग, पाँच हेलमेट मॉडल पर Texx की 25वीं सालगिरह, 4Ride Motorcycle के साथ Festival Interlagos 2025 के टिकटों का गिवअवे, कूपन कोड, महिलाओं के कपड़ों की एक लाइन और रिटर्न पॉलिसी।

कंटेंट जो लोगों को लाता है

ब्लॉग चैनल के वीडियो को लेखों में बदलता है, “क्या हेलमेट एक्सपायर होता है?”, ताकि सर्च और YouTube दोनों वापस स्टोर तक ले जाएँ।

Coisa de Motos

सिंबल

सिंबल बगल से दिखता एक हेलमेट है, जिसका वाइज़र तीन स्ट्रोक में कटा है जो रफ़्तार जैसे लगते हैं, और चलते हुए राइडर के अक्षर E जैसे भी। छोटे साइज़ और स्टैम्प के लिए यह भरा हुआ इस्तेमाल होता है, और बड़े, खुले स्पेस के लिए आउटलाइन में, नारंगी, काले या सफ़ेद रंग में।

वर्डमार्क

वर्डमार्क और हर हेडलाइन Evil Empire में है, एक भारी कंडेंस्ड डिस्प्ले फ़ॉन्ट जिसमें गैराज के साइनबोर्ड वाला एहसास है, और COISA और MOTOS के बीच एक छोटा-सा “de” दबा है। राइडर वैसे भी नाम को इन्हीं दो बड़े शब्दों में छोटा कर देते हैं। स्टोर पर इंटरफ़ेस Inter में चलता है, ताकि ज़ोरदार हेडलाइन के नीचे क़ीमतें और साइज़ आसानी से पढ़े जा सकें।

वृत्तों पर बनी एक सील

सील एक ही केंद्र के चारों ओर बने वृत्तों पर टिकी है: अक्षर R, यानी बाहरी त्रिज्या, और 0.75R के बीच की पट्टी पर चलते हैं; “desde 2020” नीचे अपने छोटे चाप पर बैठा है; और हेलमेट, R से थोड़ा ऊँचा, केंद्र से थोड़ा दाईं ओर है ताकि वाइज़र आगे की ओर इशारा करे, जैसे कोई राइडर मोड़ पर झुकता है।

लॉकअप

ये टुकड़े मिलकर चार लॉकअप बनाते हैं: हेडर के लिए हॉरिज़ॉन्टल, चौकोर जगहों के लिए वर्टिकल और एक दूसरा वर्टिकल, और एक गोल सील, जिसके चाप पर “desde 2020” है, जो प्रोफ़ाइल फ़ोटो, स्टिकर और पैच तीनों का काम करती है। हर एक का चैनल के लिए एक YouTube वर्ज़न भी है।

हॉरिज़ॉन्टल

वर्टिकल

गोल सील

Colour

One loud colour and a few quiet ones, all saved as styles in the Figma file. Laranja is the brand: it's the symbol, the buttons, the sale bars. Near-black and white carry everything else, so the orange always means something.

Motonauta, मैस्कट

ब्रांड को एक ऐसा चेहरा चाहिए था जो कोई इंसान न हो, तो उसे मिला Motonauta: काले हेलमेट और Texx जैकेट में एक राइडर जो पूरी कम्युनिटी का प्रतिनिधि है। वह कूपन थामता है, थम्स अप देता है, हेलमेट साइज़ के लिए अपना सिर नापता है। ये पोज़ AI इमेज टूल से बनाए गए और चुनकर एक जैसे दिखने वाले किरदार में ढाले गए।

3D ऑफ़र आइकन

ऑफ़र के लिए ब्रांड के नारंगी रंग में 3D चीज़ों का एक सेट है: कूपन, प्रतिशत, गिफ़्ट, नारंगी और काले गुब्बारे, एक प्रश्नचिह्न, एक कार्ट, एक कैमरा और एक सितारा। ये बैनर और ऐड में प्रोडक्ट्स के चारों ओर तैरते हैं। इन्हें धक्का दें, या किसी एक को खींचकर छोड़ दें।

लोगों पर

ब्रांड को सबसे पहले लोगों पर काम करना था। सिंबल छाती पर छोटा और पीठ पर बड़ा है, और गोल सील एक कैप पर और उस बॉक्स पर भी आती है जिसमें ऑर्डर भेजा जाता है।

इस आकार का स्टोर पोस्ट की एक स्थिर लय पर चलता है, इसलिए ब्रांड को एक-बार वाले डिज़ाइन से ज़्यादा टेम्पलेट चाहिए थे: हर सीरीज़ का एक लुक, जल्दी भरने वाला और किसी और से कभी न मिलने वाला।

लॉन्च

स्टोर एक टीज़र सीरीज़ के साथ खुला, “E-commerce Coisa de Motos, lançamento em breve”: प्रोडक्ट, Motonauta और ख़ुद Daniel, एक बार में एक पोस्ट, जब तक साइट लाइव नहीं हो गई। महीनों बाद उसी सिस्टम ने Instagram पर 2,000 फ़ॉलोअर्स का जश्न मनाया।

Instagram

9:41100%

coisademotos

312posts2.148seguidores186seguindo

Coisa de Motos

Maior e-commerce para motos do Brasil! 🏍️

Encontre tudo o que sua moto precisa.

coisademotos.com.br

SeguirMensagem

Sobre nósMedidasFAQVídeosLojaClientesOfertasCuponsComo comprarMoto criadoresMototripsManutenções

Instagram is the store's shop window, so the profile was designed as a whole, not post by post. The avatar is the round seal, and the highlights work like a menu: twelve covers, an orange icon on asphalt each, for sizes, FAQ, videos, the store, customers, offers, coupons, how to buy, the creators, trips and maintenance, with “Sobre nós” in full orange first.

The feed mixes three kinds of posts, each with its own template: product posts filmed with the gear itself, with a small “watch it on YouTube” tag, offers on the orange or black grounds of the ads, and moments like the 2,000-follower thank-you. Reels get covers in the same type, so the grid reads as one brand from a distance.

• प्रोडक्ट पोस्ट

  असली गियर पर असली हाथ, पूरे वीडियो से टैग किए हुए

• ऑफ़र

  ऐड के बैकग्राउंड पर कूपन और लॉन्च

• रील कवर

  फ़्रेम पर बड़े Evil Empire अक्षर

• हाइलाइट्स

  कवर का एक मेन्यू: हर एक में डामर पर एक नारंगी आइकन

ऐड

ऐड और थंबनेल ब्रांड को और आगे ले जाते हैं: नारंगी पूरा बैकग्राउंड बन जाता है, प्रोडक्ट व्यक्ति के चारों ओर 3D में तैरते हैं, और अक्षर उतने बड़े हो जाते हैं जितना फ़्रेम इजाज़त दे।

YouTube

YouTube पर चैनल वही सिस्टम रखता है: सील वाला एक बैनर, और तीन सौ से ज़्यादा थंबनेल उन्हीं भारी अक्षरों और नारंगी पट्टियों के साथ, ट्रिप, रिव्यू, इंस्टॉलेशन और कम्युनिटी के सवालों के लिए।