Home / Docs / Volt

Volt Documentation

This comprehensive guide covers everything you need to install, configure, and customize the Volt Shopify theme. Volt is a high-voltage Shopify OS 2.0 theme for modern coffee roasters, built around a dark charcoal base, neon mint/orange-red/electric blue accents, bold condensed typography, color-block product tiles, and a signature pinned left icon rail. No apps are required for any of the features described below. Use the sidebar navigation to jump to a specific section, or scroll through for the complete reference.

Getting Started

System Requirements

Volt requires a Shopify store on any current plan (Basic Shopify, Shopify, Advanced, or Shopify Plus). The theme is built on Online Store 2.0 and requires no additional apps for core functionality.

Installation

After completing your purchase, you will receive a ZIP file named volt-theme-1.0.0.zip. Follow these steps to install it on your Shopify store:

  1. Log in to your Shopify admin panel at your-store.myshopify.com/admin.
  2. Navigate to Online Store > Themes in the left sidebar.
  3. In the Theme library section, click the Add theme button.
  4. Select Upload ZIP file from the dropdown menu.
  5. Choose volt-theme-1.0.0.zip from your computer and wait for the upload to complete. This typically takes 15-30 seconds.
  6. Once uploaded, the theme will appear in your theme library. Click Customize to open the visual theme editor, or click Actions > Publish to make it your live theme immediately.

Tip: We strongly recommend customizing the theme on an unpublished version first. Configure your colors, hero collage, and left rail before publishing so your live store never appears in an unfinished state to customers.

Activating Volt

Once you have uploaded and customized the theme to your liking:

  1. Go to Online Store > Themes in your Shopify admin.
  2. Find Volt in your theme library.
  3. Click Actions > Publish.
  4. Confirm the activation in the dialog. Your previous theme will be moved to the theme library and can be restored at any time.

Theme Settings

Colors

Volt ships with a neon brutalist palette built around a dark charcoal base. In the Shopify theme editor, navigate to Theme settings > Colors to configure:

  • Background — The main dark charcoal background used across the storefront.
  • Text — The default light text color used against the dark background.
  • Accent 1 (Mint) — The neon mint accent used for color-block tiles, buttons, and highlights.
  • Accent 2 (Red) — The orange-red accent used for color-block tiles, sale badges, and emphasis.
  • Accent 3 (Blue) — The electric blue accent used for color-block tiles and secondary highlights.
  • Light background — An off-dark surface color used for cards, panels, and light sections.
  • Dark text — Text color used on light-background surfaces for contrast.

Typography

Navigate to Theme settings > Typography to select fonts. Volt pairs a bold condensed heading font with a clean body font to keep the brutalist look legible:

  • Heading font — Font picker applied to all headings, section titles, and product names. Choose from the full Shopify-hosted font library.
  • Body font — Font picker applied to paragraphs, descriptions, navigation links, and general UI text.

Layout

Under Theme settings > Layout, you can control the page width and the left rail:

  • Page width — Set the maximum content width, from 1200px up to 1600px. Wider values suit image-heavy color-block layouts.
  • Enable left rail — Checkbox that turns the pinned left icon rail on or off globally. See Left Icon Rail below for details.

Cart

Under Theme settings > Cart:

  • Cart type — Choose Drawer for the AJAX slide-in cart or Page for a traditional full-page cart with a no-JS fallback.
  • Free shipping threshold — Set the dollar amount required to unlock free shipping. Setting this to 0 hides the free shipping progress bar entirely.

Social

Under Theme settings > Social, add your Instagram, Twitter, and Facebook URLs. These populate the footer social icons and the community grid's Instagram link (see Coffee Features).

Header & Navigation

Menu & Logo

In the header section settings, use the menu picker to select which Shopify navigation menu displays in the header, and upload your logo image. Manage menus in Shopify Admin > Online Store > Navigation.

Sticky Header

Enable the sticky header checkbox in the header section settings to keep the header pinned as customers scroll. When sticky header is ON, the left icon rail automatically starts positioning itself below the header instead of at the very top of the viewport, so the two elements never overlap.

Mobile Hamburger

Below 990px viewport width, the header navigation collapses into a hamburger menu icon. Above 990px, the full navigation menu displays inline in the header.

Left Icon Rail

Overview

The pinned left icon rail is Volt's signature navigation element: a vertical strip of icon links fixed to the left edge of the viewport. It is a desktop-only feature that appears at viewport widths of 1200px and above; it is hidden entirely on smaller screens in favor of the standard header/hamburger navigation.

Menu Source

The rail uses a Shopify navigation menu called "left-rail" if one exists in Shopify Admin > Online Store > Navigation. If no menu with that handle exists, the rail automatically falls back to your main menu.

Automatic Icon Matching

Icons are assigned automatically based on each menu link's title — no manual icon picking required. The matching rules are:

  • Titles containing "beans" or "coffee" → bag icon
  • Titles containing "merch" or "apparel" → shirt icon
  • Titles containing "cafe" or "locations" → store icon
  • Titles containing "mugs" or "drinkware" → mug icon
  • Anything else → a default cup icon

Tip: Name your menu links with these keywords in mind (e.g. "Whole Bean Coffee", "Cafe Locations") so the rail automatically picks the most relevant icon.

Pin While Scrolling

Toggle "Pin rail while scrolling" in the theme settings to control whether the rail stays fixed in place as the customer scrolls down the page. This is enabled by default. Disable it if you prefer the rail to scroll away with the rest of the page content.

Hero Collage

Image Blocks

The homepage hero uses a photo collage layout built from up to 5 image blocks. In the theme editor, add or remove blocks and configure each one:

  • Column width — Narrow or wide, set per block, to build an asymmetric collage layout.
  • Image — Use landscape or square photos. Portrait images will zoom in when placed in a wide column, so avoid portrait crops there.
  • Focal point — Set the image's focal point in the theme editor to control exactly which part of the photo stays visible when the image is cropped.

Heading & CTA

The hero supports two heading lines plus an optional call-to-action button with customizable text and link.

Strip Height

Use the "Strip height (desktop)" slider to control the hero's height on desktop, from 300px to 600px. Adjust this based on how many image blocks you're using and how much vertical space your collage needs to look balanced.

Color-Block Product Tiles

The featured grid section displays product blocks as color-block tiles. For each product block, configure:

  • Accent color — Assign mint, red, or blue to each tile to build the signature color-block mosaic.
  • Tile size — Choose the tile's size within the mosaic grid, including wide tiles with an offset panel for visual variety.

Product Image Display

Each block includes a "Product image display" setting with two modes:

  • Float on color block — Best for cutout product shots; the image floats over the solid accent color.
  • Fill tile with photo — Best for lifestyle photography; the image fills the entire tile edge to edge.

You can also toggle whether the section heading displays an accent-colored word for extra emphasis.

Product Page

Reorderable Blocks

The product page is built from reorderable blocks that you can drag into any order in the theme editor: vendor, title, price, roast level, variant picker, quantity, buy buttons, description, collapsible tabs, and share.

Media Gallery

The product media gallery supports standard images as well as video and 3D models. Upload a 3D model file through the standard Shopify product media uploader and it will display automatically in the gallery — no extra configuration required.

Variant Picker

Variants use a button-swatch picker. The picker includes wrong-variant-proof syncing, meaning every option selector on the page stays in sync so customers can never accidentally add an unavailable or mismatched variant combination to their cart.

Dynamic Checkout & Structured Data

Dynamic checkout buttons (Shop Pay and other express checkout options) appear automatically below the buy buttons. The product page also outputs JSON-LD structured data for SEO and rich search results, with no extra setup needed.

Collapsible Tabs

Use the collapsible tabs block to organize shipping info, ingredients, brewing notes, or any custom content into clean, expandable sections.

Collection Page

Sorting & Filters

Collection pages include a sort dropdown and Shopify's native storefront filters. To enable filters:

  1. Go to Shopify Admin > Search & Discovery.
  2. Open Filters and enable the filters you want to expose (product type, availability, tags, etc.).
  3. Volt automatically renders enabled filters on the collection page, styled to match the neon brutalist aesthetic.

Price Range & Active Pills

A price range filter is available alongside the standard storefront filters. As customers apply filters, active filter pills appear above the product grid so they can see and remove filters at a glance.

Cart Drawer

Drawer or Page

Choose between a slide-in drawer cart or a traditional full page cart under Theme settings > Cart. The page cart includes a no-JS fallback so it functions even if JavaScript fails to load.

Free Shipping Bar

The cart drawer displays a free shipping progress bar based on the Free shipping threshold you set in Theme settings > Cart. Setting the threshold to 0 hides the bar entirely if you don't offer free shipping.

Order Notes

Customers can add an order note directly from the cart drawer — useful for grind preferences, gift messages, or delivery instructions. Cart totals are section-rendered, so quantity changes update instantly without a full page reload.

Coffee Features

Roast Level

Volt can display a flame-icon roast level indicator (1-5) on product cards and the product page. Set it up either way:

  • Add an integer product metafield with namespace and key custom.roast_level, valued 1 through 5, or
  • Tag each product roast-1 through roast-5 in Shopify Admin > Products.

The theme checks the metafield first and falls back to the tag if no metafield value is set.

Bestsellers

Add the Bestsellers section from the theme editor and configure:

  • Collection — Pick the collection to pull products from.
  • Product count — Display between 2 and 8 products.
  • Color scheme — Light or dark.
  • Use recommendations — Enable this to switch the section into Shopify's product recommendations mode, which also powers the "You may also like" row on the product page.

Community Grid

Add up to 8 images to the community grid section for an Instagram-style social proof block. The grid links out to the Instagram URL you set under Theme settings > Social.

Cafe Finder

The cafe finder banner is a background-image section that points shoppers to your physical cafe. Configure a background image, heading, and a button label and link (for example, linking to a store locator or Google Maps listing).

Customer Accounts

Volt includes fully styled customer account templates: login, register, account, order history, and addresses. A gift card template is also included and styled to match the theme. A newsletter signup block is available to add anywhere on the homepage or footer.

Note: Volt has no external JavaScript or CSS dependencies and requires no third-party apps for any of the features on this page. The theme is built to be responsive and accessible, with focus traps in the cart drawer and mobile menu, ARIA attributes throughout, and support for reduced-motion preferences.

License & Activation

License Terms

Each Volt purchase grants you a single-store license. This means you may install and use the theme on:

  • One (1) live production Shopify store
  • One (1) development or staging store for testing purposes

Using the theme on additional production stores requires purchasing additional licenses. Contact our support team for multi-license pricing.

Entering Your License Key

After purchasing the theme, you will receive a license key via email. To activate:

  1. Install the theme on your Shopify store following the installation steps above.
  2. Open the theme editor and navigate to Theme settings > License.
  3. Enter your license key in the License key field.
  4. Click Save. The theme will verify your license against our server and activate all premium features.

Removing the Watermark

The unlicensed version of Volt displays a small "Theme by beBriz" watermark in the footer. Once you enter a valid license key, the footer watermark is automatically removed and all premium sections become fully functional.

Need Help?

If you cannot find the answer to your question in this documentation, visit our support page to contact our team directly. We typically respond within 24 hours on business days.