Mavellis theme documentation
Mavellis is a Shopify theme for clothing brands that release their collection in drops, capsules or numbered editions. Your drops form one release sequence: what's live now, what's coming next, and an archive of everything you've released. The header, home page, collection pages, product pages and the collection list all follow that sequence.
This documentation covers Mavellis version 1.0.0. Setting names below match the theme editor exactly.
Before you start
- Duplicate your theme before you edit code. In the Shopify admin, go to Online Store > Themes, open the … menu next to Mavellis and choose Duplicate. Customizations in the theme editor don't need this.
- Mavellis needs no apps. Every feature in this documentation uses Shopify's built-in features.
- Most setup happens in two places: Online Store > Navigation (for menus) and the theme editor (Online Store > Themes > Customize).
Getting started in five steps
- Add your drop collections. Create one collection for each drop in Products > Collections, for example "Spring capsule" or "Edition 04". Add the products that belong to each drop.
- Create a Drop index menu. In Online Store > Navigation, create a menu (for example "Drops") and add one link to each drop collection, oldest first.
- Connect the menu. In the theme editor, open Theme settings > Drops. Set Drop index to your new menu and Current drop to the collection that's live now.
- Set your main menu. The Header section uses your Main menu (the menu with the handle
main-menu). Add your drops, categories and pages there. Menus can have up to three levels. - Add your logo and colors. Open Theme settings > Logo and favicon and Theme settings > Colors.
Until you complete steps 2 and 3, the home page shows a Shop all heading with products from your store, so it's never empty. Notices that explain the setup are shown only in the theme editor, never to customers.
Drops
How drops work
- The Drop index is a menu that lists your drop collections in release order, oldest first.
- The Current drop is the drop that's live now.
- Drops listed before the Current drop are shown as archive. Drops listed after it are shown as upcoming.
- States never use dates or countdowns. To release your next drop, change Current drop in Theme settings > Drops. The header, home page, collection pages, product pages and the collection list update together.
- Products in every state stay purchasable. An upcoming drop shows its products with a "Not yet released" introduction and an optional email signup, so customers can sign up to hear about it.
Theme settings > Drops
| Setting | What it does |
|---|---|
| Drop index | A menu that lists your drop collections, oldest first. Create it in Online Store > Navigation. Links that aren't published collections are skipped. |
| Current drop | The drop that's live now. Choose a collection from the Drop index. |
| Show edition numbers | Numbers each drop by its position in the Drop index, for example No. 07. |
Tips
- Keep the Drop index to drop collections only. Category collections such as "Knitwear" belong in your main menu, not in the Drop index.
- To show notes for a drop, such as a journal article about it, add the article as a child link under that drop's link in the Drop index. It appears as Notes on the drop's collection page.
- A product can belong to more than one drop. The Drop block on the product page shows the drop the customer came from. To choose one drop for each product, connect the block's Primary drop setting to a product metafield that references a collection.
Theme settings
Open the theme editor and choose Theme settings (the gear icon).
Logo and favicon
| Setting | What it does |
|---|---|
| Logo | Your logo. Landscape, square and portrait logos all work. |
| Logo width | Logos keep their aspect ratio. Width applies on large screens; small screens use a proportionally smaller size. |
| Favicon | 32 x 32px .png recommended. |
When there's no logo, the header shows your store name.
Colors
Mavellis includes five color schemes. Each scheme sets a background, text, secondary text, border and button colors. Sections and the header each have a Color scheme setting.
| Setting | What it does |
|---|---|
| Color schemes | Edit the five schemes, or add your own. |
| Page color scheme | Used for the page background and any area without its own color scheme. |
The shipped schemes meet accessibility contrast guidelines. If you change colors, keep body text at a contrast ratio of at least 4.5:1 against its background.
Typography
| Setting | What it does |
|---|---|
| Heading font | Font for headings. |
| Heading size | Scales all headings, from 80% to 130%. |
| Body text font | Font for body text, buttons and forms. |
| Body text size | 14 to 18px. |
| Index font | Used for edition numbers, release states, and small labels. A monospaced font keeps numbers aligned. |
All fonts come from Shopify's font library. Bold and italic styles load automatically.
Layout
| Setting | What it does |
|---|---|
| Page width | Standard or Wide. |
| Page margin | Space at the left and right edges of the page, 12 to 64px. |
| Section spacing | Compact, Standard or Spacious. |
Buttons and inputs
| Setting | What it does |
|---|---|
| Corner radius | Applies to buttons, inputs, and badges. 0px gives square corners. |
Cart
| Setting | What it does |
|---|---|
| Cart type | Drawer or Page. The cart page is always available. With Drawer, adding to cart opens the cart over the current page. |
| Show cart note in drawer | The cart page always shows the cart note. |
Social media
Add the full link to each account you use: Facebook, Instagram, TikTok, Pinterest, Snapchat, Tumblr, X (Twitter), Threads, YouTube and Vimeo. Only accounts with a link are shown, in the footer's Social media icons block.
Header and footer
Header
The header shows your logo, main menu, search, the customer account button and the cart. On small screens the menu opens in a drawer.
| Setting | What it does |
|---|---|
| Main menu | The menu shown in the header. Defaults to your Main menu. Up to three levels are supported. |
| Show index numbers in the main menu | Numbers the top-level menu items 01, 02, 03 in the index font. |
| Show current drop | Shows a bar below the header that links to the Current drop and the archive. Set drops in Theme settings > Drops. |
| Color scheme | Colors for the header. |
| Sticky header | Keeps the header visible while customers scroll. |
| Show search suggestions | Suggests products, collections, pages, and articles as customers type. |
| Show country/region selector | Appears only when more than one country/region is available. Add countries/regions in Settings > Markets. |
| Show language selector | Appears only when more than one language is published. Add languages in Settings > Languages. |
The account button uses Shopify customer accounts and appears on large and small screens.
Footer
The footer is a section group: you can add, remove and reorder sections in it. The Footer section has these blocks:
| Block | What it does |
|---|---|
| Menu | Shows the first level of a menu. Footer menu defaults to your Footer menu. |
| Text | A heading and text, for example about your brand. |
| Email signup | Customers who sign up are added to your customer list with the tag "newsletter". |
| Social media icons | Shows the accounts set in Theme settings > Social media. |
Footer section settings:
| Setting | What it does |
|---|---|
| Color scheme | Colors for the footer. |
| Show country/region selector | Shown when more than one country/region is available. |
| Show language selector | Shown when more than one language is published. |
| Show Follow on Shop | Lets customers follow your store in the Shop app. Requires Shop Pay. |
| Show payment icons | Shows the payment methods enabled on your store. |
| Show policy links | Links to the policies you've added in Settings > Policies. |
Home page
Mavellis's home page is built from release sections. Add, remove and reorder sections in the theme editor.
| Section | What it shows |
|---|---|
| Current drop | The Current drop: its image, title, description, a button, and products. Settings: Show description, Button label, Products to show (0 to 8), Color scheme. |
| Release sequence | The drops around the Current drop in release order (archive, now, upcoming), with a link to the full archive. Settings: Heading, Archived drops to show, Upcoming drops to show, Color scheme. |
| Next drop | The drop after the Current drop, with an optional email signup. Hidden when there's no upcoming drop. Signups are tagged with the drop, for example drop-summer. |
| Featured product | One product with its media, price, options and buy buttons. Uses the same blocks as the product page, and supports app blocks. |
| Custom Liquid | Add app snippets or other Liquid code. |
| Apps | Holds app blocks from the apps you install. |
The drop image on the Current drop and collection pages is the collection image. Add it in Products > Collections for each drop.
Collection pages
Collection pages open with the collection's image, title and description. For drops, they also show the drop's state (archive, now or upcoming), its edition number and a link to the next drop.
| Setting | What it does |
|---|---|
| Color scheme | Colors for the section. |
| Show collection image | Shows the collection image at the top. |
| Products per page | 8 to 48. |
| Columns on large screens | 2 to 5. |
| Columns on small screens | 1 column or 2 columns. |
| Show filters | Filters come from your store's filter settings in the Shopify admin. |
| Show sorting | Lets customers sort products. |
| Show email signup on upcoming drops | Adds an email signup to upcoming drops. |
Filters: Mavellis shows the filters you set up in the free Shopify Search and Discovery app: availability, price, product type, vendor, variant options and more.
Product cards (the Product card block): Image ratio (Portrait or Square) and Show vendor. Cards show a Sale badge when a product has a compare-at price, a price range when variants have different prices, and unit prices when set.
Collection list (archive)
The collection list page (/collections) is your archive. Drops from the Drop index are listed first, newest first, followed by your other collections.
| Setting | What it does |
|---|---|
| Show all collections | Always shown when the Drop index is empty. |
| Collections per page | 10 to 50. |
Each card uses the collection image, or the first product's image when the collection has none.
Product pages
The Product information section is made of blocks. Add, remove, hide and reorder them in the theme editor.
| Block | What it does |
|---|---|
| Title | The product title, never shortened. |
| Drop | The drop this product belongs to. Primary drop and Show other drops. |
| Vendor | The product's vendor. |
| Price | Price, compare-at price, unit price, tax note and Shop Pay Installments message. |
| Variant picker | Product options. Style: Buttons or Dropdown. Show swatches uses the colors or images set on option values in the Shopify admin. |
| Purchase options | Subscription and other selling plans, when a product has them. |
| Quantity selector | Lets customers choose a quantity. |
| Buy buttons | Add to cart. Show dynamic checkout buttons shows Shop Pay, Apple Pay and other wallets. Show gift card recipient form lets customers send gift cards to someone else. |
| Pickup availability | Shows whether the product can be picked up in your stores. |
| Inventory status | Shows whether the variant is in stock. Show remaining quantity shows the real inventory count at or below the Remaining quantity threshold. |
| SKU | The selected variant's SKU. |
| Description | The product description. |
| Collapsible tab | Extra information such as materials, care or a size guide. You can show a page's content, for example a size guide shared by many products. |
| Complementary products | Products that pair well, chosen in the Shopify Search and Discovery app. Hidden when there are none. |
| Custom Liquid | Add app snippets or other Liquid code. |
| App blocks | Blocks from your installed apps. |
Section settings: Color scheme and Show media numbers (numbers each image, video and 3D model, for example 01 / 06).
Media: Mavellis shows every product image, video, YouTube and Vimeo video and 3D model, at its own aspect ratio, so nothing is cropped. When a customer chooses a variant with its own image, that image moves to the front.
Related products: the Related products section below the product shows products Shopify chooses automatically. Settings: Heading, Maximum products to show, Columns on large screens, Color scheme.
Cart
- Customers can change quantities, remove items, add a note and go to checkout from the cart drawer or the cart page.
- The cart shows discounts on each line and for the whole order, unit prices, selling plans, and whether taxes are included.
- Dynamic checkout buttons (Shop Pay, Apple Pay, PayPal and others) appear when your payment providers support them.
- Discount codes are entered at checkout.
Search
The search results page shows products, articles and pages, with filters and sorting for products. Search suggestions appear as customers type in the header search.
| Setting | What it does |
|---|---|
| Results per page | 8 to 48. |
| Product columns on large screens | 2 to 5. |
| Show filters | Filters apply to product results. They come from your store's filter settings in the Shopify admin. |
| Show sorting | Lets customers sort results. |
Blog and articles
| Blog setting | What it does |
|---|---|
| Articles per page | 3 to 24. |
| Feature the newest article | Shows the first article on page 1 larger. |
| Show tag filter | Lets customers filter articles by tag. |
| Show featured image, Image ratio, Show date, Show author, Show excerpt | Control the article cards. |
| Article setting | What it does |
|---|---|
| Show featured image, Show date, Show author, Show tags | Control the article page. |
| Comments per page | Comments appear when they're turned on for the blog in the Shopify admin. |
Pages, contact, password and gift cards
- Pages use the Page section: the page title and content.
- Contact page: create a page in Online Store > Pages and choose the contact template. The Contact form section has Heading, Text, Show phone number field and Color scheme. Messages are sent to your store's email address (Settings > General).
- Password page: shown while your store is password protected. Edit the message in Online Store > Preferences > Password protection. Settings: Show email signup, Signup heading.
- Gift cards: the gift card page shows the card's code, a QR code, an Apple Wallet button and your logo or store name.
- 404 page: shows a clear message, a search form and links back to your store.
Selling internationally
- Countries/regions and currencies: add markets in Settings > Markets. The country/region selector appears in the header, menu drawer and footer when more than one is available.
- Languages: publish languages in Settings > Languages. The language selector appears with the country/region selector.
Apps and custom code
- App blocks can be added to the product page, the featured product section, the cart, articles and the footer. Use the Apps section to add app blocks anywhere else.
- The Custom Liquid section and block let you add app snippets or Liquid code without editing theme files.
Frequently asked questions
Why does my home page say "Shop all" instead of showing my drops?
The Drop index or Current drop isn't set. Open Theme settings > Drops, choose your Drop index menu and your Current drop.
How do I release my next drop?
Change Current drop in Theme settings > Drops to the next collection in your Drop index, then save. Everything updates together.
Can customers buy products from an archived or upcoming drop?
Yes. Drop states only change how drops are presented. They never hide prices or turn off Add to cart. If you don't want to sell a product yet, keep it unpublished from your Online Store.
Does Mavellis show countdowns or "only a few left" messages?
No countdowns. The Inventory status block can show the real remaining quantity if you turn on Show remaining quantity. It never shows invented numbers.
Where do filters come from?
From the free Shopify Search and Discovery app, under Filters. Add filters there and they appear on collection and search pages.
How do I add a size guide?
Create a page with your size guide, add a Collapsible tab block to the product page and choose the page in Page content.
Can I use Mavellis without drops?
Yes. Without a Drop index, Mavellis works as a standard store: the home page shows your products and the collection list shows all collections. Add drops whenever you're ready.
Why don't I see the Shop Pay Installments message or dynamic checkout buttons?
They depend on your payment settings. Shop Pay Installments needs Shopify Payments in an eligible country. Dynamic checkout buttons need a supported wallet to be turned on in Settings > Payments.
Why doesn't the pickup message appear?
Turn on local pickup for at least one location in Settings > Shipping and delivery.
How do I update Mavellis?
When a new version is available, Shopify shows it in Online Store > Themes. Adding the update creates a new copy of the theme with your settings, which you can preview before publishing.
Support
Contact us through the form on the Mavellis support page. Include your store URL and a description of the issue, and add screenshots if you can.
Support policy
- We reply to every request within two business days.
- We fix bugs in Mavellis, including layout problems, broken links and errors, and we fix critical bugs immediately.
- We answer questions about Mavellis's features and settings.
- Custom coding, app integrations and store setup aren't included with the theme. For help with those, hire a Shopify Partner.
Release notes
1.0.0
The first release of Mavellis.
- Release sequence: a Drop index and Current drop set the state of every drop (archive, now, upcoming) across the header, home page, collection pages, product pages and the collection list.
- Home sections: Current drop, Release sequence, Next drop and Featured product.
- Product pages built from blocks, with rich media, variant images, swatches, selling plans, pickup availability, Shop Pay Installments, complementary and related products.
- Cart drawer and cart page with discounts, unit prices, selling plans and cart notes.
- Filtering and sorting on collection and search pages, and search suggestions.
- Blog, article, page, contact, password, gift card and 404 templates.
- Country/region and language selectors, customer account button, Follow on Shop and newsletter signup.