Documentation

Blackout

Blackout is a dark, drop-focused theme for streetwear, sneaker and limited-run brands. This guide covers setup, every theme setting and section, and answers to common questions.

Getting started

In your Shopify admin, go to Online Store > Themes and add Blackout from the Theme Store.
Click Customize to open the theme editor. Change sections on each page from the left sidebar, and theme-wide options from Theme settings (the brush icon).
Set your main menu in the Header section and your footer menu in the Footer section. The header supports menus up to three levels deep.
Preview your changes, then click Publish when you're ready.

Before you make big changes to a live theme, go to Online Store > Themes and choose Duplicate so you always have a working copy.

Running a drop

Blackout is built around limited releases. A typical drop uses these pieces together:

Create a collection for the drop, for example by adding a product tag like drop-08 and using a tag condition.
Announce it with the Drop countdown section. Enter the real drop date and time; the countdown never restarts or shows made-up values.
Feature it in the Drop hero and a Featured collection section once it's live.
Label pieces with custom badges, for example the tag badge:Limited.
Keep the record: after a drop sells out, assign its collection the archive collection template. Sold-out products stay visible and are clearly marked.

Low stock messages always use your real tracked inventory. They appear only when stock is at or below the low stock threshold in theme settings.

Logo

Setting	What it does
Logo image	Replaces your store name in the header. Any aspect ratio works.
Logo width	Sets the logo width on large screens.
Text above store name	Shown above your store name when no logo image is set.
Favicon image	The small icon in browser tabs. 32 x 32px .png recommended.

Colors

Colors are organized into color schemes. Each scheme has a background, text, accent and highlight color, and each section lets you pick a scheme.

Accent is used for labels, links, and focus states.
Highlight is used for sale prices and alerts.
Background gradient replaces the solid background color where supported.

Keep enough contrast between text and background so everyone can read your store. Light gray text on a dark background should be at least as bright as #7a7a7a.

Typography

Choose three fonts from the Shopify font library: Headings, Body and Labels. Labels are used for small labels, prices, and navigation, and a monospace font is recommended. Each group has a Font size scale, and headings can use uppercase with Use uppercase headings.

Layout and buttons

Page width and Page margin set the content width and the space at the screen edges.
Section spacing sets the vertical space between sections. The top and bottom padding in each section is relative to it.
Corner radius keeps the default sharp corners or rounds them.
Show glow on solid buttons, Show corner marks and Use uppercase labels control the button style.
Reveal content on scroll animates sections into view and respects the reduced motion setting on visitors' devices.

Product cards and badges

Image ratio sets the shape of product images in grids. Images of any shape are cropped to fit, so your grid stays even.
Show second image on hover, Show vendor and Show quick add button control what each card shows. Products with options open a dialog to choose them.
Sale badge appears when a product has a compare-at price. Sold out appears when no variant is available.
Custom badges: add a product tag that starts with badge:. For example, badge:Limited shows a Limited badge. Up to 2 custom badges show per product.
Low stock threshold shows how many are left when tracked inventory is at or below this number. Set it to 0 to turn it off.

Cart

Cart type opens the cart in a drawer or on the cart page.
Show cart note lets customers add special instructions.
Show currency codes adds codes like USD to prices. Cart and checkout prices always show currency codes.
Automatic discounts, subscriptions and unit prices show in the cart automatically.

Add the full links to your accounts, for example https://instagram.com/yourstore. Icons appear in the footer when you add the Social media icons block. Leave a field empty to hide that icon.

Header and footer

Header

Menu and Desktop menu type set the navigation. Menus can be three levels deep and are fully keyboard accessible.
Logo position on large screens places the logo on the left or in the center.
Show search suggestions suggests products, collections, pages, and articles while customers type.
Show country/region selector and Show language selector appear when you've added markets or languages.
Status text is a short line shown at the bottom of the mobile menu, such as your current season or drop.

Announcement bar

Add one or more Announcement blocks. With Auto-rotate announcements on, they change every few seconds.

Footer

Add Menu, Text, Email signup, Social media icons and Brand information blocks. The bottom bar can show a large outlined store name, the country/region and language selectors, payment icons, and Follow on Shop (Shop Pay must be enabled).

Home page sections

Drop hero

A full-width hero for your current drop. Choose a Product to show its price, rating, and real stock level, and to link the hero to it. When Image is empty, the product's featured image is used; 1920 x 1080px .jpg recommended. Use // in the heading to show it in the accent color, for example Shadow // Runner.

Drop countdown

Counts down to your next release. Enter Drop date as YYYY-MM-DD (for example 2026-11-20) and Drop time in 24-hour format in your store's time zone (for example 18:00). The countdown only appears when you enter a real date and time. The button appears when the drop is live, and Show email signup lets customers ask to be notified.

Other sections

Section	Use it for
Scrolling text	A moving line of short messages with a custom separator.
Featured product	Selling one product directly from the home page, with the same blocks as the product page.
Featured collection	A grid or swipeable row of products from one collection.
Collection list	Image tiles linking to your collections.
Editorial cards	Collaborations and stories. A card linked to a product shows the real price and a sold out tag.
Slideshow	Rotating full-width slides. Add a slideshow description for screen readers.
Image banner	A large image with a heading, text and button.
Image with text	Your brand story or a product detail.
Rich text	Headings and formatted text.
Video	An uploaded video, or a YouTube or Vimeo link. Uploaded videos are used before the link.
Stats	Big numbers, like years in business or pieces made.
Icon columns	Shipping, returns and other store benefits.
Blog posts	Recent articles from a blog.
Email signup	Collecting subscribers. They're added to your customer list with the newsletter tag.
Custom Liquid	App snippets or other code for advanced customizations. Available on every page.

Product page

The Product information section is made of blocks you can add, remove and reorder: Text, Vendor, Title, Price, Product rating, SKU, Inventory status, Variant picker, Quantity selector, Buy buttons, Description, Collapsible row, Pop-up, Share, Complementary products, Custom Liquid and app blocks.

Price shows the price, unit price, tax note, and Shop Pay Installments when available.
Variant picker shows swatches for options with colors or images set in the product's category metafields. Selecting a variant updates its image, price, availability and pickup information.
Buy buttons include accelerated checkout buttons, like Shop Pay and Apple Pay, and a gift card recipient form for gift card products.
Complementary products needs the Search and Discovery app to choose the products.
Show sticky add to cart bar appears at the bottom of the screen after customers scroll past the add to cart button.

The Related products section shows recommendations that change over time based on orders and product information.

Collection and search

Show filters uses the filters you set in the Search and Discovery app, like availability, price, product type, vendor and options. Filters always open in a drawer on small screens.
Show quick filter chips shows the values of one filter as chips above the products. Enter a filter name, like Product type, in Quick filter name, or leave it blank to use the first filter.
Show sorting, Products per page and the column settings control the grid.
The archive collection template shows past drops in a 3-column grid without filters, with sold-out products clearly marked.

Other pages

Page: the contact page template adds a contact form; about and collabs templates are ready for your brand story and partners.
Blog and Article: show a tag filter, dates, excerpts, featured images and comments.
Password page: shows Opening soon when the heading is empty, with an optional email signup.
Gift card: shows the code, a QR code and an Add to Apple Wallet button.

FAQ

Why doesn't the countdown appear?

The Drop countdown only appears when both Drop date (YYYY-MM-DD) and Drop time (HH:MM) are filled in. After the drop time passes, it switches to the label after the drop.

Why don't I see a low stock message?

The product must track inventory, the Low stock threshold in theme settings must be above 0, and stock must be at or below that number.

Why do my color options show as buttons instead of swatches?

Swatches use the colors or images in the product's category metafields. In the product page of your admin, choose a product category, then link the Color option to the category's color values. If the swatches still don't appear, open the Color option again and click Done, then save the product. Shopify sets the swatch colors when the option is saved.

How do I add filters?

Install the free Search and Discovery app from Shopify, then choose which filters to show. Blackout displays them on collection and search pages.

How do I show product ratings?

Install a product reviews app that uses Shopify's standard reviews metafields. Ratings then appear in the Drop hero and the Product rating block.

How do I change the order of products in a collection?

In your admin, open the collection and change the sort order, or let customers choose with the sorting menu on the collection page.

Can I use my own fonts?

Blackout uses the Shopify font library, which loads quickly and works across devices. Choose any font from the library in Theme settings > Typography.

Custom code

You can add code with the Custom Liquid section and block. Custom code isn't covered by theme support, and theme updates won't carry over code edits you make directly in theme files.

Always duplicate your theme before editing its code. For larger customizations, consider hiring a Shopify Partner.

Support policy

We fix bugs and answer questions about Blackout's features and settings. We reply within 2 business days, and critical issues are fixed as soon as possible.

Support doesn't include custom code, design changes, or third-party apps. To reach us, use the support form.