1. Introduction
Thank you for purchasing Noorvi. The theme is built on Shopify's Online Store 2.0 architecture: every page is assembled from sections that you can add, remove and reorder in the theme editor, without touching code.
Noorvi has no third-party JavaScript or CSS dependencies. It loads one stylesheet and one deferred script.
2. Installation
- Unzip the package you downloaded. Inside you will find
noorvi-1.0.0.zip(the theme) and thisdocumentationfolder. - In your Shopify admin go to Online Store → Themes.
- Click Add theme → Upload zip file and select
noorvi-1.0.0.zip. - When the upload finishes, click Customize to edit the theme, or Publish to make it live.
Upload the inner theme zip, not the full download package. Uploading the full package produces a "missing template" error.
3. First steps
Menus
Go to Online Store → Navigation. The header uses the Main menu and the footer uses the Footer menu by default. Nest items up to three levels deep to get dropdowns; a menu item with a third level opens as a multi-column panel.
Mega menu images
In the theme editor select the Header section and click Add block → Mega menu image. In the Menu item field type the exact title of the top-level menu item (for example Shop), then choose an image, heading and link. The image appears beside that item's dropdown. The menu item must have at least one sub-item.
Wishlist
The wishlist works out of the box and needs no app or customer account: products are saved in the visitor's browser and listed in a drawer opened from the heart icon in the header. Switch it off under Theme settings → Wishlist.
Logo
In the theme editor select the Header section and upload a logo. Without a logo the store name is shown as text.
Homepage
The homepage ships with eight sections showing placeholder content. Select each section and choose your own images, collection and blog.
4. Theme settings
Open the theme editor and click the gear icon (Theme settings).
| Group | What it controls |
|---|---|
| Colors | Background, text, surface, borders, accent/buttons, sale color and the inverse palette. Each section can then use the Default, Surface or Inverse color style; some sections also offer Accent. |
| Typography | Heading and body fonts from the Shopify font library, heading scale and body size. |
| Layout | Page width, space between sections, corner radius and button radius. |
| Product cards | Image ratio, hover image, vendor, quick view, quick add and sale badge. |
| Cart | Drawer or page cart, order note and the free shipping progress bar with its threshold. |
| Animations | Reveal sections as the visitor scrolls. Turned off automatically for visitors who prefer reduced motion. |
| Wishlist | Heart buttons on products and the wishlist drawer. |
| Search | Live search suggestions. |
| Social media | Links shown as icons in the footer. |
| Favicon | Browser tab icon. |
5. Sections
| Section | Description |
|---|---|
| Announcement bar | One line of text with an optional link, above the header. |
| Header | Logo, menu with dropdowns, search, account and cart. Optional sticky behaviour. |
| Slideshow | Up to five slides with image, overlay, heading, text and button. Optional auto-rotate. |
| Icon columns | Up to four columns with an icon, heading and text. |
| Collection list | Up to eight collection tiles. |
| Featured collection | Product grid from one collection. |
| Image with text | Image beside a heading, text and button. |
| Rich text | Centered or left-aligned text block. |
| Testimonials | Up to six customer quotes with star ratings. |
| Blog posts | Three latest articles from a blog. |
| Email signup | Newsletter form. Subscribers appear under Customers in your admin. |
| Promo banners | Two or three image banners with a heading and link. |
| Collection tabs | Up to five tabs, each showing products from a collection. |
| Countdown | Sale timer with heading, text, button and optional image. Enter the end date as YYYY-MM-DD HH:MM. |
| Scrolling text | A looping line of text. Pauses on hover and stays still for visitors who prefer reduced motion. |
| Logo list | Up to eight press or brand logos. |
| FAQ | Collapsible questions and answers. |
| Recently viewed | Product page only. Shows products the visitor opened earlier. |
| Contact form | Name, email, phone and message. Used on the page.contact template. |
| Footer | Up to four blocks (text, menu, newsletter), social icons, country/language selectors and payment icons. |
6. Product page
The Product information section is made of blocks you can reorder: vendor, title, price, inventory status, variant picker, buy buttons, highlights, description, SKU, collapsible tabs and share. App blocks are supported.
Color swatches
Options named Color (or Colour) are shown as round swatches. The theme finds the colour in two ways:
- Shopify swatch data. In the product admin, connect the option to the Color category metafield and pick a colour for each value.
- Theme settings list. Under Theme settings → Color swatches, add one line per colour as
Name: #hex, for exampleSage: #9CAF88. The name must match the option value.
Values without a matching colour, and all other options such as Size, are shown as pills.
Sticky add to cart and zoom
Both are switched on or off in the section settings.
Related products
Recommendations are generated automatically by Shopify. You can adjust them with the free Shopify Search & Discovery app.
7. Collection page and filters
Filters are provided by Shopify. Install the free Shopify Search & Discovery app and choose which filters to show (availability, price, product options, vendor and so on). The theme displays them in a sidebar on desktop and behind a Filters button on mobile.
8. Cart
With the cart type set to Drawer, products are added without leaving the page and the cart slides in from the right. Set it to Page to send customers to the cart page instead.
The free shipping bar is a visual reminder only. Create the matching shipping rate under Settings → Shipping and delivery.
9. Translations
All storefront text lives in locales/en.default.json. To change wording or translate the theme, go to Online Store → Themes → … → Edit default theme content.
10. File structure
| Folder | Contents |
|---|---|
assets | base.css and theme.js |
config | Theme settings schema and data |
layout | theme.liquid and password.liquid |
locales | Translation strings |
sections | All sections and the header/footer groups |
snippets | Reusable partials (product card, price, icons…) |
templates | JSON templates for every page type |
11. Credits
- Fonts: served from the Shopify font library (default: Playfair Display and DM Sans).
- Icons: drawn for this theme and included as inline SVG.
- Images: the theme ships without photographs. Placeholders are Shopify's built-in illustrations. Photographs shown in the live preview are not included.
12. Support
If your question is not covered here, open a ticket. Please include your store address and a description of the issue.
Still stuck? Open a ticket and we will help.