Rebuild the Soft Lane look in Wix

0. What this kit is — and is not

This is a design kit, not a one-click template. Wix has no way to import a site or a theme from a file: a Wix template only exists inside a Wix account, and it is shared from there (Wix template marketplace, Wix Studio “custom templates”, or a site-transfer link). Even the Wix Studio “Download shareable file” option is a ZIP that contains a link to a template hosted in the creator’s Wix account, not the design itself.

So instead of a template, this kit gives you a pixel-accurate preview to copy from, this guide with every value, the photos, and the code for the features Wix does not have built in (the WhatsApp buttons). You build the site once in your own Wix account; after that you edit everything in the Wix Editor like any Wix site, with no code.

1. Before you start

1. Create (or open) your Wix site. Start from a blank template: in the Wix Editor choose “Start from blank”, or in Wix Studio “Blank canvas”. Any Wix plan works for building; to accept payments Wix requires a Premium plan that includes eCommerce.
2. Add the Wix Stores app (Add › Store, or Add Apps › Wix Stores). This creates the Shop, Product, Cart and Thank-you pages.
3. Open Media (Wix Editor: My Uploads / Studio: Media) and upload every photo from the kit’s images/ folder, including whatsapp-button.svg.
4. Fonts: Wix includes Bodoni Moda (Light and Semi Bold). For the exact look, download the free fonts Bodoni Moda (Medium), Jost, El Messiri and Tajawal from fonts.google.com, then in any text box: Edit Text › Fonts › Upload Fonts. All four use the SIL Open Font License, so you may upload them. (The .woff2 files inside preview/assets/fonts are cut into subsets for the preview — use the full downloads for Wix.)
5. Keep preview/en/index.html open in a browser next to the editor. The pages are responsive: make the browser narrow to see the phone layout.

2. Colors, fonts and spacing

Site colors

Wix Editor: Site Design › Colors › Custom (or “Theme” in newer editors). Wix Studio: Site Styles › Colors. Put the background, text and accent colors in the palette so every new element uses them.

Text styles

Wix Editor: Site Design › Text (Heading 1–6, Paragraph 1–3). Wix Studio: Site Styles › Typography. Set them once, then just pick “Heading 2” etc. Letter spacing in Wix is set in “Character spacing” (use the em values below).

Buttons

Spacing and shapes

3. Header

1. Announcement bar: inside the header add a full-width strip (Studio: a header row) 33 px high, fill #B8955A. Centered text 13 px white: “Free shipping on orders over $150”.
2. Main row 88 px high, background #111111 (94 % opacity if you like the glass effect), bottom line 1 px #2C2B29. Three areas: menu left, logo center, actions right.
3. Menu: Add › Menu › Horizontal menu. Items: Shop, Collections, About, Journal. Font Jost 14 px, spacing 32 px, no background; hover/current color #B8955A.
4. Logo: a text “SOFT LANE” in Bodoni Moda 30 px, uppercase, character spacing 0.12, and under it “LIGHT CASUAL WEAR” Jost 9.5 px, spacing 0.32, color #9A958D. Or upload your own logo image (max 54 px high).
5. Actions: Wix Multilingual Language Menu (globe + EN), Wix Site Search bar or icon, Wix Members Login Bar (Account) and the Wix Stores Cart Icon. Text 14 px, icons 20 px, 22 px apart.
6. Make the header sticky: Wix Editor: select the header › Settings › Scroll effect “Freeze”; Wix Studio: select the header › scroll behavior “Sticky”.

4. Homepage, section by section

Add these sections (Wix Editor: strips; Wix Studio: sections) in this exact order. Background of the page: #111111.

4.1 Hero

1. Full-width strip, height about 640 px (min 460 px), model photo hero-model.jpg on the right 58 %, focal point 62 % from the left.
2. For the soft fade behind the text, add a box on the left half with a gradient fill from #111111 at 88 % opacity to fully transparent (Wix Editor: Box › Fill › Gradient; Wix Studio: Fill › Gradient). Or simply use a light photo.
3. Text block max 470 px wide, vertically centered, aligned with the page content: title (hero style), text 18 px #CFCAC2 max 380 px wide, 32 px space, then a Primary button “Shop new” with an arrow icon, linked to the Shop page.

4.2 Benefits row

1. White strip, bottom line 1 px #2C2B29. Three equal columns, 30 px padding top/bottom, 1 px vertical line #2C2B29 between them.
2. Each: a 34 px line icon (leaf, tree, heart — Wix: Add › Decorative › Line icons or upload your own SVG), then a title Jost 15 px semi-bold and a text 14 px #9A958D.

4.3 Shop by category

1. Section title “Shop by category” (Heading 2) on the left and a link “View all →” 14 px on the right, 32 px above the cards.
2. Four images (ratio 4:5, radius 10 px, gap 20 px): oversized-hoodie.jpg, cargo-pants.jpg, essential-jogger.jpg, premium-sneakers.jpg. Link each to its category page (Wix Stores categories “Hoodies”, “Cargo Pants”, “Joggers”, “Sneakers”).
3. On each image, a white pill (radius 999 px, padding 10 × 16 px, 18 px from the bottom-left) with the category name 14 px and an arrow.
4. Mobile: make it a horizontal slider (Wix Studio: Layout › Slider / Wix Editor: use a Slideshow or stack the cards).

4.4 New arrivals

1. Title “New arrivals” + link “Shop all →” to the Shop page.
2. Add › Store › Grid Gallery (or “Product Gallery”), connected to the collection “All Products”, 4 products, 4 per row, gap 20 px.
3. Gallery settings › Design: image ratio 4:3, crop to fill; card background #151515, border 1 px #2C2B29, radius 6 px; product name Jost 15 px medium #ECE8E1, price 14 px; text left-aligned; hide “Add to cart” and “Quick view” buttons for the calm look. Enable the wishlist heart if you use Wix Wishlist.

4.5 Story

1. Strip with background #1B1B1B, padding 88 px. Two columns 1.1 : 1, gap 64 px.
2. Left: lookbook-street.jpg, ratio 4:3, radius 10 px. Right: Heading 2 “Built in the dark. Worn in the light.”, text 16 px #9A958D (max 460 px), Outline button “View the lookbook” linked to the About page.

4.6 From the journal (optional)

1. Add the Wix Blog app, write (or paste) the three demo posts from section 14, then Add › Blog › Recent Posts, 3 per row.
2. Design: image ratio 4:3, radius 10 px, no card background, category 12 px uppercase #9A958D, title Bodoni Moda 26 px, excerpt 14 px #9A958D.

5. Shop page

1. Open the Wix Stores Shop Page (or Category Page in newer stores). Above the product widget add the pills row: buttons “Hoodies”, “Cargo Pants”, “Joggers”, “Sneakers” (Pill style) linked to the categories, and “View all” on the right.
2. Title “PRODUCTS CATALOG” (Bodoni Moda 36 px, uppercase, spacing 0.03) and subtitle 14 px #9A958D.
3. Product widget settings: 4 per row (2 on mobile), gap 20 px, same card design as the homepage gallery. Turn on Sort and Filters (price, category) — Wix shows them in its own style; set their text color to #ECE8E1 and accent to #B8955A.

6. Product page

1. Pages › Store Pages › Product Page. Settings › Layout: the layout with the gallery on the left and details on the right (“Classic” in the classic product page). Gallery: square images, thumbnails below.
2. Design: title Bodoni Moda 44 px; price Jost 18 px semi-bold; description 14 px #CFCAC2; options as square buttons (“Size: S / M / L / XL”); quantity box; Add to cart button full width, 48 px, fill #B8955A, uppercase 14 px spacing 0.12. Turn off “Buy now” unless you want it.
3. Under the widget add the Order on WhatsApp button (ID yamshiWaOrder, section 12) and a small text list with three benefits: “Free shipping over $150 · 30-day returns · Heavyweight cotton, made in small runs” (13.5 px, line icons 18 px).
4. Product “Info sections” (Wix Stores dashboard › product › Additional info): add Details and Care & Materials. They show as the collapsible sections of the design.
5. “You may also like”: Add › Store › Related Products (title Heading 2, 4 per row).

7. Cart page

The Wix Stores Cart Page already has this layout. In its Settings › Design use: background #111111, card/borders #2C2B29, titles Bodoni Moda, text Jost #ECE8E1, buttons #B8955A with white text and 4 px radius. Add the page title “Your cart” above it (Heading 1, 52 px).

8. About page

1. Centered Heading 1 “About” and subtitle 16 px #9A958D (max 760 px).
2. Wide image lookbook-street.jpg (max 1100 px, ratio 16:7, radius 10 px), 48 px space.
3. A 760 px column: the paragraphs and the headings “Honest materials”, “Made slowly”, “Made for modern living” with lookbook-street.jpg and oversized-hoodie-detail.jpg in between (texts in section 14, line height 1.75, 16.5 px).

9. Footer and credit

1. Footer background #1B1B1B, top line 1 px #2C2B29, padding 72 px top. Four columns 1.5 : 1 : 1 : 1.3, gap 48 px.
2. Column 1: logo (as in the header), text 14 px #9A958D, then round social icons 38 px (Add › Social › Social Bar: white circles with a 1 px #2C2B29 border).
3. Columns 2–3: titles 12 px semi-bold uppercase spacing 0.16 (“SHOP”, “COMPANY”); links 14 px #9A958D, 10 px apart.
4. Column 4: “STAY IN TOUCH”, text, then a Wix Forms Subscribe form (email field + button #B8955A).
5. Bottom row (1 px line above, 22 px padding, 13 px #9A958D): left “© 2026 Soft Lane. All rights reserved.” (ID yamshiCopyright to update the year automatically), right “Theme developed by Yamshi” with “Yamshi” linked to https://yamshi.app (ID yamshiCredit). See velo/footer-credit.html.

10. Mobile and the bottom app bar

1. Wix Editor: switch to the mobile editor (phone icon at the top). Wix Studio: use the mobile breakpoint. Hide the desktop menu and show the hamburger menu on the left, logo centered (19 px), cart on the right; move the announcement bar under the header.
2. Sections: benefits stacked, products 2 per row (gap 12 px), section padding 56 px, category cards as a slider, footer columns 2 per row.
3. Bottom bar: add a white box 64 px high with a 1 px top line #2C2B29 and four icon+label buttons: Home, Shop, Cart, Account (labels are normal text, so you can rename them; 11 px). Wix Editor: in the mobile editor make it mobile-only, right-click › Pin to Screen › bottom center, and set it to show on all pages. Wix Studio: pinned elements apply per page, so pin it on each main page (Home, Shop, Product, Cart), or put it in the footer.
4. Move the WhatsApp button 14 px above the bottom bar on mobile (50 × 50 px).

11. Arabic and French

1. Add the Wix Multilingual app. Main language English; add Arabic and French.
2. Open the Translation Manager, auto-translate, then replace the texts with the ones in section 14 (they are the official Yamshi translations).
3. Arabic is right-to-left: Wix aligns translated text to the right automatically. Check each text box (Edit Translation › alignment / direction icons). For the hero, use a mirrored photo (Wix Photo Studio › Flip) so the calm side is on the right.
4. Wix cannot move elements per language. For the few blocks that must be mirrored (hero text block, story layout), the Wix-recommended way is a Multi-State Box with states “LTR” and “RTL” switched by language (Wix Help Center: “Using Multi-State Boxes to Switch From LTR to RTL”).
5. Arabic fonts: in the font menu choose “Add language › Arabic”, or upload El Messiri (titles) and Tajawal (text) as in step 1.
6. The Velo code in this kit already speaks English, Arabic and French: it reads the visitor’s language from Wix Multilingual.

12. Velo code — WhatsApp buttons, year and credit

Wix has no built-in “Order on WhatsApp” button with the product name, so the kit includes small, ready-to-paste Velo code. Velo is free on every Wix site.

12.1 Turn on code

1. Wix Editor: top bar › Dev Mode › Turn on Dev Mode. Wix Studio: left bar › Code ({ } icon) › Start coding.
2. In the Code panel, under Public & Backend › Public, add a file named yamshi-settings.js and paste velo/public/yamshi-settings.js. Add yamshi-whatsapp.js and yamshi-license.js the same way.
3. Open Page Code › masterPage.js (called “Global” in some versions), delete what is there and paste velo/pages/masterPage.js.
4. Go to the Product Page (Store Pages). Its code tab opens at the bottom: paste velo/pages/product-page.js.
5. In yamshi-settings.js type your WhatsApp number with country code, e.g. number: '212600000000',. Change the messages or button text if you want.

12.2 Create the elements and give them these IDs

Select an element, open its Properties panel (Wix Editor: Dev Mode panel on the right; Wix Studio: Code panel › Properties & Events) and type the ID exactly (without #).

1. Floating button — Wix Editor: add the image whatsapp-button.svg (or a round green Button), right-click › Pin to Screen › bottom right (or bottom left), offset 24 px; right-click › Show on All Pages. Wix Studio: place it in the Header (the only global area for single elements), docked bottom-right with 24 px margins, and keep the header sticky. Properties › tick Hidden on load.
2. Left or right: simply place it bottom-left or bottom-right. Hide it: set floatingButton: false. Message: change message.
3. Product button: Button under the Product Page widget, ID yamshiWaOrder. The code writes its label in the visitor’s language and opens WhatsApp with “Hello! I would like to order: product name — page link”. Hide it with productButton: false.
4. Click Preview, open a product, click the button: WhatsApp opens with the product name and link. Then Publish.

12.4 Free activation (same as the WordPress theme)

1. The kit is free and is renewed for free every 30 days, like the Yamshi WordPress theme and the other Yamshi themes. The first 30 days start by themselves the first time your published site opens.
2. After 30 days you get 15 more days: the site stays open for everyone, and only you see the reminder (in Preview, or in your browser after opening your site once with ?yamshi_owner=1 at the end of the address). Visitors never see it.
3. Click Activate for free: yamshi.app opens in a new tab, wait 10 seconds, done — 30 more days. No account, no payment, no card.
4. If it is not renewed after the 15 days, visitors see “Store temporarily unavailable” until you activate again. If yamshi.app cannot be reached, your site stays open.
5. The footer line “Theme developed by Yamshi” (yamshiCredit) is part of the free kit: if it is deleted or cannot be shown, the site closes to visitors and the WhatsApp buttons stop. Put it back and publish to reopen.

12.3 What the code uses

$w (to find the elements and set link, target, label), the Product Page element’s getProduct() (product name), wix-location-frontend (url, the product link), wix-window-frontend (multilingual.currentLanguage) and, only as a fallback, wix-seo-frontend (page title). The wix-stores-frontend module no longer exposes the “current product”, which is why the product is read from the page widget.

// Yamshi Wix Kit — "Order on WhatsApp" button on the Wix Stores product page.
// Paste this into the code of the page called "Product Page" (Pages › Store Pages › Product Page).
//
// Elements to create first (see GUIDE.html › "Velo code"):
//   #productPage1   The Wix Stores Product Page widget. This is its default ID: check it in the Properties panel
//                   and change PRODUCT_WIDGET below if yours is different.
//   #yamshiWaOrder  A Button placed under the product widget, WhatsApp green (#25D366), white text.
import wixLocationFrontend from 'wix-location-frontend';
import wixSeoFrontend from 'wix-seo-frontend';
import { YAMSHI_WHATSAPP } from 'public/yamshi-settings.js';
import { pick, fill, whatsappUrl, existing, linkElement, removeElement } from 'public/yamshi-whatsapp.js';

const PRODUCT_WIDGET = '#productPage1';

$w.onReady(async function () {
	const button = existing($w, '#yamshiWaOrder');
	if (!button) return;
	if (!YAMSHI_WHATSAPP.productButton || !whatsappUrl()) {
		removeElement(button);
		return;
	}

	const name = await productName();
	const message = fill(pick(YAMSHI_WHATSAPP.orderMessage), { product: name, link: wixLocationFrontend.url });
	linkElement(button, whatsappUrl(message), pick(YAMSHI_WHATSAPP.productLabel));
});

async function productName() {
	const widget = existing($w, PRODUCT_WIDGET);
	if (widget && typeof widget.getProduct === 'function') {
		try {
			const product = await widget.getProduct();
			if (product && product.name) return product.name;
		} catch (err) {
			console.warn('Yamshi: could not read the product, using the page title instead.', err);
		}
	}
	// Fallback: the page title is "<product name> | <site name>".
	return String(wixSeoFrontend.title || '').split(' | ')[0].trim();
}

13. Demo products

Add these in the Wix dashboard › Store Products › + New Product, or try importing products.csv (Store Products › More Actions › Import). Create the categories (Wix: “Categories” or “Collections”) Living, Dining, Bedroom first. Images are not in the CSV: add them to each product after the import.

Photo	Name (EN · AR · FR)	Price	Category	Description	Image file
	Oversized Hoodie هودي واسع Sweat à capuche oversize	$89	Hoodies	A modern essential crafted from premium heavyweight cotton. Oversized fit with a dropped shoulder silhouette for everyday comfort and style. Option “Size”: S, M, L, XL · Info sections: Details, Care & Materials	oversized-hoodie.jpg + oversized-hoodie-detail.jpg, lookbook-street.jpg
	Cargo Pants سروال كارغو Pantalon cargo	$99	Cargo Pants	Relaxed cargo pants in washed cotton twill with bellowed side pockets and an easy straight leg.	cargo-pants.jpg + lookbook-street.jpg
	Premium Hoodie هودي فاخر Sweat à capuche premium	$89	Hoodies	Our heaviest hoodie, in an undyed bone colorway. Boxy, structured and made to last.	heavyweight-hoodie.jpg + lookbook-street.jpg
	Utility Cargo Jogger جوغر كارغو عملي Jogger cargo utilitaire	$110	Joggers	Tapered utility joggers with cargo pockets, an elastic drawcord waist and ribbed cuffs.	utility-cargo-jogger.jpg + lookbook-street.jpg
	Leather Sneakers حذاء رياضي جلدي Sneakers en cuir	$220	Sneakers	Black leather low-tops on a clean white cupsole. The pair that goes with everything.	leather-sneakers.jpg + lookbook-street.jpg
	Panel Hoodie هودي بألواح Sweat à capuche à empiècements	$90	Hoodies	Relaxed hoodie in a soft taupe loopback cotton with a roomy hood and ribbed trims.	panel-hoodie.jpg + lookbook-street.jpg
	Court Sneakers حذاء كورت رياضي Sneakers court	$148	Sneakers	Low-top court sneakers in white leather with a black side panel and a cushioned cupsole.	premium-sneakers.jpg + lookbook-street.jpg
	Zip Hoodie هودي بسحّاب Sweat zippé à capuche	$135	Hoodies	Full-zip hoodie with a two-way metal zip and split kangaroo pockets.	zip-hoodie.jpg + lookbook-street.jpg
	Relaxed Cargo كارغو مريح Cargo décontracté	$125	Cargo Pants	Sand relaxed cargo pants with a wide leg and clean flap pockets.	relaxed-cargo.jpg + lookbook-street.jpg
	Essential Jogger جوغر أساسي Jogger essentiel	$95	Joggers	The everyday jogger: heavyweight fleece, a tapered leg and deep side pockets.	essential-jogger.jpg + lookbook-street.jpg
	Fleece Jogger جوغر صوفي Jogger en molleton	$79	Joggers	Soft brushed fleece joggers in heather gray, cut for comfort.	fleece-jogger.jpg + lookbook-street.jpg
	High-Top Sneakers حذاء رياضي عالي Sneakers montantes	$240	Sneakers	White leather high-tops with black overlays, a padded collar and a white cupsole.	high-top-sneakers.jpg + lookbook-street.jpg

14. All texts — English · Arabic · French

Copy them into the editor (English) and the Translation Manager (Arabic, French).

About page text

15. Final checklist

• Colors and text styles set in Site Design / Site Styles.
• Header sticky; announcement bar text; menu links go to Shop, Collections, About, Journal.
• Homepage sections in order: hero, benefits, shop by category, new arrivals, story, journal (optional), footer.
• 12 products with photos, 4 categories; category cards linked to categories.
• Product page: Details and Care & Materials sections; “Order on WhatsApp” works in Preview.
• Mobile: hamburger menu, 2 products per row, bottom bar, WhatsApp above the bar.
• Arabic and French translated; Arabic texts right-aligned.
• Footer: copyright with the current year; “Theme developed by Yamshi” linked to yamshi.app.

دليل مختصر بالعربية

هذه حزمة تصميم وليست قالباً يُثبَّت بنقرة واحدة: لا تسمح Wix باستيراد موقع أو قالب من ملف، فالقوالب تعيش داخل حساب Wix فقط. لذلك ستعيد بناء التصميم مرة واحدة في حسابك، ثم تعدّل كل شيء من محرر Wix دون برمجة.

1. أنشئ موقعاً فارغاً في Wix Editor أو Wix Studio، وأضف تطبيق Wix Stores.
2. ارفع كل الصور من مجلد images إلى مكتبة الوسائط.
3. الألوان: الخلفية #111111، النص #ECE8E1، اللون الرئيسي #B8955A، والأغمق عند المرور #9A7D4C، الخطوط والحدود #2C2B29، الداكن الثانوي #1B1B1B، واتساب #25D366.
4. الخطوط: للعربية El Messiri للعناوين وTajawal للنصوص؛ وللإنجليزية والفرنسية Bodoni Moda وJost (ارفعها من Google Fonts عبر «Upload Fonts»).
5. رتّب أقسام الصفحة الرئيسية: شريط الإعلان، الترويسة، البانر، المزايا الثلاث، تسوّق حسب الفئة، وصل حديثاً (معرض منتجات Wix Stores، 4 في الصف)، القصة، المدونة (اختياري)، التذييل.
6. أضف تطبيق Wix Multilingual واختر العربية والفرنسية، ثم انسخ النصوص من الجدول في القسم 14. تُحاذى النصوص العربية إلى اليمين تلقائياً؛ وللكتل التي يجب عكسها استعمل «Multi-State Box» بحالتين LTR وRTL.
7. واتساب: فعّل وضع المطوّر (Dev Mode)، أنشئ الملفين yamshi-settings.js وyamshi-whatsapp.js في Public، والصق masterPage.js وكود صفحة المنتج. اكتب رقمك مع رمز الدولة في number.
8. أنشئ العناصر بهذه المعرّفات: yamshiWaFloat (الزر العائم)، yamshiWaOrder (زر «اطلب عبر واتساب» تحت المنتج)، yamshiCopyright وyamshiCredit في التذييل.
9. الجوال: في محرر الجوال أضف شريطاً سفلياً بأربعة أزرار (الرئيسية، المتجر، السلة، حسابي) وثبّته أسفل الشاشة.
10. التذييل: اترك سطر «القالب من تطوير Yamshi» مع رابط https://yamshi.app — هذا كل ما نطلبه مقابل الحزمة المجانية.

Guide rapide en français

Ce kit est un kit de design, pas un modèle à installer en un clic : Wix ne permet pas d’importer un site ou un thème depuis un fichier, un modèle n’existe qu’à l’intérieur d’un compte Wix. Vous reconstruisez donc le design une fois dans votre compte, puis vous modifiez tout dans l’éditeur Wix, sans code.

1. Créez un site vierge dans Wix Editor ou Wix Studio et ajoutez l’application Wix Stores.
2. Importez toutes les photos du dossier images dans le gestionnaire de médias.
3. Couleurs : fond #111111, texte #ECE8E1, couleur principale #B8955A (survol #9A7D4C), lignes #2C2B29, gris anthracite #1B1B1B, WhatsApp #25D366.
4. Polices : Bodoni Moda pour les titres et Jost pour le texte (à téléverser depuis Google Fonts via « Upload Fonts » ; Bodoni Moda existe déjà dans Wix).
5. Ordre de l’accueil : barre d’annonce, en-tête, bannière, trois atouts, « Acheter par catégorie », « Nouveautés » (galerie Wix Stores, 4 par ligne), histoire, journal (facultatif), pied de page. Marges des sections : 88 px (56 px sur mobile).
6. Ajoutez Wix Multilingual (arabe et français) et copiez les textes du tableau de la section 14.
7. WhatsApp : activez le mode développeur (Dev Mode), créez yamshi-settings.js et yamshi-whatsapp.js dans Public, collez masterPage.js et le code de la page produit, puis saisissez votre numéro avec l’indicatif (ex. 33612345678).
8. Créez les éléments avec ces ID : yamshiWaFloat (bouton flottant), yamshiWaOrder (bouton « Commander sur WhatsApp » sous le produit), yamshiCopyright et yamshiCredit dans le pied de page.
9. Mobile : dans l’éditeur mobile, ajoutez une barre du bas avec quatre boutons (Accueil, Boutique, Panier, Compte) épinglée en bas de l’écran.
10. Pied de page : gardez la ligne « Thème développé par Yamshi » avec le lien https://yamshi.app — c’est la seule contrepartie demandée pour ce kit gratuit.