Theme Overview
Manas is a Shopify theme for modern ecommerce brands. It focuses on strong product presentation, conversion-focused product pages, editable content sections, mobile usability, and flexible merchandising.
Best for
Apparel, activewear, lifestyle brands, accessories, bundles, and visually rich DTC storefronts.
Core strengths
Rich product-page blocks, collection filtering, homepage sections, multilingual schema support, and reusable templates.
Editing workflow
Most layout, content, style, and merchandising changes can be made directly inside the Shopify theme editor.
Installation
Upload the current theme package through Shopify admin. Keep a duplicate of your live theme before publishing.
Open Shopify admin
Go to Online Store → Themes, then find the Theme library area.
Upload the zip file
Click Add theme → Upload zip file, then select dist/manas-theme.zip.
Apply demo JSON
After uploading the theme, overwrite the same files in the uploaded theme with the demo config/settings_data.json file and all JSON files inside templates/.
Preview before publishing
Check the homepage, product page, collection page, cart drawer, and mobile menu.
Reconnect app blocks
Verify Judge.me, subscriptions, recommendations, and other app blocks in their expected templates.
Publish
Check the theme editor first. When everything is correct, publish the current theme and run a real-device add-to-cart and checkout test.
Important: Uploading a theme zip does not migrate third-party app settings.
Quick Setup
Brand foundation
Set logo, favicon, typography, color schemes, page width, button radius, media radius, and card styles.
Commerce basics
Configure currency display, swatch option names, cart drawer behavior, free shipping bar, wishlist, and compare.
Navigation and footer
Use Header for menus, mega menu, transparent header, and sticky header. Use Footer for menus, newsletter, social links, and brand copy.
Product experience
Configure main product, complementary products, related products, app blocks, and Description/Reviews tab templates.
Theme Settings
| Setting group | Purpose | Recommendation |
|---|---|---|
| Logo / favicon | Upload desktop/mobile logos and browser icon. | Use transparent PNG or SVG files. |
| Colors | Manage color schemes for sections and blocks. | Create white, dark, light gray, and accent schemes. |
| Typography | Set heading, body, and accent fonts. | Prioritize readability on mobile. |
| Layout | Control page width, section spacing, and grid gaps. | Adjust grid gap before changing content density. |
| Color swatches | Configure option names and custom swatch values. | Match product option names to color keywords. |
| Wishlist and compare | Enable wishlist and compare pages. | Assign the correct page templates. |
| Cart | Set cart type, free shipping bar, notes, and recommendations. | Test drawer behavior after add-to-cart. |
Templates
| Template | Included sections | Use case |
|---|---|---|
index.json | Slideshow, scrolling text, featured collections, collection list, countdown, hero video, shop the look, icon with text, shopable videos. | Homepage. |
product.json | Main product, complementary products, apps, related products. | Default product page. |
collection.json | Collection banner and product grid. | Collection pages. |
list-collections.json | Page banner and collection list. | All collections page. |
page.about.json | Page banner, scrolling text, parallax image with text, image with text, multicolumn. | Brand story page. |
page.contact.json | Page banner, image with text, contact form. | Contact page. |
page.faq.json | Page banner, page content, collapsible content, image banner. | FAQ or help center. |
Product Page
The product page includes media gallery, sticky product information, variant picker, size guide, icon with text, description show more, popups, safe checkout, share buttons, subscription placement support, and bundle-option thumbnails.
Variant picker and size guide
Supports pills, dropdowns, swatches, and a popup size guide with rich text or selected page content.
Bundle product options
Child product options can show thumbnails. Changing a color updates both the thumbnail and main product image.
Selling plans
Subscription options are normalized above the Quantity + Add to cart area.
Description show more
Descriptions can collapse after 22rem and expand with Show more / Show less text.
Icon with text
Supports up to four items, uploaded images or built-in SVG icons, hide toggles, and column layouts.
Complementary products
Displayed as an independent section below the first product screen.
Collections, Search, and Product Cards
Collection banner
Supports description, background image, collection image as background, overlay, breadcrumb, and content position.
Product grid
Controls products per page, columns, image ratio, image shape, vendor, reviews, quick add, filters, and sorting.
Product card
Supports hover secondary image, swatches, price, badges, quick add, wishlist, and compare actions.
List collections
Collection images and titles are clickable, with subtle image zoom on hover.
Cart and Conversion
| Feature | Description | Location |
|---|---|---|
| Cart drawer | Side drawer after add-to-cart with quantity updates, remove, notes, recommendations, and checkout. | snippets/cart-drawer.liquid |
| Remove icon | Trash icon remove action. | assets/icon-remove.svg |
| Free shipping bar | Progress toward free shipping threshold. | Theme settings → Cart |
| Cart page | Full order review with cart items and footer. | templates/cart.json |
Section Library
- Announcement bar: announcements, auto rotation, social links, country and language selectors.
- Header: logo, menu, mega menu, transparent header, sticky header.
- Slideshow: multi-slide hero with buttons and autoplay.
- Image banner: image hero with overlay, text, and buttons.
- Hero video: full hero video with poster and buttons.
- Featured collection: collection products with carousel/grid controls.
- Collection list: collection entry grid or carousel.
- Related products: related product recommendations.
- Complementary products: complementary product recommendations.
- Image with text: editorial image and copy section.
- Video with text: video plus content layout.
- Parallax image with text: layered visual storytelling.
- Icon with text section: service promise icon group.
- Collage: mixed image/product/collection/video layout.
- Collapsible content: FAQ-style accordions.
- Scrolling text/images: moving text or image strips.
- Before / After: comparison image module.
- Countdown banner: campaign countdown.
- Shop the look: product hotspots on lifestyle images.
- Shopable videos: shoppable short videos.
- Newsletter: email capture sections.
- Footer: menus, image blocks, social links, newsletter, and brand copy.
Marketing Modules
New arrivals and best sellers
Use Featured collection with carousel and quick add.
Limited-time campaigns
Use Countdown banner with campaign imagery and a clear CTA.
Content-led selling
Use Shop the look, Shopable videos, Image with text, and Before/After.
Trust building
Use Icon with text for delivery, payment, support, and packaging promises.
Apps and Reviews
| App type | Integration | Checklist |
|---|---|---|
| Judge.me Reviews | Use app block or app-injected widget. | Confirm assets/judgeme.css loads and review width matches page width. |
| Subscriptions / Appstle | Inserted as a selling-plan widget. | Subscription options should sit above Quantity + Add to cart. |
| Product recommendations | Related uses intent=related; complementary uses intent=complementary. | Configure Shopify Search & Discovery for precise recommendations. |
Translations
The theme includes storefront locale files and schema locale files. Update matching schema keys when adding settings.
Storefront text
Stored in locales/*.json.
Editor text
Stored in locales/*.schema.json.
New fields
Add English schema keys first, then translate additional languages.
Default language
Use en.default.json and en.default.schema.json; do not add duplicate en.schema.json.
Assets, Icons, and File Structure
assets/ - CSS, JavaScript, SVG, GIF, and static resources
config/ - global theme settings and current setting data
layout/ - theme.liquid and password.liquid
locales/ - storefront and schema translations
sections/ - editable page modules
snippets/ - reusable Liquid fragments
templates/ - page, product, collection, and system templates
docs/ - this theme documentation
Product-page icon with text blocks use snippets/icon-picker.liquid for inline SVG output.
Launch Checklist
| Area | Pass criteria |
|---|---|
| Homepage | Hero media, links, product collections, videos, and carousel sections load correctly. |
| Product page | Variant switching, image switching, size guide, subscription, quantity, Add to cart, and Buy it now work. |
| Bundle product | Child product thumbnail appears; changing color updates thumbnail and main image. |
| Collection page | Filtering, sorting, pagination, quick add, swatches, and hover images work. |
| Cart | Cart drawer opens, quantity updates, remove works, free shipping bar updates, checkout is available. |
| Translations | No missing translation warnings or raw translation keys. |
Maintenance
Backup before publishing
Duplicate the live theme or keep a dated zip backup before major changes.
Update with live JSON
When updating the theme, copy config/settings_data.json and all JSON files inside templates/ from the currently published theme, then overwrite the same files in the new version before publishing.
Prefer the theme editor
If a change can be handled through settings, use the editor instead of editing Liquid directly.
Retest after app updates
Retest the product buy area and cart drawer after updating subscription, review, recommendation, or loyalty apps.
Translate new settings
Update English schema first, then Chinese and other languages.
Change logs
| Version | Notes |
|---|---|
| V0.1.8 | Latest release. Includes current theme settings, templates, responsive media behavior, typography controls, skeleton loading, and section refinements. |