1. Setup in 15 minutes
Main menu with nested items, then add a Mega menu block in the Header for each top-level item that should open a panel (see §4).dewline metafield definitions (see §8) so key ingredients, skin types and how-to-use content appear on product pages.2. Theme settings
Customize → Theme settings (gear icon). These apply to the whole store.
| Group | Settings | Notes |
|---|---|---|
| Colours | Colour schemes, default scheme | Four schemes ship with the theme; edit any colour or add your own. Each section picks a scheme. |
| Logo & SEO | Logo for search engines, default share image, X handle | Used in Google results and link previews. |
| Typography | Heading, body and accent fonts; heading case; size scales | Wrap a word in *asterisks* in any heading to show it in the italic accent font. |
| Layout | Page width, section spacing, corner style | Corner style rounds buttons, cards and images together. |
| Product cards | Image ratio, hover image, quick add, quick view, wishlist heart, skin-type tags, star rating, swatches | Tags new and bestseller add card badges; a compare-at price adds a Sale badge. |
| Skincare | Ingredient glossary popovers, routine builder | — |
| Store features | Predictive search, trending searches, wishlist, recently viewed, sticky add-to-cart, animations, back-to-top | Trending searches: comma-separated, shown before typing. |
| Cart | Drawer or page, express buttons in drawer, free-shipping bar + threshold, order notes, upsell collection, gift wrap product, gift message | Threshold is in your store currency, whole units (e.g. 75). |
| Social media | Instagram, TikTok, YouTube, Pinterest, Facebook | Icons show in the footer when a link is set. |
3. Colour schemes
Every section has a Colour scheme setting. Mix schemes freely — for example a Noir hero above an Ivory product grid.
| Scheme | Look | Typical use |
|---|---|---|
| Ivory | White background, black text, hot-pink accent | Product grids, product page, forms |
| Noir | Black background, pink buttons | Header, hero, footer, ingredient spotlight |
| Blush | Soft pink background, black buttons | Newsletter, quiz, before/after |
| Hot pink | Hot-pink background, black text | Announcement bar, marquee, countdown |
Accessible by default. On light backgrounds Dewline automatically deepens the accent pink for headings and small text so it meets WCAG contrast — even if you pick a lighter accent.
5. Page templates
Create a page in Content → Pages, then pick the template in the Theme template box.
| Page | Template | What you get |
|---|---|---|
| About | page.about | Brand story, values, press, image with text |
| Contact | page.contact | Contact form with details card |
| FAQ | page.faq | Accordion with FAQ rich results for Google |
| Ingredients | page.ingredients | Searchable, filterable ingredient glossary |
| Skin quiz | page.skin-quiz | Question-by-question quiz that recommends a collection |
| Routines | page.routines | AM/PM routine builder and bundle builder |
| Store locator | page.stores | Store list with map, search and opening hours |
| Wishlist | page.wishlist | Saved products (stored in the shopper's browser) |
6. Sections
Add sections from the left sidebar in the theme editor; drag to reorder. Each one has a colour scheme setting.
| Section | Use it for |
|---|---|
| Hero | Full-width image or video, heading, two buttons, round offer badge |
| Scrolling text | USP marquee (cruelty free · vegan · derm tested) |
| Skin concern nav | Round image links to concern collections |
| Featured collection / Collection list | Product row or collection tiles |
| Featured product | One hero product with add to bag; supports app and Custom Liquid blocks |
| Promo tiles | Two or three image tiles with text |
| Ingredient spotlight | Key actives with percentages |
| Clinical results | Big stats from your studies |
| Before / after | Drag-to-compare images |
| Routine builder | AM / PM steps with products |
| Bundle builder | Pick-N bundle with a discount code |
| Shop the look | Image with product hotspots |
| Shoppable videos | Vertical reels with linked products |
| Testimonials · Press logos · Trust badges | Social proof |
| Countdown / promo | Sale timer with a copy-to-clipboard code |
| Comparison table | "Us vs. them" rows |
| Skin quiz · Ingredient glossary · FAQ · Store locator | Also usable on any page |
| Instagram / UGC grid | Image grid; tiles link out if you add a link |
| Newsletter · Newsletter popup | Email signup; popup can reveal a welcome code |
| Blog posts · Rich text · Image with text · Recently viewed | Content and merchandising |
| Custom Liquid · Apps | App snippets, embeds, app blocks |
7. Product page
The product information section is built from blocks you can add, reorder or remove: Text · Title · Rating · Price · Skin type & step · Variant picker · Stock status · Buy buttons · Shade / size guide · Complementary products · Beauty badges · Free-from list · Key ingredients · Description · Collapsible tab · Share · Custom Liquid · app blocks.
Zoom
On desktop, hovering the image shows a magnifier glass (strength 2×–4× in the section settings). Clicking the image, or the zoom button on phones, opens full-screen zoom.
Shades & variants
Options named Shade, Colour or Color show as swatches. Variant images switch the gallery. The Shade / size guide block opens a popup with your own content and image.
Subscriptions
Install a selling-plan app (e.g. Shopify Subscriptions). Plans appear above the buttons with the saving shown, and in the cart.
Pickup, installments, gift cards
Local pickup availability shows per variant when pickup is enabled in Settings → Shipping. Shop Pay Installments appear under the price when enabled in Settings → Payments. Gift card products get a "send as a gift" recipient form.
Share
Round icons for WhatsApp, Facebook, X, Pinterest, email and copy link; phones also get the native share sheet. Turn networks on or off in the Share block.
Reviews
Install any reviews app and add its app block. Star ratings on cards and in Google results use the standard reviews.rating metafields that review apps fill in.
8. Skincare metafields
Settings → Custom data → Products → Add definition. Use namespace dewline and these keys:
| Name | Key | Type | Shows |
|---|---|---|---|
| Key ingredients | dewline.key_ingredients | List of single line text | Ingredient chips on the product page |
| Skin type | dewline.skin_type | List of single line text | Tags on cards and product page |
| Routine step | dewline.routine_step | Single line text (AM, PM or AM / PM) | Card badge, product page |
| Size | dewline.volume | Single line text (e.g. 30 ml) | Next to the price |
| Clinical claim | dewline.clinical_claim | Single line text | Line on product cards |
| Full ingredients | dewline.full_ingredients | Rich text | "Full ingredient list" tab |
| How to use | dewline.how_to_use | Rich text | "How to use" tab |
Importing by CSV? List values can be separated with ; — Dewline splits them for you.
9. Collections, search & filters
Collection and search pages share the same filter panel — a sidebar on desktop or a drawer (your choice), plus active-filter chips and sorting. Filters update without reloading the page. Swatch filters show colours or images.
Pagination can be page numbers, a Load more button, or infinite scroll. The search page groups pages and articles under the product results.
Predictive search shows products, collections and pages as you type, with trending searches before typing.
10. Cart
Choose a slide-out drawer (default) or a cart page in Theme settings → Cart. Both show line and order discounts, unit prices, subscription details, quantity rules and order notes.
- Free-shipping bar — set the threshold in your store currency.
- Upsell — pick a collection; products already in the cart are skipped.
- Gift wrap & message — pick a gift-wrap product to offer it as a checkbox.
- Express checkout — Shop Pay, Apple Pay, PayPal and other wallets show on the cart page (and optionally in the drawer).
11. Quiz, bundles & promos
- Skin quiz — add Question blocks and write one answer per line as
Answer label|result-key(e.g.Tight and flaky|dry). Then add a Result block for each key with a title, text and recommended collection. The result picked most often wins. - Bundle builder — set items per bundle and the discount shown, then create the matching discount code in Discounts (e.g. 15% off, minimum 3 items) and enter it in the section. It's applied automatically at checkout.
- Countdown — set the end date and time and an optional code shoppers can tap to copy.
- Newsletter popup — choose delay and frequency; the code is revealed after signup. Create the code in Discounts.
- Cookie banner & age gate — the cookie banner uses Shopify's Customer Privacy API; the age gate is optional.
12. Recommended apps
Free, by Shopify. Filters, synonyms, related and complementary products.
Free. Subscribe-and-save plans appear natively.
Judge.me, Loox, Okendo… add their app block to the product page.
Free. The language selector appears automatically when you add a language.
Built in. Country / currency selector appears when you sell to several markets.
Free live chat.
FAQ
Products don't show on the homepage
Click the section and choose a collection. Make sure products are Active and published to the Online Store sales channel.
The mega menu doesn't open
Add a Mega menu block in Header and type the menu item's title exactly as it appears in Content → Menus. The item also needs child links.
Key ingredients or skin types aren't showing
Create the metafield definitions in §8 with namespace dewline, then fill them on each product.
The filter button shows nothing
Install Shopify Search & Discovery and turn on at least one filter. Filters appear within a minute.
The bundle or popup discount isn't applied at checkout
The theme only displays the code. Create the code with the same name in Discounts, and check its minimum quantity and dates.
How do I make a word in a heading pink and italic?
Wrap it in asterisks: Glow *different*.
Can I use my own fonts?
Pick any font from Shopify's font library in Theme settings → Typography. Custom font files aren't supported in Theme Store themes.
Where is the wishlist saved?
In the shopper's browser, so no account is needed. It shows on the Wishlist page and as a counter in the header.
Checkout doesn't match my theme colours
Checkout is hosted by Shopify. Match colours, fonts and logo in Settings → Checkout → Customize.
How do I get updates?
When a new version is released, an Update button appears in Online Store → Themes. Your settings and content are kept.
Support
We reply within 2 business days (usually the same day, Mon–Sat 10am–7pm IST). Please include your store URL and the page where you see the issue.
Email: info@trinityinfo.in
WhatsApp: +91 81281 20160
Or email info@trinityinfo.in, message us on WhatsApp, or open a public ticket on GitHub.
Changelog
1.0.0 — First public release: mega menu, magnifier zoom, skin quiz, routine and bundle builders, ingredient glossary, store locator, wishlist, quick view, predictive search, filters on collection and search, cart drawer with discounts and free-shipping bar, Shopify account component, Custom Liquid, app blocks, WCAG 2.1 AA checks.