Octaevo Mediterranean Design E-commerce Store

Overview

Octaevo is a high-end Mediterranean design shop that balances vibrant photography with a minimalist, airy e-commerce interface. It serves as a strong clone reference for its sophisticated use of split-screen hero layouts and seamless product carousels that prioritize visual storytelling over dense text.

Design System

• Color Palette & Visual Hierarchy: The site uses a shifting pastel backplate strategy. Each section (e.g., #f7fcfc, #f8eeee, #eef1e3) acts as a soft container for products, creating a distinct rhythmic transition as the user scrolls. Hierarchy is established through bold, serif display headings contrasted against clean sans-serif metadata.
• Typography System: A high-contrast serif typeface (likely a variant of Caslon or Bodoni) is used for decorative collection titles like "La Trattoria." A neutral, wide-set sans-serif handles navigation and utility text, ensuring readability in small sizes like the promo bar.
• Page Structure & Flow: The site follows a alternating pattern: Split-screen CTA section (Image Left/Text Right) → Horizontal Product Carousel → Split-screen CTA section (Image Right/Text Left). This keeps the user engaged without visual fatigue.
• Reusable Components:
  • Split-Screen CTAs: Perfect for high-conversion entry points with large hit areas.
  • Circular Newsletter Overlay: A unique centered popup (join our club) that breaks the standard rectangular grid.
  • Hover-State Product Cards: Visible in the HTML as .collection-product__image-figure--hover, these swap a clean product shot for a lifestyle shot on mouse-over.
• Interaction & Motion: The site utilizes animate-on-scroll classes to fade in content. Product carousels (built with Swiper.js) include a custom progress-bar style scrollbar at the bottom rather than traditional arrows.
• Implementation Clues: Built on Shopify, the frontend relies heavily on the Swiper.js library for both the promo bar and product feeds, and uses a standard BEM (Block Element Modifier) class naming convention (e.g., mini-cart__inner).

Use Cases

• Who should clone this pattern: Boutique brands in the home decor, stationary, or artisanal food spaces that have high-quality lifestyle photography.
• Effective Remixes: Travel agencies could use the split-screen CTAs for destination highlights; luxury fashion brands could adapt the horizontal carousels for lookbooks.
• Practical Remix Directions: Swap the pastel background palette for a dark mode/high-contrast aesthetic for tech or luxury goods. Adapt the circular popup into a 'Limited Edition' alert or countdown timer.
• Suggested Clone Scope: A quick section clone of the split-screen image/text blocks and the product carousel is highly effective for landing pages. A full-page clone is best for creators wanting a complete, polished Shopify architectural feel.