MioVita Theme - Documentation

MioVita Theme Documentation

MioVita is an editorial-first Shopify theme designed for wellness, supplements, and premium lifestyle brands. It combines a magazine-style aesthetic with modern e-commerce functionality — bringing long-form storytelling to product pages, ingredient transparency, and ritual-based shopping experiences.

Getting started

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize on the MioVita theme.
  3. Use the theme editor to replace demo content with your own products, collections, and copy.
  4. Upload your own imagery in each section via the image picker.
  5. Click Save when finished.

Theme structure

MioVita is built around chapters — each section on the homepage is designed to tell part of your brand story. The default homepage includes:

  • Hero with chapters — editorial introduction to your brand
  • Chapter intro — narrative opening with stats
  • Featured collection — product showcase
  • Transformation stories — customer journey highlights
  • Ingredient atlas — sourcing and ingredient transparency
  • Science section — research and citations
  • Protocol builder — goal-based product recommendations
  • Ritual timeline — daily usage guide
  • Image with text — brand story moments
  • Editorial quote — founder or expert voice
  • Testimonials — verified customer quotes
  • Field notes — blog preview
  • FAQ — common questions
  • Newsletter — email capture

Customizing colors

MioVita ships with four color schemes. You can edit them at Theme settings > Colors:

  • Scheme 1 — default light cream editorial
  • Scheme 2 — soft neutral variant
  • Scheme 3 — dark mode for dramatic sections
  • Scheme 4 — accent scheme for call-to-actions

Each section has a Color scheme dropdown so you can mix and match schemes across the page.

Customizing typography

Go to Theme settings > Typography to change the heading font, body font, and their scales. The theme is designed to work well with serif display fonts (Fraunces, Playfair Display) paired with modern sans-serif body fonts (Inter).

Product page features

MioVita's product template includes editorial-style product descriptions, ingredient callouts, and protocol instructions. Use the Shopify product description editor to add your own long-form content. Metafields can be used to display structured data like dosage, ingredients, and lab test results.

Cart

The theme uses a cart drawer by default. You can switch to a cart page in Theme settings > Cart. Cart notes and discount codes are toggleable.

Header and footer

Customize the header and footer via Sections > Header and Sections > Footer in the theme editor. You can add navigation menus, social links, newsletter signup, and multi-column footer blocks.

Responsive design

MioVita is fully responsive and optimized for mobile, tablet, and desktop. All sections adapt their layout automatically. You can preview different device sizes using the device toggle in the theme editor.

Accessibility

MioVita is built with accessibility in mind:

  • Semantic HTML structure
  • Keyboard navigation support
  • ARIA labels on interactive elements
  • Sufficient color contrast across all schemes
  • Focus-visible indicators
  • Skip-to-content link

Performance

The theme is optimized for fast loading with lazy-loaded images, minimal JavaScript, and CSS variables for efficient styling. Images should be uploaded in WebP or optimized JPEG format for best performance.

Support

For theme support, please use our contact page. We respond to all merchant inquiries within 2 business days.

Updates

Theme updates are released regularly with bug fixes, performance improvements, and new features. You'll be notified in your Shopify admin when an update is available.