Chavex documentation

Chavex is a Shopify theme for premium electronics. Product pages and cards read like instrument panels: specifications first, then the story. It supports English and Arabic (right to left), light and dark mode, and 4 more languages for the storefront text.

1. Install

1. Online Store > Themes > Add theme > Upload zip file, then choose chavex-theme.zip.
2. Click Customize. The home page opens with the sections described below.
3. Settings (the gear icon in the editor) holds colours, fonts, cards, cart and catalog options.

2. Adding specifications to products

The cards, the product page, the table view, the side by side board, the spec finder and the league table all read the same data. Use whichever way is easiest:

Way	How	Best for
Description	A bulleted list with a bold label: Battery: 40 hours	No setup, a few products
Metafield	Product metafield custom.specs, type multi-line text, one Label: value per line	Many products
Tags	spec:Battery=40 hours	Bulk import by CSV

The theme reads tags first, then the metafield, then the description. A product with none of them shows its normal highlights.

A spec called Battery in hours, days or weeks gets a segmented gauge. Hours fill the bar at 48 hours. Days and weeks fill it at 30 days. Hover the gauge for the scale.

3. Sections

• Hero slider, categories, bestsellers, product slider, bento grid, reviews, newsletter: standard building blocks, all with settings for layout and content.
• Spec finder: sliders for battery, weight and price over one collection. Shows the products that still match.
• Spec league: ranks one collection by battery life or by weight.
• Product video: shows the product's video as a wide stage with autoplay (muted) and play and sound buttons. It appears only when the product has a video.
• Shop the look, scroll story, FAQ, team, stats, marquee: page sections for brand storytelling.

On a new store with no products, the spec finder and the league table show sample products so the page still looks complete.

4. Store features

• Search: open with the search field in the header or Ctrl K (Cmd K on Mac). Type "battery 30" or "weight 250" to find products by the numbers.
• Shelf: the compare button on a card adds the product to a bar at the bottom of the page, up to 3 products.
• Collection views: Grid, Table (sortable, with sliders) and Specs view (shows up to 6 specs on every card).
• Cart: drawer or page, order note, discount code field, one-click add-ons, free shipping bar.
• Product page: gallery with thumbnails, bundle ("frequently bought together"), what's in the box, manual link, FAQ with image.

5. Languages and right to left

Storefront text is translated in English, Arabic, French, Italian, German and Spanish. For product, collection and page text use Shopify's Translate and adapt app. Arabic switches the whole layout to right to left.

6. Customizing the look

• Colours: Settings > Colors. Choose the champagne preset or enter your own colours for light and dark.
• Fonts: Settings > Typography.
• Corners, page width, header behaviour: Settings > Layout.
• Cards: Settings > Catalog. Shape, picture fit, shadow, border, hover, badges.

Colour swatches on cards

A card shows a swatch for each colour. Tapping a swatch shows the picture of that colour (the picture set on the variant) and the card link opens that variant. Tapping the first swatch brings the original back.

The second picture shown when you hover a card follows the colour: it is the first other picture whose alt text names that colour, for example "Pulse Buds Lite, Navy, view 3". If no picture names the colour, the card only zooms a little on hover.

7. Checkout

Colours, fonts and logo of the checkout page are set in Settings > Checkout > Customize. They are not part of the theme.

8. Support

Replace this section with your support address and page before publishing the documentation.