Theme documentation · v1.0.0

Set up Dewline. Glow different.

Dewline is a Shopify Online Store 2.0 theme for beauty and skincare brands. It includes a mega menu, ingredient-led product pages, a skin quiz, routine and bundle builders, a magnifier zoom, a wishlist, quick view and more. Everything is set up in the theme editor, with no code.

Start setupContact support

1. Setup in 15 minutes

1
Install. Online Store → Themes → add Dewline from the Theme Store (or upload the zip). Use Customize to preview, and Publish when you're ready.
2
Logo & colours. Customize → Header → Logo. Then Theme settings (gear icon) → Colours and Typography.
3
Menus. Content → Menus. Build 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).
4
Pages. Content → Pages → Add page, and choose the matching template — About, Contact, FAQ, Ingredients, Skin quiz, Routines, Store locator or Wishlist (see §5).
5
Product details. Create the dewline metafield definitions (see §8) so key ingredients, skin types and how-to-use content appear on product pages.
6
Filters. Install the free Shopify Search & Discovery app and switch on the filters you want. Dewline shows them on collection and search pages automatically.
7
Homepage. Customize → Home page. Click each section to pick collections, products and images. Sections show tasteful placeholders until you do.
8
Discount codes. If you use the bundle builder, countdown or newsletter popup, create the matching discount codes in Discounts (see §11).

2. Theme settings

Customize → Theme settings (gear icon). These apply to the whole store.

GroupSettingsNotes
ColoursColour schemes, default schemeFour schemes ship with the theme; edit any colour or add your own. Each section picks a scheme.
Logo & SEOLogo for search engines, default share image, X handleUsed in Google results and link previews.
TypographyHeading, body and accent fonts; heading case; size scalesWrap a word in *asterisks* in any heading to show it in the italic accent font.
LayoutPage width, section spacing, corner styleCorner style rounds buttons, cards and images together.
Product cardsImage ratio, hover image, quick add, quick view, wishlist heart, skin-type tags, star rating, swatchesTags new and bestseller add card badges; a compare-at price adds a Sale badge.
SkincareIngredient glossary popovers, routine builder—
Store featuresPredictive search, trending searches, wishlist, recently viewed, sticky add-to-cart, animations, back-to-topTrending searches: comma-separated, shown before typing.
CartDrawer or page, express buttons in drawer, free-shipping bar + threshold, order notes, upsell collection, gift wrap product, gift messageThreshold is in your store currency, whole units (e.g. 75).
Social mediaInstagram, TikTok, YouTube, Pinterest, FacebookIcons 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.

SchemeLookTypical use
IvoryWhite background, black text, hot-pink accentProduct grids, product page, forms
NoirBlack background, pink buttonsHeader, hero, footer, ingredient spotlight
BlushSoft pink background, black buttonsNewsletter, quiz, before/after
Hot pinkHot-pink background, black textAnnouncement 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.

PageTemplateWhat you get
Aboutpage.aboutBrand story, values, press, image with text
Contactpage.contactContact form with details card
FAQpage.faqAccordion with FAQ rich results for Google
Ingredientspage.ingredientsSearchable, filterable ingredient glossary
Skin quizpage.skin-quizQuestion-by-question quiz that recommends a collection
Routinespage.routinesAM/PM routine builder and bundle builder
Store locatorpage.storesStore list with map, search and opening hours
Wishlistpage.wishlistSaved 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.

SectionUse it for
HeroFull-width image or video, heading, two buttons, round offer badge
Scrolling textUSP marquee (cruelty free · vegan · derm tested)
Skin concern navRound image links to concern collections
Featured collection / Collection listProduct row or collection tiles
Featured productOne hero product with add to bag; supports app and Custom Liquid blocks
Promo tilesTwo or three image tiles with text
Ingredient spotlightKey actives with percentages
Clinical resultsBig stats from your studies
Before / afterDrag-to-compare images
Routine builderAM / PM steps with products
Bundle builderPick-N bundle with a discount code
Shop the lookImage with product hotspots
Shoppable videosVertical reels with linked products
Testimonials · Press logos · Trust badgesSocial proof
Countdown / promoSale timer with a copy-to-clipboard code
Comparison table"Us vs. them" rows
Skin quiz · Ingredient glossary · FAQ · Store locatorAlso usable on any page
Instagram / UGC gridImage grid; tiles link out if you add a link
Newsletter · Newsletter popupEmail signup; popup can reveal a welcome code
Blog posts · Rich text · Image with text · Recently viewedContent and merchandising
Custom Liquid · AppsApp 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:

NameKeyTypeShows
Key ingredientsdewline.key_ingredientsList of single line textIngredient chips on the product page
Skin typedewline.skin_typeList of single line textTags on cards and product page
Routine stepdewline.routine_stepSingle line text (AM, PM or AM / PM)Card badge, product page
Sizedewline.volumeSingle line text (e.g. 30 ml)Next to the price
Clinical claimdewline.clinical_claimSingle line textLine on product cards
Full ingredientsdewline.full_ingredientsRich text"Full ingredient list" tab
How to usedewline.how_to_useRich 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

Search & Discovery

Free, by Shopify. Filters, synonyms, related and complementary products.

Shopify Subscriptions

Free. Subscribe-and-save plans appear natively.

Product reviews

Judge.me, Loox, Okendo… add their app block to the product page.

Translate & Adapt

Free. The language selector appears automatically when you add a language.

Shopify Markets

Built in. Country / currency selector appears when you sell to several markets.

Shopify Inbox

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.