Magnus Theme Documentation

How Magnus shows product details

Magnus shows scent notes, routine steps, qualities and scent ratings for each product. You can set these in two ways:

• Product tags (quickest): add a tag like Scent: Cedar · Vetiver · Pine or Woody: 4 to a product in your Shopify admin. No setup needed. See the product tags reference.
• Metafields (more structured): create a product metafield, fill it in for each product, then connect it to the matching block setting in the theme editor.

Anything you type directly into a product block setting in the theme editor applies to every product that uses that template. Use tags or metafields for details that differ from product to product.

Getting started

Add Magnus to your store

1. In your Shopify admin, go to Online Store → Themes.
2. Add Magnus from the Shopify Theme Store. It appears in your theme library.
3. Select Customize to set it up before publishing. Your current theme stays live until you publish Magnus.
4. When you're ready, select Publish in the theme library.

First steps in the theme editor

Work through these in order and your store will look like yours in about half an hour.

1. Add your logo

Theme settings → Logo and favicon

• Upload your logo. A .png or .svg with a transparent background works best.
• Set Logo width. This is the largest the logo will show. Square and tall logos are kept to a sensible height automatically, so they never stretch the header.
• Upload a square Favicon (the small icon in the browser tab).

If you don't add a logo, your store name shows in the heading font.

2. Set your colors

Theme settings → Colors

Magnus comes with four color schemes:

Each scheme has a background, surface (inset panels and inputs), text, muted text, border, divider, secondary button and accent color. The accent is used for primary buttons, highlights and routine step numbers.

Every section has a Color scheme setting, so you can mix schemes down the page. The defaults all meet accessibility contrast guidelines; if you change colors, keep text clearly readable against its background.

3. Choose your fonts

Theme settings → Typography

• Heading font defaults to Barlow Condensed Bold. Condensed, sturdy typefaces suit Magnus best.
• Heading case can be uppercase (the default) or as entered.
• Body font defaults to Chivo.
• Size scales let you make headings or body text larger or smaller across the store.

4. Set up your menus

In your Shopify admin, go to Online Store → Navigation:

• Main menu shows in the header. Magnus supports up to three levels: top-level links, dropdown links and a third level inside each dropdown.
• Footer shows in the footer menu column.

5. Build your home page

Open the home page in the theme editor. Magnus starts with a suggested layout:

1. Hero
2. Featured collection
3. Routine rail
4. Image with text
5. Kit breakdown
6. Scent map
7. Collection list
8. Field notes
9. Rich text
10. Featured product

Replace the sample text, add your images, and choose your collections and products. See Home page sections for what each section does.

6. Tag your products

Add scent notes, routine steps, qualities and scent ratings to your products with tags. See the product tags reference.

Tips for great-looking pages

• Use large images. Upload photos at least 2000px wide for full-width sections like the hero. Shopify creates the smaller sizes automatically.
• Set focal points. In Content → Files, you can set a focal point on an image so the important part stays in view when it's cropped.
• Keep headings short. The heading font is bold and condensed; short, punchy headings look best.

Theme settings

Open the theme editor and select the gear icon (Theme settings) to change settings that apply across your whole store.

Colors

Magnus has four color schemes. Each one sets:

Choose a scheme for each section with its Color scheme setting.

Typography

• Heading font and Body font: choose from the Shopify font library. Bold, italic and bold italic styles load automatically.
• Heading size scale (80–130%) and Body text size scale (90–120%): make text larger or smaller everywhere.
• Heading case: uppercase or as entered.

Layout

• Page width: narrow or wide. Sets the maximum width of page content.
• Page margin: space at the left and right edges of the page.
• Section spacing: space above and below sections on desktop. It scales down on smaller screens.
• Show contour lines: the faint topographic line pattern behind the hero, routine rail, rich text and other sections. Turn it off for a plainer look.

Logo and favicon

• Logo: shows in the header, and in the footer when the footer text block's Show logo is on.
• Logo width: the largest the logo shows. Tall and square logos are capped in height so they fit the header.
• Favicon: the icon in the browser tab. Use a square .png image; it displays at 32 x 32px.

Product cards

These settings control the trail tag and routine step on product cards across your store (collections, search, featured collection and related products).

• Show trail tag: shows a product's scent notes as a tag-shaped label on its card image.
• Scent notes tag prefix (default Scent:): Magnus reads scent notes from a product tag that starts with this prefix. A product tagged Scent: Cedar · Birch · Pepper shows "Cedar · Birch · Pepper".
• Show routine step: shows where a product fits in the routine, above its title.
• Routine step tag prefix (default Step:): a product tagged Step: 02 Condition shows "Step 02 · Condition".

See the product tags reference for more.

Social media

Add the full links to your social media profiles (Instagram, YouTube, Facebook, TikTok, X, Pinterest, Vimeo). Icons show in the footer for every link you add.

Header and footer

The header and footer appear on every page. Edit them in the theme editor under Header and Footer in the section list.

Top bar

A slim bar above the header for one announcement, like a shipping offer.

• Text: your announcement. It's centered on the page.
• Link: optional. Makes the whole announcement a link.
• Show country/region selector and Show language selector: show selectors at the right of the top bar. They only appear when your store sells in more than one country/region or language (set these up in Settings → Markets and Settings → Languages). On mobile, selectors move into the menu drawer.

To remove the top bar, hide or delete the section.

Header

• Enable sticky header: keeps the header visible while customers scroll.
• Show search suggestions: shows matching products, collections, pages and articles as customers type in search.
• Main menu: the menu shown in the header. Dropdowns open on click and work with the keyboard.
• Customer account menu: links shown when customers select the account icon.
• Show country/region selector and Show language selector: show selectors beside the header icons on desktop.

On mobile

The main menu moves into a drawer that opens from the menu button. Dropdown links expand inside the drawer. The logo shrinks to fit so the search, account and cart icons always stay on screen.

Search

The search icon opens a search panel. With search suggestions on, results appear as customers type:

• suggested searches
• products, with image and price
• collections, pages and articles
• a "Search for …" link to the full results page

Customers can move through suggestions with the arrow keys and open one with Enter.

Cart icon

The cart icon shows a small count badge when there's something in the cart.

Footer

The footer is built from blocks. Each block is a column; add, remove and reorder them:

You can also add app blocks.

Footer settings

• Show country/region selector and Show language selector
• Show Follow on Shop: lets customers follow your store in the Shop app. Requires Shop Pay.
• Show payment icons: shows icons for the payment methods your store accepts.

The bottom bar also shows your copyright and "Powered by Shopify".

Home page sections

You can add these sections to your home page and to any other page built with sections. In the theme editor, select Add section and choose one. Every section has a Color scheme setting.

Hero

A large opening image with your headline and up to two buttons.

• Image: use a photo at least 2400px wide. Without an image, the section shows the contour line pattern on the color scheme's background.
• Mobile image: optional. Shows on screens narrower than 750px, so you can use a crop that suits phones.
• Overlay opacity: tints the image with the color scheme's background so text stays readable. Increase it for busy photos.
• Height: small, medium, large or full screen.
• Horizontal position and Vertical position: where the text sits.
• Subheading, Heading, Text, Button label and Button link, plus an optional second button.
• Corner label: short text in the bottom corner, like the coordinates of your workshop.

When the hero is the first section on the page, its heading is the page's main heading, and its image loads first.

Featured collection

A grid of products from one collection.

• Collection and Products to show (2–12).
• Show link to collection and Link label: a link beside the heading.
• Image ratio: portrait, square or original.
• Columns on desktop (2–5).
• Mobile layout: a grid, or a row customers swipe through. With grid, choose one or two Columns on mobile.

Until you choose a collection, placeholder cards show so you can see the layout.

Routine rail

Walks customers through your grooming routine, step by step. Each step is numbered and joined to the next by a trail line: across the page on desktop, down the page on mobile.

• Subheading, Heading, Text, Link label and Link for the section.
• Add up to six Step blocks. Each step has:
  • Step name, like "Cleanse"
  • Time, like "2 min" (leave blank to hide)
  • Text: what the step does or a tip
  • Product: the product for this step, shown as a small card customers can select

Steps are numbered automatically in the order you arrange them.

Image with text

An image beside a heading, text and a button.

• Image, Image ratio and Image position on desktop (left or right). On mobile, the image shows above the text.
• Trail tag: an optional tag-shaped label on the image, like a product name or place.
• Subheading, Heading, Text, Button label and Button link. The button shows when both the label and link are set.
• Add up to six Detail blocks: label and value rows in a spec-sheet style, like "Made in · Montana".

Kit breakdown

Shows what's inside a kit or bundle: a large image with numbered pins, beside a numbered list of the kit's contents.

• Kit product: the product customers add to cart. On a product page, leave it blank to use that page's product.
• Image: a flat lay photo of the kit works best. Uses the kit product's image when blank.
• Show numbered pins on the image and Show kit name on the image.
• Show price compared with buying separately: shows "Bought separately", "Kit price" and "You save", calculated from your real prices. It only shows when every item has a product and the kit costs less than its items bought separately.
• Add up to ten Item blocks. Each item has:
  • Product
  • Role: a short label, like "Cleanse" or "Shape"
  • Quantity in kit
  • Horizontal position and Vertical position: where its numbered pin sits on the image

Hovering over an item in the list highlights its pin. The button adds the kit to the cart, or links to the kit's product page when it has options to choose.

Scent map

Groups your scents into families and plots them on an illustrated trail map, with a list beside it.

• Add up to eight Scent family blocks. Each has:
  • Name, like "Woodland"
  • Notes, separated with a middle dot, like "Cedar · Vetiver · Pine"
  • Text: when the scent works best
  • Link label and Link: usually to a collection of that scent
  • Horizontal position and Vertical position: where its pin sits on the map

Hovering over a family in the list highlights its pin on the map.

Collection list

A row of collection cards. Each card shows the collection image (or its first product's image when it has none), the title and the number of products.

• Add up to twelve Collection blocks and choose a collection for each.
• Link label: links to the page listing all your collections.
• Columns on desktop and Image ratio.

Field notes

Your latest blog posts, laid out like a logbook: a large date, the title and excerpt, and a thumbnail.

• Blog: uses your News blog when blank.
• Articles to show (2–6).
• Show featured image and Show excerpt.
• Link label: links to the blog.

The section hides itself on your store when the blog has no articles.

Rich text

A short statement, like your brand's values, with an optional button, over the contour line pattern.

• Alignment: left or center.
• Subheading, Heading, Text, Button label and Button link.

Featured product

The full product page layout for one product, anywhere on your store: media gallery, price, variant picker, buy buttons and more. It supports video, YouTube, Vimeo and 3D models.

• Product
• Media width on desktop and Media position on desktop.
• Show link to product page.
• Add, remove and reorder the same blocks as the product page, plus app blocks.

Contact form

A contact form with name, email, phone number and message fields. Messages are sent to your store's sender email (Settings → Notifications). Customers see a confirmation after sending.

• Heading and Text.

Custom Liquid and custom section

• Custom Liquid: add app snippets or your own Liquid code.
• Custom section: a flexible section you build from blocks like text and group, with an optional background image.

Product page

Open a product in the theme editor (use the page selector at the top, then Products → Default product). The product page has two sections: Product information and Related products.

Changes to the product template apply to every product that uses it. To give some products a different layout, create a new template from the page selector and assign it to those products in your Shopify admin.

Product information

Section settings

• Media width on desktop: wide (media takes more space) or medium (an even split).
• Enable sticky product information: keeps the product details in view while customers scroll through the media on desktop.

Media gallery

The gallery always sits in the media column. It shows images, videos, YouTube and Vimeo videos, and 3D models. Customers can swipe between media or use the arrows and thumbnails. When a customer chooses a variant with its own image, the gallery moves to that image.

• Aspect ratio: square, portrait, or adapt to the first media item.
• Media fit: fit (shows the whole image) or fill (crops to fill the frame).
• Show thumbnails.
• Show trail tag and Trail tag text: shows the product's scent notes as a tag on the media. Leave the text blank to use the product's Scent: tag, or connect a metafield.

Blocks

Add, remove and reorder these blocks in the product information column:

App blocks can be added too.

Qualities

A row of round icon badges that highlight what makes a product special.

Each badge has an Icon, a Label and a Show setting. There are eleven icons: leaf, paw, drop, free from, refill, hand, shield, clock, mountain, snowflake and check mark.

To show a badge on some products only, leave Show off and add a product tag that matches the badge's label. For example, tag a product Cruelty free to show the "Cruelty free" badge on it. Letter case and spaces don't matter, so cruelty-free works too.

To show a badge on every product, turn Show on.

You can also connect Show to a true/false product metafield.

In the theme editor, badges that are hidden for the product you're previewing show faded, with a hint.

Scent profile

Rating bars, drawn as a five-segment gauge, that describe a product's scent or other qualities, like "Woody" or "Fresh".

Each bar has a Label and a Value from 0 to 5. Half values like 3.5 work.

To set ratings per product, leave Value blank and add product tags that start with the label, like Woody: 4 or Sweet: 3.5. Bars without a rating are hidden, so each product only shows the ratings you've set for it.

Anything you type in Value in the theme editor applies to every product using the template. You can also connect Value to a product metafield.

You're not limited to scents: rename the heading and bars to rate anything, like "Hold" and "Shine" for a styling product.

Field notes

A spec sheet of label and value rows, like "Scent notes", "Finish" or "Lasts about". Connect each row's Value to a product metafield so each product shows its own details. Rows without a value are hidden.

Related products

Shows products related to the one being viewed, based on customer behavior and product details. Shopify's recommendations improve over time as your store gets traffic. Customize them with the Search & Discovery app.

• Subheading and Heading.
• Products to show (2–10), Columns on desktop and Image ratio.

The section hides itself when there are no recommendations for a product. On a new store with few products, some products may not have recommendations yet.

Collections and search

Collection page

Shows a collection's products with filters and sorting.

Settings

• Show collection image and Show collection description: shown above the products.
• Products per page (8–48).
• Columns on desktop (2–5) and Columns on mobile (one or two).
• Image ratio: portrait, square or original. Cards with portrait or square keep a tidy grid even when your product photos have different shapes.
• Show filters and Show sorting.

Filters

Filters open in a panel from the Filter button. Customers choose filters and select Apply filters; active filters show as removable tags above the products.

Set up which filters appear with Shopify's free Search & Discovery app. You can filter by availability, price, product type, vendor, tags, variant options like size, and metafields.

The filter button only shows when the collection has filters to offer.

Product cards

Each product card shows:

• the product image, with a second image on hover when the product has one
• a Sale or Sold out tag
• a trail tag with scent notes (from the Scent: tag)
• the routine step (from the Step: tag)
• the product title and price, including "From" when variants have different prices, and unit prices

Trail tags and routine steps can be turned off in Theme settings → Product cards.

Collection list page

The page at /collections that lists all your collections, with an image, title and product count for each. A collection without its own image uses its first product's image.

• Collections per page, Columns on desktop and Image ratio.

Search

Search suggestions

When Show search suggestions is on in the header settings, results appear as customers type in the header search. See Header and footer.

Search results page

Shows products, articles and pages that match a search. Products use the same cards as collections; articles and pages show as text cards labeled "Article" or "Page".

• Results per page, Columns on desktop and Image ratio.
• Show filters and Show sorting. Filters work the same way as on collection pages and apply to product results.

When nothing matches, customers see a message with a link to browse all products.

Cart

Magnus uses a cart page at /cart. When customers add a product, they go to the cart page.

What the cart shows

For each item:

• image, title and vendor (when it's different from your store name)
• chosen options, like size, and any custom details added by apps
• subscription plan, when the item has one
• price each, with the original price struck through when discounted, and unit price
• discounts applied to that item
• a quantity selector that follows the product's quantity rules, a Remove link and the line total

The Order summary shows:

• subtotal and order discounts, when an order discount applies
• the estimated total
• a note about taxes and shipping
• the order note
• the Checkout button and dynamic checkout buttons, like Shop Pay and Apple Pay

When customers change a quantity or remove an item, the cart updates without reloading the page, and the cart icon count in the header updates too. If an item has less stock than requested, the quantity is lowered to what's available and customers see a message.

When the cart is empty, customers see a message and a Continue shopping button.

Settings

• Show cart note: lets customers add special instructions. The note saves as they type.
• Show dynamic checkout buttons: shows accelerated checkout buttons for the payment methods your store offers.

Discounts

Automatic discounts and discount codes show in the cart:

• Item discounts, like "Buy 2, get 10% off", show under the item with the amount saved.
• Order discounts, like "$10 off orders over $50", show in the order summary.

Customers enter discount codes at checkout.

Blog, pages and other templates

Blog

Your blog's articles as a grid of cards, with tag links for browsing.

• Articles per page (3–24) and Columns on desktop (2–4).
• Show first article larger: shows the newest article as a wide lead card on the first page.
• Show tag links: links to browse articles by tag. Add tags to articles in your Shopify admin.
• Article cards: show or hide the featured image, date, author and excerpt, and choose the image ratio.

To show your latest articles on the home page, add the Field notes section.

Article

• Shows the article's tags, title, date, author, featured image and content.
• Image height: adapt to the image, small or medium.
• Show or hide the featured image, tags, date and author.

Comments

When comments are turned on for the blog (Online Store → Blog posts → Manage blogs), articles show their comments, ten per page, and a comment form. After posting, customers see a confirmation. If comments need your approval, the message tells them their comment will show once it's approved.

Pages

Pages like "About us" show their title and content. Choose a color scheme in the page section settings.

Contact page

Magnus includes a page.contact template with a contact form.

1. In your Shopify admin, go to Online Store → Pages and create a page, like "Contact".
2. In Theme template, choose contact.
3. Save. The page shows your page content, then the contact form.

Messages go to your store's sender email (Settings → Notifications). You can also add the Contact form section to any other page.

404 page

Shown when a customer visits a page that doesn't exist. It shows a large "404", a short message, a search box and a button back to your products.

Password page

Shown while your store is password protected (Online Store → Preferences → Password protection). It shows:

• your logo or store name
• a heading (default "Opening soon") and the message you set in your password protection settings
• an optional email signup, so customers can hear when you open
• an Enter using password link for people who have the password

Gift card page

Customers reach this page from the email they get with a gift card. It shows a card with your logo or store name, the balance, the gift card code with a copy button, a QR code for use in store, and the expiry date. Customers can add it to Apple Wallet or print it.

Product tags reference

Magnus reads some product details from product tags, so you can set them per product without creating metafields. Add tags to a product in your Shopify admin under Products → [product] → Tags.

Letter case doesn't matter in any of these tags.

Scent notes

• Tag format: Scent: followed by the notes.
• Separate notes with a middle dot (·) for the look used across Magnus: Scent: Cedar · Birch · Pepper.
• Change the prefix in Theme settings → Product cards → Scent notes tag prefix. For example, set it to Notes: if you already tag products that way.

Routine step

• Tag format: Step: followed by a number and a name.
• A value that starts with a number shows as "Step 02 · Condition". A value without a number shows as written.
• Change the prefix in Theme settings → Product cards → Routine step tag prefix.

Qualities

• Tag a product with the exact label of a badge, like Plant-based or Handmade.
• Spaces, hyphens and letter case are ignored when matching, so plant based, Plant-based and plant-based all work.
• If you rename a badge in the theme editor, tag products with the new name.

Scent profile ratings

• Tag format: the bar's label, a colon, and a number from 0 to 5: Woody: 4.
• Half values work: Sweet: 3.5.
• Fresh: 4/5 also works; Magnus reads the first number.
• Values above 5 show as 5.
• If you rename a bar in the theme editor, use the new name in the tags, like Hold: 3.

Using metafields instead

On the product page, you can use metafields instead of tags:

1. In your Shopify admin, go to Settings → Custom data → Products and add a metafield definition, like "Scent notes" (single line text) or "Woody rating" (integer).
2. Fill it in on each product.
3. In the theme editor, open the block setting (for example, Trail tag text in the media gallery, Routine step, or a bar's Value in the scent profile), select the Connect dynamic source icon, and choose your metafield.

When a connected metafield has a value, Magnus uses it instead of the tag. For quality badges, a connected true/false metafield and a matching tag each switch the badge on.

Product cards always use tags. The trail tag and routine step on product cards in collections, search and other grids come from the Scent: and Step: tags, even if you use metafields on the product page. If you want them on cards, keep the tags too.

Frequently asked questions

Setup

How do I change the colors of one section?
Every section has a Color scheme setting. Choose one of the four schemes, or edit the schemes in Theme settings → Colors.

How do I remove the topographic line pattern?
Turn off Theme settings → Layout → Show contour lines.

My logo looks too small or too large.
Adjust Theme settings → Logo and favicon → Logo width. Square and tall logos are limited in height to keep the header tidy, so for those, a logo image with little empty space around it works best.

How do I add a dropdown menu?
In Online Store → Navigation, open your main menu and drag links under another link to nest them. Magnus supports three levels.

Products

Why is the same scent profile or badge showing on all my products?
A value typed into a product block in the theme editor applies to every product using that template. Clear the value, and set ratings and badges per product with tags (like Woody: 4 or Cruelty free) or metafields. See the product tags reference.

Why don't I see the Scent profile or Qualities block on a product?
Bars and badges only show on products that have a rating or tag for them. If a product has none, the block hides. In the theme editor, hidden ones show faded with a hint.

Why aren't related products showing?
Shopify builds recommendations from your store's products and customer activity. New stores, or products with few similar products, may not have recommendations yet. The section hides until there are some. You can set related and complementary products yourself with the Search & Discovery app.

How do I show "Pairs with" products?
Choose complementary products for each product in the Search & Discovery app, then add the Complementary products block to the product page.

Can I sell a kit or bundle?
Create the kit as its own product (or use a bundles app), then add the Kit breakdown section to show what's inside. Choose the kit as the Kit product and add an item for each product in it.

Why isn't the "You save" price showing in the kit breakdown?
It only shows when every item has a product chosen and the kit costs less than the items bought separately.

Collections and search

How do I add filters?
Install Shopify's free Search & Discovery app and choose your filters there. They appear in the Filter panel on collection and search pages.

Why doesn't the Filter button show on a collection?
It only shows when the collection has filters available. Check your filters in the Search & Discovery app.

Cart and checkout

Can customers enter a discount code in the cart?
Customers enter discount codes at checkout. Automatic discounts show in the cart.

Where do cart notes go?
The note is saved with the order. You'll see it on the order in your Shopify admin.

Languages and currencies

How do I show a country or language selector?
Selectors show when your store sells in more than one country/region (Settings → Markets) or language (Settings → Languages). Turn them on in the top bar, header or footer settings. On mobile they're in the menu drawer.

Can I change the text customers see, like "Add to cart"?
Yes. In Online Store → Themes → … → Edit default theme content, search for the text and change it.

Support

We're here to help you get the most out of Magnus.

Before you contact us

Many questions are answered in this documentation and the FAQ. Shopify Support can also help with questions about your Shopify account, payments, domains, shipping and apps.

Contact us

Use our support form: https://webdev-japan.com/pages/magnus-support

Please include:

• your name and email
• your store URL (like your-store.myshopify.com)
• a description of the problem, and the steps to see it
• screenshots or a screen recording, if you can

You'll get an automatic confirmation, and we reply within two business days.

What's included

Magnus support covers:

• help setting up and using the theme's settings, sections and blocks
• questions about how a feature works
• fixing bugs in the theme

What's not included

• changes to the theme's code, or custom features
• problems caused by edits to the theme's code, or by apps
• help with apps and services from other developers
• design, content or marketing work for your store

Editing the theme code

We don't provide tutorials for custom code changes, and changes to the theme's code aren't covered by support.

If you do edit the code:

• Duplicate your theme first. In Online Store → Themes, select the … button next to Magnus and choose Duplicate, then make your changes in the copy. You can go back to the original at any time.
• Edited themes can't always be updated automatically, so keep a note of what you changed.

For custom features or design changes, we recommend hiring a Shopify Partner. You can find one in the Shopify Partner Directory.

Updates

We release updates to fix bugs and improve Magnus. You can update from your theme library in Online Store → Themes. Updates keep your settings and content.

Support hours

Monday to Friday, 9 am to 6 pm Japan Standard Time (JST)