חנות תלת מימד שקלוד בונה לכם מתמונות ומחירים

מה זה חנות תלת מימד מקלוד?

רוב החנויות באינטרנט נראות אותו דבר: רשת של ריבועים עם תמונה ומחיר. זה עובד, אבל זה לא נותן ללקוח שום תחושה של מקום.

חנות תלת מימד היא עמוד אחד שבו הלקוח עומד בתוך חדר. יש רצפה, קירות, מדפים ותאורה, והמוצרים שלכם מוצגים עליהם. הוא גורר עם העכבר או עם האצבע ומסתובב, ולוחץ על מוצר כדי לראות פרטים.

את כל זה קלוד כותב בקוד, עם Three.js, ספרייה חינמית בקוד פתוח לתלת מימד בדפדפן. היא משמשת אתרים של מותגים גדולים ומשחקים קטנים, והיא רצה בכל דפדפן מודרני, גם בטלפון.

מה צריך להכין לפני שמתחילים?

וגם לא צריך להיות טכנולוגי בשביל זה, כי קלוד כותב את כל הקוד. מה שאתם מביאים זה את החומרים של העסק:

• תמונות מוצר. שלוש עד עשר תמונות, רצוי על רקע נקי. תמונות מהאתר הקיים מספיקות.
• שם ומחיר לכל מוצר. ומשפט תיאור קצר, כמו שהייתם כותבים בחנות.
• לינק לקנייה. הלינק של המוצר בחנות הקיימת, בווקומרס, בשופיפיי או בדף תשלום. הכפתור בחנות התלת מימד פשוט מוביל לשם.
• סגנון. שתי מילים על האווירה: בוטיק חם, גלריה לבנה, חנות צעצועים צבעונית.

זה הכל. אין צורך במעצב תלת מימד ולא במודלים מיוחדים, כי התמונות שלכם מוצגות כמו פוסטרים ממוסגרים בתוך החדר.

הפרומפט לחנות תלת מימד, מוכן להעתקה

מעלים את התמונות לשיחה חדשה בקלוד, מדביקים את הפרומפט, וממלאים את מה שבסוגריים המרובעים. סדר המוצרים ברשימה צריך להיות כמו סדר התמונות.

העתקהבנה לי חנות תלת-ממדית אינטראקטיבית בקובץ HTML אחד, עם Three.js.

החנות: [שם העסק], [מה אתם מוכרים, במשפט אחד].
הסגנון: [למשל: בוטיק חם עם עץ ותאורה רכה / גלריה לבנה ונקייה].
צבע מותג: [קוד צבע, למשל #28d4c0].

המוצרים (צירפתי תמונות לפי הסדר):
1. [שם מוצר] · [מחיר בש"ח] · [משפט תיאור] · [לינק לקנייה]
2. [שם מוצר] · [מחיר] · [תיאור] · [לינק]
3. [שם מוצר] · [מחיר] · [תיאור] · [לינק]
(אפשר להוסיף עוד שורות באותו פורמט)

מה החנות צריכה לכלול:
- חדר אחד עם רצפה, קירות, מדפים ותאורה (אור כללי רך + פנסים מכוונים על המוצרים).
- כל מוצר מוצג כתמונה ממוסגרת על מעמד או על המדף, עם התמונה שצירפתי כטקסטורה.
- לחיצה על מוצר פותחת כרטיס בעברית, מימין לשמאל: שם, מחיר, תיאור וכפתור "לקנייה" שפותח את הלינק בלשונית חדשה.
- סיבוב החדר בגרירה עם העכבר, ובטלפון עם האצבע. זום בצביטה ובגלגלת, עם גבולות כדי שאי אפשר יהיה לצאת מהחדר.
- אנימציה עדינה כשהעכבר עובר על מוצר (הגדלה קלה או הארה).
- כותרת עם שם החנות למעלה, ושורת הסבר קטנה: "גררו כדי להסתובב, לחצו על מוצר".
- טעינה מהירה: בלי מודלים כבדים, רק צורות פשוטות ותמונות.
- עבודה טובה גם בטלפון (מסך 390 פיקסלים) וגם במחשב.

בסוף:
- תציג לי את החנות כארטיפקט כדי שאוכל לנסות אותה מיד.
- תסביר לי בשלוש שורות איך מחליפים מוצר, מחיר או תמונה.
- תשאל אותי אם לשנות משהו לפני שאני מעלה את זה לאתר.

החנות הראשונה כמעט אף פעם לא מושלמת, וזה בסדר. כותבים לקלוד מה לשנות במשפט רגיל: "תגדיל את המוצרים", "תוסיף מדף שני", "התאורה חזקה מדי". כל תיקון לוקח כמה שניות.

לאילו עסקים חנות תלת מימד מתאימה?

חנות כזאת עובדת הכי טוב כשיש למוצר משהו לראות, ולקהל יש סבלנות להסתובב. כמה כיוונים שעובדים:

• מותגי אופנה ותכשיטים: חלון ראווה לקולקציה חדשה, עם תאורה שמדגישה כל פריט.
• גלריות ואמנים: חדר תצוגה עם עבודות על הקירות, וכל עבודה נפתחת עם מחיר ולינק לרכישה.
• חנויות מתנות ועיצוב: מדפים עם מוצרים, כמו לעבור בין מדפים בחנות אמיתית.
• השקות מוצר: עמוד אחד לקמפיין, שהלקוחות משתפים כי הוא שונה ממה שהם רגילים לראות.

פחות מתאים: חנות עם מאות מוצרים, או קהל שרוצה למצוא מוצר מהר ולקנות. שם הרשת הרגילה עם חיפוש וסינון עדיין מנצחת. הגישה הנכונה היא לבחור 6 עד 12 מוצרים חזקים לחלון הראווה, ולהשאיר את השאר בחנות הרגילה.

איך מעלים את החנות לאתר שלכם?

החנות היא קובץ HTML אחד, ולכן יש כמה דרכים פשוטות להעלות אותה:

• עמוד נפרד באתר. מורידים את הקובץ מהארטיפקט ומעלים אותו כעמוד, למשל /showroom. אם יש לכם קלוד קוד, הוא יכול לעשות את זה ישר בקוד של האתר.
• הטמעה בעמוד קיים. בוורדפרס, וויקס או שופיפיי אפשר להטמיע את העמוד בתוך בלוק HTML או iframe. כדאי לבקש מקלוד את קוד ההטמעה המדויק לפלטפורמה שלכם.
• שיתוף ישיר. לפני שמחליטים, אפשר לשתף את הארטיפקט בלינק עם כמה לקוחות קבועים ולשמוע מה הם חושבים.

שימו לב שהתמונות צריכות להיות זמינות גם אחרי ההעלאה. הדרך הבטוחה היא לבקש מקלוד לשמור אותן בתיקייה אחת ליד הקובץ, או להשתמש בקישורים לתמונות שכבר נמצאות באתר.

מה חשוב לדעת לפני שמתחילים?

• זה לא תלת מימד אמיתי של המוצר. התמונות מוצגות כמו פוסטרים או קופסאות בתוך החדר. לסובב את המוצר עצמו מכל הצדדים צריך מודל תלת מימד, וזה כבר פרויקט אחר.
• הקופה נשארת שלכם. החנות לא גובה כסף. כפתור הקנייה מוביל לדף התשלום הקיים שלכם.
• מהירות טעינה. תמונות כבדות מאטות את החנות, במיוחד בטלפון. כדאי להקטין אותן לפני ההעלאה, או לבקש מקלוד להזכיר לכם.
• נגישות וחיפוש בגוגל. חנות תלת מימד היא חוויה, לא תחליף לעמודי מוצר רגילים. תשאירו את החנות הרגילה, ותוסיפו את התלת מימד כחלון ראווה.
• עלות. Three.js חינמי, וארטיפקטים זמינים גם בחשבון קלוד חינמי. במנוי בתשלום תקבלו יותר הודעות לתיקונים.