Setup guide

This guide takes you from a freshly added theme to a published one. Everything happens in the Shopify theme editor. There is no code to write and no metafields to define first, so your products work as they are.

Follow the steps in order. Each one builds on the step before it.

1. Add Lapels to your store

Lapels installs from the Shopify Theme Store and stays unpublished until you publish it. You can set up and preview the whole theme on your real catalog without touching the storefront customers see.

For the install steps and the difference between Customize, Preview, and Publish, see Install & update.

Tip

Keep your current live theme in place while you set Lapels up. Publishing swaps the live theme, but it never deletes the old one. You always have a way back.

2. Recommended setup order

1. 1 Brand
2. 2 Colors
3. 3 Typography & layout
4. 4 Menus, header & footer
5. 5 Homepage
6. 6 Product page & cart

1 Brand

Theme settings → Brand. Wordmark, tagline, logos, favicon, sharing image. Almost everything else falls back to these.

2 Colors

Theme settings → Colors. The six color schemes every section picks from. This is the widest-reaching setting in the theme.

3 Typography & layout

Theme settings → Typography and → Layout. Four fonts, the type scale, page width, and section spacing. Settle these before you fill pages.

4 Menus, header & footer

Online Store → Navigation, then the Header and Footer sections. Do this so navigation is ready when you preview pages.

5 Homepage

The Home page template. Fill in, hide, reorder, or remove sections. The layout ships populated, and you replace the placeholder content.

6 Product page & cart

A product in the page selector, then Cart type and the cart drawer’s own options.

← Back

Next →

Every setting below lives in the theme editor (Customize) unless stated otherwise. Open a step to read it.

Expand all

1

Brand

In Theme settings → Brand, set your Wordmark, Tagline, Default logo, Inverse logo, Favicon, and Sharing image. Leave a field blank and it falls back to your Shopify brand assets, then to your store name. The storefront is never unbranded.

The Inverse logo matters if your header sits over the home page hero or a dark scheme. Without one, those places show your wordmark instead of a logo.

Lapels is also happy with no logo image at all. Set only the Wordmark, and the header, footer, and password page set your name in type. That is how the default styling is designed to read.

Full reference: Brand.

2

Colors

Lapels has no single global accent color. It ships six color schemes: four light (paper, ecru, mat, editorial) and two dark (dusk, night). Every section, drawer, and dialog picks one. Alternating schemes down a page is how the theme builds rhythm without adding boxes or borders.

Edit them under Theme settings → Colors. Each scheme holds seventeen fields, grouped as background and text, buttons, and accents and states.

Two settings below the schemes choose what the overlays use. Popup and dialog color scheme covers the search drawer, suggestions, and the country and language picker. Drawer color scheme covers the cart drawer, quick view, newsletter popup, and pickup availability. Both default to paper. The image viewer, age gate, and password page take a third scheme, set under Theme settings → Modals.

Caution

The accent lives inside each scheme rather than in one global field. So your brand color has to be set in every scheme you use, in the Primary button, Button hover, and Focus ring fields. Change it in one scheme only and buttons will shift color as a shopper scrolls.

Full reference: Colors.

3

Typography and layout

Theme settings → Typography uses four font roles rather than the usual two. Heading is Fraunces. Subheading and Body are Alegreya. Mono is Jost, used for labels, size tags, and buttons set in that face.

Below them, four stacks of controls set the type scale: Font size, Line height, Letter spacing, and Case, for each heading level plus paragraphs. The sizes shown are the desktop figures. Every one scales down to fit smaller screens.

Then Theme settings → Layout sets three things. Page width is Narrow, Normal, or Wide, and ships as Narrow. Section spacing runs from Compact to Spacious, and any section can override it. The rest are grid gaps.

Two neighboring groups finish the look. Buttons sets border, radius, font, and case. Corners sets inputs, media, cards, badges, and swatches. Lapels draws almost every corner square, so soften these only if your brand asks for it.

Full reference: Typography · Layout · Buttons & corners.

4

Menus, header, and footer

Build your menus first (see Build your navigation menus), then wire them into the chrome.

1. Open the Header section and set Main menu. It points at the main-menu menu Shopify creates for every store. Add Mega menu blocks for the drop-downs that need columns, images, or a promotion panel. Each block names the top-level item it belongs to.
2. Decide the header’s behavior. Keep the header in view is on, and Sit over the home page hero is off. Turn the second on if your home page opens on a full-bleed image, which is where the Inverse logo earns its place. Blur strength appears with it.
3. Choose what the header carries. Show search and Show the account link are on. The country and currency and language selectors stay off until you sell across markets.
4. Open the Footer section. It is three fixed columns you fill with blocks, on the night scheme, with payment icons on. Point each menu block’s Footer menu at the right menu. The social row carries no links of its own. It draws whatever you set under Theme settings → Social media.

To run a promotional line above the header, add the Announcement bar section to the header group. It rotates, scrolls, or stands static, and holds up to five messages.

Full reference: Header · Navigation menus · Announcement bar · Footer.

5

Build the homepage

Lapels ships the Home page template pre-populated with thirteen sections, so you can see the theme’s range in one scroll. The product, collection, and image references inside them are deliberately empty.

Open it in the editor. It loads by default when you click Customize. Work down the list, adding, hiding, reordering, or removing sections to suit your store. For what ships and what each section does, see Homepage and the Sections reference.

Tip

You do not have to keep every section. Hide the ones you are not ready to fill and bring them back later. In the editor, a section whose product, collection, or image field is still empty draws a worked example so you can see its shape and spacing. That example is editor-only and never reaches a shopper.

Lapels ships no separate demo data pack to import. Its three theme presets, Lapels, Kaolin, and Damascene, carry global settings and color schemes only. Re-selecting one restyles the theme without touching a word of your section content. See the FAQ for moving an installed copy toward another preset.

6

Product page and cart

Switch the editor’s page selector to a collection, then a product. The product template is two fixed columns you fill with blocks. Media holds the gallery and its picture settings, plus a pickup availability block as shipped. Information holds vendor, title, price, variant picker, inventory, quantity, buy buttons, description, three collapsible rows, and share. Below them sit Related products and a second recommendation section set to complementary products.

Then set the cart under Theme settings → Cart. Choose a Cart type of Drawer or Page, set the Image ratio, and set the Free shipping from threshold that the free-shipping bar counts towards.

The Gift wrapping group below it takes a Gift wrap product. Create one priced as you want to charge, published to the Online Store, with inventory tracking off and kept out of your collections. Leave the field empty to hide the offer. Everything the drawer itself holds lives on the Cart drawer under Overlay in the sidebar.

Full reference: Product pages · Collection & search · Cart · Cart drawer.

3. Build your navigation menus

Menu links are managed in your Shopify admin, not the theme editor. The Header and Footer simply point at the menus you build. Changes appear immediately in the editor and on Preview, with no republish.

1. Go to Online Store → Navigation and edit the Main menu (handle main-menu). That is the menu the Header uses by default.
2. Drag a link under another to create a drop-down. Any top-level link with children gets one, and a third level folds inside it.
3. For a richer drop-down, add a Mega menu block to the Header and set its Main menu item to the top-level item exactly as it reads in your menu. Keep that item’s sub-links flat to get picture cards. A third level turns the panel into titled columns of links instead. Theme settings → Navigation sets the card Image ratio.
4. Create additional menus for your footer columns, then point each footer menu block at one.

4. Policies and languages

Store policies. Set your refund, privacy, terms, shipping, and contact policies under Settings → Policies. Shopify links them at checkout automatically. To show them in the footer, add them to a menu and point a footer menu block at it.

Languages. Lapels ships English plus 13 translations, Arabic included, and the theme mirrors its layout right-to-left. Add the ones you want under Settings → Languages. Only a published language is reachable. Then expose the language selector in the header, or keep the one in the footer.

To change the theme’s own wording, go to Online Store → Themes → Actions → Edit default theme content. Edits there are per language.

Full reference: Translations & internationalization · Supported languages.

5. Go-live checklist

Run through this on Preview, against your real catalog, before you publish.

• Brand fields set. Wordmark, logo (or a deliberate wordmark-only header), inverse logo if the header sits over your hero, favicon, and sharing image.
• Brand color set in Primary button, Button hover, and Focus ring in every scheme you use.
• Fonts, page width, and section spacing reflect your brand.
• Main menu built and showing correctly in the header, drop-downs included.
• Footer columns and Social media links complete and linking correctly.
• Homepage filled in. No leftover placeholder text, and no empty product, collection, or image fields.
• Collection, product, and cart templates reviewed on real products.
• Cart type chosen, and the Gift wrap product either set or deliberately left empty.
• Product options carry swatches, so colors show on the card and the product page.
• Your 404 and password pages are styled, so a lost visitor lands on a branded page.
• Store policies set under Settings → Policies.
• Every published language previewed, Arabic included if you ship it.
• A test order placed, and checkout confirmed end to end.

When every item checks out, publish from Online Store → Themes → Actions → Publish.

6. Place a test order

1. Under Settings → Payments, enable Shopify’s test mode (Bogus Gateway), or use a real payment provider.
2. On Preview, add a product to the cart and confirm the drawer opens. You will see the cart page instead if that is your Cart type.
3. Complete checkout, then check the confirmation page, the confirmation email, and the order under Orders.
4. If you used test mode, turn it off before going live.

A successful test order is the final gate. Once it passes and the checklist is clear, publish Lapels.

---

Related: Install & update · Theme settings · FAQ · Selling menswear · Lapels support replies within 12 hours.