CASA NOIR
CASA NOIR is an editorial Shopify theme for fashion and design brands. This guide covers every setting and section in version 1.0.0, in the order you meet them when building a store.
Getting started
Add CASA NOIR from the Shopify Theme Store, then open Online Store > Themes and select Customize. The theme installs with the same layout, colors and fonts as the demo store; your own photographs and products fill it in.
Set these five things first, in this order:
Logo. In Theme settings > Logo and favicon, upload your logo. If it is a single color, set Logo color to Match text color so one file works on light pages, dark pages and over photographs.
Colors. In Theme settings > Colors, edit the color schemes. Scheme 1 is the page; Drawers and popups color scheme colors the cart, menu and search panels.
Fonts. In Theme settings > Typography, choose a Heading font, an Accent font (used in italic for names, quotes and numbers) and a Body font.
Menus. In the Shopify admin, open Online Store > Navigation. The header uses your Main menu; footer menu blocks use your Footer menu. Menus can go three levels deep.
Header. Select the Header section to set the logo width for larger screens and for phones, the navigation style and whether the header sits over your first image.
Then build the home page with sections. Select Add section in the left sidebar; every section is listed under Sections below.
Theme settings
Theme settings apply across the whole store. Open them from the paintbrush icon in the theme editor’s left sidebar.
Logo and favicon — Logo, Logo color (Original or Match text color), a separate logo for dark backgrounds, and the favicon (32 x 32px .png recommended).
Colors — The color schemes, which scheme the page and the drawers use, and Shade behind text on images, which darkens photographs behind captions, titles and prices.
Typography — Heading, accent and body fonts, Heading size, Body size, heading case and whether the accent font is italic or upright.
Layout — Page width (Full width, Wide or Standard), page margin, grid spacing and the default space between sections.
Editorial details — Brackets around the labels the theme writes, index numbers like (01), product counts next to titles, and the font used for them.
Buttons — Button style (Outline, Solid or Underlined text), corner radius, label case and how text links are underlined.
Animations — Sections revealed on scroll, heading and image entrances, zoom on hover, parallax on photographs and the fade between pages.
Product cards — Image ratio and fit, second image on hover, title and price layout, vendor, quick add and how color variants show on cards.
Badges — Where the sale and sold out badges sit, or whether they show.
Cart — Cart type (Drawer or Page), order notes, the discount code field and the products shown in an empty cart.
Search — Results as you type, and whether results show the vendor and price.
Contact details — A phone number and email shown in the footer and contact areas.
Social media — Links to Instagram, TikTok, Pinterest, Facebook, X, YouTube and Vimeo, shown as text links or icons.
Every section also has its own Color scheme and, where it applies, Top padding and Bottom padding.
Header and navigation
The header shows your logo, the menu, search, the customer account and the cart. Select the Header section to change it.
Logo width on larger screens and Logo width on phones size an uploaded logo. Square and portrait logos are capped in height, so they never make the header tall.
Navigation chooses between Full-screen menu only and Links in the header, full-screen menu on mobile. When the links no longer fit on one line, the Menu button takes their place automatically.
Sticky header keeps the header in view: Always, When scrolling up, or Off.
Transparent header lays the header over the first section, on the Home page only or on All pages. Text over the first section sets it dark or light to suit your photograph.
Over a full-width image at the top of a page turns the header white over an image banner, a slideshow or a full-bleed hero, until visitors scroll.
Show search and Show account add the search and sign-in buttons. On phones, search moves into the menu; the account button stays in the header.
The full-screen menu
The full-screen menu lists your Main menu in large type, with submenus and a photograph beside them.
Link size set to Automatic keeps large links for up to six items, then steps down to medium and small. Submenus with eight or more links, or with a third level, switch to smaller type in columns.
Menu photograph: One photograph shows a single image; Changes with each link swaps the image as visitors point at each link; None leaves it out.
To choose the photograph for a link, add a Menu image block, type the menu item’s name exactly as it appears in the menu, and pick an image. Links without a block use the image of the collection, product or blog they open.
Search
Search opens a panel. Before visitors type, it shows products from the collection in Suggested products. As they type, results appear for products, collections, pages and journal stories; turn this off in Theme settings > Search > Show results as you type.
Sections
CASA NOIR has 25 sections you can add from the theme editor. Most come in two or three layouts; pick one when you add the section, or switch later with its Layout setting.
Wordmark hero — Opening the home page with your name set large and a photograph or slides. Layouts: Image over the wordmark, Full-bleed image, Masthead
Image banner — A full-width photograph or muted video with a short text. Layouts: Centered on the image, Bottom left on the image, Caption under the image
Slideshow — Several photographs with captions, changing on a wipe. Layouts: Caption bar under the image, Caption over the image, Diptych
Image comparison — Two photographs revealed with a handle, such as before and after. Layouts: One layout
Featured collection — Products from one collection. Layouts: Spaced row, Edge-to-edge strip, Carousel
Featured product — One product with its gallery and buy buttons. Layouts: Same galleries as the product page
Product stage — Products shown one at a time on a card over a photograph. Layouts: Card centered on a blurred photo, Card on the left of a sharp photo
Shop the look — A photograph with hotspots linked to the products in it. Layouts: Photo with product cards, Photo with an edge-to-edge product mosaic
Product recommendations — Related or complementary products (product pages only). Layouts: One layout
Collection index — Your collections as a running line of titles with a photograph. Layouts: Running line with a centered image, Stacked list
Lookbook — A series of photographs, each linked to a product. Layouts: Frames edge to edge, Numbered spread, Image strip
Gallery — A set of photographs. Layouts: Mosaic, Offset columns, Horizontal reel
Collage — Photographs placed freely, moving at different speeds as visitors scroll. Layouts: One layout
Designer feature — A name set large beside a portrait, with a caption and a list. Layouts: Name left, Portrait left
Magazine page — Portraits and a caption laid out like a printed page. Layouts: Portraits and caption, Magazine cover
Image with text — A large photograph beside a heading and text. Layouts: Small image above the text, Centered text
Statement — A paragraph, pull quote or a row of labels. Layouts: Large paragraph, Centered pull quote, Labels over a short paragraph
Journal — Recent stories from a blog. Layouts: Grid, Lead story with a list
Stores — Your shops, with addresses, hours and local time. Layouts: Columns, Rows, City index, Minimal
Countdown banner — A countdown to a real date, such as a sale or a launch. Layouts: Heading left, timer right; Centered
Newsletter — An email signup. Layouts: Centered, Image beside the form
Newsletter popup — An email signup that opens after a delay (in the popups area). Layouts: Centered with a large image, Small card in the corner
Contact form — A contact form with an optional photograph. Layouts: Image beside the form, Form only
Custom Liquid — App snippets or your own code. Layouts: One layout
Custom section — Your own arrangement of text blocks over an optional background. Layouts: One layout
The header, footer, product information, product grid, cart, blog, article, search, page, 404 and password sections belong to their templates and are covered in the sections below.
Some sections have settings marked for screen readers, such as Heading for screen readers or Link label. Visitors don’t see them; people using a screen reader hear them, so describe the section or where the link goes.
Product pages
Product pages are built from the Product information section and its blocks. Open a product in the theme editor (the page selector at the top, then Products) to change them.
Gallery
Gallery has five layouts: Info, images and thumbnails (three columns), Stacked, Lead image with thumbnails, Two columns and Carousel. On phones and tablets each layout keeps its own form: a full-width swipe, a row where the next photograph peeks in, one column, pairs under a full-width photograph, or a lead photograph over small ones.
Image position puts the photographs on the right or the left. It doesn’t apply to Info, images and thumbnails, which has a fixed order.
Photographs: Crop to fill the frame keeps a tidy grid; Show whole keeps every photograph uncropped, for products shot in different shapes.
Information spacing: Spread over the screen height places the title at the top and the buying blocks at the bottom; Compact keeps them together.
Videos, YouTube and Vimeo links and 3D models play in the gallery. On phones, 3D models get a View in your space button.
When a variant has its own image (set in the product admin, under the variant), choosing that variant scrolls the gallery to it.
Blocks
Title — The product title, in Large, Medium or Small type
Vendor — The vendor, linked to the vendor’s other products
Edition and price — A short line, such as an edition number, beside the price
Price — The price, compare-at price, unit price and the tax and shipping note
Description — The product description
Variant picker — Options as Buttons, a Dropdown, or Buttons, colors as photographs; color swatches when your option values have them
Quantity — A quantity selector
Buy buttons — Add to cart, the accelerated checkout buttons (on by default) and the gift card recipient form
Accordion — A heading that opens to text, or to a page, such as a size guide or shipping policy
Text — Extra text in body, small or large accent style
Inventory status — A low stock note below the threshold you set
SKU — The selected variant’s SKU
Pickup availability — Whether the variant can be picked up in store, with store details
Share — A share button that opens the phone’s share sheet or copies the link
Complementary products — Products that pair with this one
Custom Liquid — App snippets or your own code
Apps — Blocks from installed apps, such as reviews
Gift cards
Gift card products show a Send as a gift option with the recipient’s email, name, a message and a send date up to 90 days ahead. Turn it off with Let customers send gift cards to someone in the Buy buttons block. The gift card page your customers receive shows the code, a QR code, Add to Apple Wallet and, for a scheduled gift, the date it’s sent.
Recommendations
Add the Product recommendations section below the product to show Related products, chosen automatically by Shopify, or Complementary products, which you choose in the free Search & Discovery app. The Complementary products block shows the same picks inside the product information.
The Featured product section offers the same galleries and blocks, so you can feature a product on any page.
Collections, search and filters
Collection pages use the Product grid section; the search page uses Search results. Both share the same product cards, filters and sorting.
Product grid
Grid: Spaced with titles, Edge to edge (photographs touching, titles over them), or Editorial spread (some products shown larger).
Products per page, Products per row on desktop and Products per row on phones (1 or 2 columns).
The header shows the collection title as a Small label or in Large display type, with the collection description, image and an optional line after the title, such as a season.
Enable filtering shows filters for availability, price, product type, vendor and variant options. Choose which filters appear in the free Search & Discovery app.
Enable sorting adds the sort menu. Filtering, sorting and paging update the page without reloading it.
Product cards
Cards look the same everywhere in the store. Change them in Theme settings > Product cards: the image ratio, fit, a second photograph on hover, the title and price layout, the vendor, the quick add button and how color variants show (Color names, Small photographs or Color dots). Hovering a color shows that variant’s photograph. Sale and sold out badges are set in Theme settings > Badges. Unit prices show automatically on products that have them.
Collection list
The page that lists all your collections uses the Collection list section, with three layouts: Grid with numbers, Spreads (photograph beside the text) and Covers (title over the photograph). Collections without an image use their first product’s image.
Search results
Search returns products, journal stories and pages. Set Results per page and turn filtering on or off in the Search results section.
Cart
Choose a cart drawer or a cart page in Theme settings > Cart > Cart type. Both show each item with its photograph, options, price and quantity, and update the total as soon as a quantity changes.
Drawer slides in from the side when a product is added, so shoppers stay on the page. Page takes them to the cart.
Show discount code field (on by default) lets shoppers apply a code in the cart. A code that doesn’t apply shows a message; applied codes can be removed. Codes can always be entered at checkout too.
Discounts already applied, on an item or on the whole order, show as lines in the cart.
Show order notes adds a note field that’s passed to the order.
Products in empty cart picks up to four products to suggest when the cart is empty.
Express checkout buttons, such as Shop Pay, Apple Pay and PayPal, show under the checkout button for the payment methods you have turned on in Settings > Payments.
Subscriptions show their plan name under the item, and the tax and shipping note follows your store’s tax settings.
Blog, pages, contact and password
Blog. The Blog posts section lists your stories with an introduction, tag filters, author and date; set Stories per page to page through older ones. Write stories in Online Store > Blog posts.
Articles. Each story shows its photograph, title, date and text. First label sits above the photograph and defaults to the blog name. Comments appear when you allow them in the blog’s settings in the admin.
Pages. The Page section shows the page title and the text you write in Online Store > Pages. For a richer page, create a template and add sections; when an Image banner opens a page, its label becomes the page’s main heading. A Statement section with Show the page’s own text turned on shows the page’s text in large type.
Contact. Assign the page.contact template to a page to show the Contact form section. Messages arrive at your store’s contact email, set in Settings > Store details. Turn on Ask for a phone number if you need it.
Page not found. The 404 page shows a message, a search field and a link back, with an optional Image.
Password page. While your store is password protected, visitors see your logo, the message from Online Store > Preferences, an email signup and a way to enter the password. Change the Background image, Label and Show newsletter signup in the Password page section.
Footer, languages and countries
The Footer section has three layouts:
Minimal — Your logo and contact links only; menu, text and signup blocks are left out
Extended — Columns of menus, text, local times and a newsletter signup, with an optional giant wordmark
Editorial — A large newsletter line beside your menus, text and local times, with a giant wordmark
Add Menu, Text, Local time and Newsletter blocks for the Extended and Editorial layouts. In Local time, list one city per line as City | Time zone, for example Paris | Europe/Paris.
Reveal from under the page lets the page scroll away to uncover the footer, when the footer fits on the screen.
Show policy links, Show payment icons, Show Follow on Shop (needs Shop Pay turned on) and Show powered by Shopify add the bottom row’s extras. The copyright line always shows.
Your phone, email and social media links come from Theme settings > Contact details and Theme settings > Social media.
Languages and countries
With Show country and language selectors on, the footer shows a country selector when you sell to more than one country with local currencies (Settings > Markets), and a language selector when your store is published in more than one language (Settings > Languages). With one country and one language, nothing shows.
Motion, text over photographs and accessibility
Motion
Sections fade in as visitors scroll, headings rise word by word and photographs unveil from the bottom. Turn any of these off in Theme settings > Animations. Visitors who ask their device for reduced motion see the store without movement, whatever these settings say.
Slideshows and heroes that change on their own, and background videos, have a pause button. Autoplay also pauses while the pointer or keyboard is on them and when they scroll out of view.
Text over photographs
Two controls keep text readable on images:
Shade behind text on images (in Theme settings > Colors) darkens the photograph behind captions, titles and prices set on it. Banners and heroes have their own Image shade too.
Invert text over photographs, in several sections, draws text that turns dark over light parts of a photograph and light over dark parts. It suits large type. For small text over busy photographs, turn it off for white text with a soft shade.
Accessibility
CASA NOIR works with a keyboard and screen readers: every control can be reached with Tab, shows a visible focus outline and has a name. To keep your store accessible:
Add alt text to your photographs in Content > Files, and to product media in each product.
Fill in settings marked for screen readers and the Link label fields, which describe links that have no visible text.
Keep enough contrast between text and background when you edit color schemes.
FAQ
How do I make the header sit over my first photograph? In the Header section, set Transparent header to Home page only or All pages, and set Text over the first section to suit the photograph. When a page opens with an image banner, slideshow or full-bleed hero, Over a full-width image at the top of a page turns the header white over it.
My logo looks too small or too large. Change Logo width on larger screens and Logo width on phones in the Header section. Square and portrait logos stop at a set height, so make them wider to compensate.
How do I show photographs in the menu? In the Header section, set Menu photograph to Changes with each link, then add a Menu image block for each link, typing the link’s name exactly as it appears in your menu.
How do I add a dropdown or a third level to the menu? In Online Store > Navigation, drag a link under another to nest it. The theme shows up to three levels.
How do I show color swatches? Swatches come from your product options. Link the option to Shopify’s Color category values in the product admin, and each value carries its own color or image. The Variant picker block and product cards then show them.
How do I show the right photograph for each color? In the product admin, open each variant and choose its image. Selecting that variant on the product page scrolls the gallery to it.
How do I add a size guide? Create a page with your size guide in Online Store > Pages. On the product page, add an Accordion block, name it Size guide and choose that page in Page content.
Where do filters come from? Filters are set in the free Search & Discovery app. Install it, choose the filters you want, and keep Enable filtering on in the Product grid and Search results sections.
Why don’t I see the country or language selector? It only shows when you sell to more than one country with local currencies, or publish more than one language. Check Settings > Markets and Settings > Languages, and keep Show country and language selectors on in the footer.
Why is my countdown banner hidden? It stays hidden until you enter an End date, written YYYY-MM-DD. After that date it hides itself, or shows your Message if When the countdown ends is set to Show a message.
How do I turn off the animations? In Theme settings > Animations, turn off what you don’t want. Visitors who ask their device for reduced motion never see movement.
Does CASA NOIR work with apps? Yes. Add app blocks to the product page and featured product, or use the Custom Liquid section and block for app snippets. App embeds are turned on from the App embeds icon in the theme editor’s sidebar.
Can I edit the theme’s code? You can, but duplicate the theme first in Online Store > Themes. Code edits aren’t covered by support and aren’t carried over when you update the theme. For custom work, consider hiring a Shopify Partner.
How do I update the theme? When a new version is released, Online Store > Themes shows that an update is available. Updating adds a new copy of the theme to your library with your settings and content carried over; publish it when you’re ready.
Support
We answer every support request within two business days. Send it through our support form, with your store URL, what you expected, what happened instead and a screenshot.
Covered
Questions about any setting, section or block
Bugs in the theme, fixed in a timely manner
Help updating to a new version
Not covered
Changes to the theme’s code, or problems caused by code edits
Third-party apps and their placement
Design work, content or photography for your store
Updates are free and add new features and fixes; each version’s release notes list what changed.