Beacon theme documentation

Beacon is a Shopify theme for stores with a big catalog: many departments, many brands and lots of products. These pages show you how to set it up and make it yours. Everything here is done in the theme editor: Online Store → Themes → Customize. No code needed.

Beacon version: 1.2.1

Getting started

1. 1
   Install Beacon from your download (see Installing Beacon), then choose Customize.
2. 2
   Pick a color palette and fonts (see Colors and fonts).
3. 3
   Add your logo (see Logo and header).
4. 4
   Set up your main menu with departments and sub-categories (see Menus and the mega menu).
5. 5
   Install Shopify's free Search & Discovery app for filters (see Collections and filters).
6. 6
   Fill in your home page sections, then preview on a phone and on a computer.
7. 7
   When you're happy, choose Publish.

Tip: sections show sample content until you choose your own collections and products, so you can see the layout before your catalog is ready.

Installing Beacon

Beacon comes in two editions, sold separately: Beacon (for retail stores with big catalogs) and Beacon Wholesale (starts with the Wholesale style and a home page made for reordering).

1. 1
   Unzip your download. Inside you'll find the theme file (Beacon-1.2.1-theme.zip or Beacon-Wholesale-1.2.1-theme.zip), the license (LICENSE.md), THIRD-PARTY-NOTICES.md and INSTALL.txt.
2. 2
   In your Shopify admin, go to Online Store → Themes.
3. 3
   Under Theme library, choose Add theme → Upload zip file, and upload the theme file. Keep it zipped.
4. 4
   Choose Customize to set it up. It stays unpublished until you choose Publish.

Updating to a new version: upload the new theme file the same way. It arrives as a separate, unpublished theme, so your live store isn't touched. Your settings don't move across automatically: re-apply your changes in the new theme (or ask support for help), check it, then publish it.

License

Each purchase covers one live Shopify store, plus development, staging and preview copies for that store. You can change the code as much as you like for that store, and share the files with your own team and the freelancers or agencies you hire to work on it. You can't resell, give away or publish the theme, changed or not, or use it to make another theme. Updates and support are included for 12 months from purchase; the theme keeps working after that. The full terms are in LICENSE.md in your download.

The footer credit: "Theme by Realmdrop Software" shows at the bottom of the footer. You're welcome to turn it off: Footer section → Show "Theme by Realmdrop Software".

Colors and fonts

Beacon's look: a deep navy header over a lighter navy menu bar, bright orange buttons and a bold headline font. Make it yours with a ready-made color palette or your own colors and fonts; your content stays the same.

Color palette: Theme settings → Colors → Color palette. Pick one of five palettes and the whole store recolors in one click:

Palettes change colors only; fonts and corner shapes stay as you set them. To fine-tune colors, choose Beacon and edit the color schemes; your schemes are kept while another palette is on.

Color schemes: Theme settings → Colors. Beacon has six color schemes (background, text, muted text, borders, buttons, button text, secondary button text, accent). Sections choose a scheme, so editing a scheme recolors every section that uses it. Beacon's schemes all meet WCAG AA contrast; if you change colors, keep text easy to read.

Header menu bar: Theme settings → Colors → Different colors for the header menu bar (with the Beacon palette). Turn it on to give the row of departments under the logo and search its own color scheme. The other palettes set the menu bar for you.

Fonts and sizes: Theme settings → Typography for heading and body fonts and their sizes. Theme settings → Shape for corner roundness of cards, buttons and fields.

Logo and header

• Logo: Theme settings → Logo. Upload your logo, set its width and add a favicon (the small icon in the browser tab).
• What shows in the header: Header → Logo. Choose your logo image, your store name, both, or neither.
• Utility bar: the thin strip above the header for a short promise and one link, such as "Free shipping on orders over $50 · Easy returns".
• Search: the header search suggests products, collections and pages as shoppers type. Header → Popular searches adds quick suggestions shown before anyone types (comma-separated, for example headphones, candles, lego).
• Highlight link: Header → Highlight link label and Highlight link put a standout link first in the menu, such as "Deals" (also the first chip on phones).
• Country and language: turn the selectors on or off under Header. They appear when your store sells in more than one country or language.
• Sticky header: Header → Sticky header (on by default) keeps the header, search and cart in reach. It slides away while shoppers scroll down and comes back when they scroll up.

Menus and the mega menu

Beacon is built for big menus. Online Store → Navigation → Main menu:

• Top level: your departments (for example Electronics, Home & Kitchen, Beauty).
• Second level: the department's categories. These open as a mega menu on computers and as a tidy list on phones.
• Third level: shows as groups within the mega menu.

In Header settings you can also:

• Show price links in dropdown menus: "Under $X" shortcuts in every department panel (set the amounts in Price links, for example 5, 10, 25; needs the price filter in Search & Discovery);
• Show a featured product in dropdown menus;
• Show category chips on mobile: a swipeable row of departments under the header;
• Links per column in dropdown menus: longer lists continue in another column.

Brands in the menu: add a "Brands" item with your brand collections under it. They appear in the menu and on the Brands page.

Home page

Add, remove and reorder sections in the theme editor. Beacon's home page sections:

Popup

In the footer group, Add section → Popup. It opens over the page after the delay you choose, with a newsletter sign-up, a button, or just text, and an optional image.

• Discount code: create the code in Discounts, then enter it in the popup. Shoppers see it, with a Copy button, after they sign up.
• How often: after a shopper closes it, it stays away for the number of days you set; once they sign up, it doesn't show again. It never shows on the cart, password or gift card pages.
• Editing: in the theme editor it opens only while the Popup section is selected.

Slideshow

The slideshow runs your promotions all year without you touching it.

When a slide shows

Every slide has Show during:

• Holiday: pick a holiday from the list (New Year's Day, Valentine's Day, Easter, Mother's Day, Memorial Day, Father's Day, Fourth of July, Labor Day, Halloween, Thanksgiving, Black Friday, Cyber Monday, Christmas and more). The slide shows for the two weeks before the holiday, through the end of the day. Holidays that move (Easter, Thanksgiving, Mother's Day…) are worked out every year automatically.
• Month: pick a month. The slide shows all month, every year.
• Custom dates: set Show from and Show until.

  • Use YYYY-MM-DD for exact dates, for example 2026-11-20 to 2026-12-02. Exact dates can span several months.
  • Use MM-DD to repeat every year, for example 12-15 to 01-10 (runs over New Year).
  • Leave both blank to show the slide all the time, which suits an everyday message such as free shipping.

Which slide comes first

Priority sets the order when several slides show on the same day: Urgent → High priority → Priority → Preferred → Normal → Low. Slides with the same priority keep their order in the editor.

Beacon starts you off with a slide for 14 holidays (Preferred), one for each month (Normal) and an everyday free-shipping slide (Low). Edit their text, images and colors, or delete the ones you don't need.

Each slide

• Content: color scheme, small heading above the title, title, button label and link.
• Image: wide images work best (about 2:1). Add a separate phone image if you like. Animated GIFs play as uploaded. Describe the image for screen readers in Image description.
• Name in the editor: what the slide is called in the editor's list. A clear name helps, for example "Halloween – Preferred – Oct 17 – Oct 31". Leave it blank to use the title.

Seeing what shoppers will see

In the theme editor only (shoppers never see these):

• a small red line above the slideshow names the slide on screen, its priority, its dates and whether it shows on the date you're previewing;
• Preview on lets you pick any date and see that day's slides instantly;
• Slide schedule (collapsed) lists every slide in order, with its dates.

Tip: if clicking the date picker selects the section instead, switch off the selection tool (the arrow button at the top of the editor) and try again.

Controls

Slideshow → Controls: size (small, medium, large), position (below the slideshow on the right, center or left, or on the slide's bottom-right corner), and whether to show the previous/next arrows. When slides change automatically there's always a pause button, so shoppers can stop the movement. Change slides automatically and Change every set the timing.

Collections and filters

• Filters come from Shopify's free Search & Discovery app. Install it, then choose filters such as availability, price, brand, product type, color and size. Beacon shows them in a sidebar on computers and in a panel on phones.
• Collection page settings: Price steps for the quick price choices and "Under $X" shortcuts (for example 5, 10, 25), sub-category links from your menu, hide filters, and More products: a Load more button, infinite scroll (more products load as shoppers reach the end) or page numbers. Search results can use infinite scroll too.
• Collection list page (/collections): every collection as a card with its image.

Product cards

Theme settings → Product cards:

• image shape (square, portrait or landscape), fit or fill;
• second image on hover;
• Color swatches (on by default): options linked to Shopify's color metafields show as dots; choosing one shows that color's photo, and you set how many show before "+3";
• brand (vendor) name;
• Quick buy button: products with one variant go straight to the cart; products with options open a panel to choose them and add to cart without leaving the page;
• sale badge as "Sale" or a percentage;
• an image for products without photos.

A product shows "Sale" only when its compare-at price is higher than its price.

Pre-orders — three ways, from simplest:

1. 1
   Take pre-orders without an app: in the product's inventory, turn on Continue selling when out of stock. When it runs out, Beacon shows "Pre-order" on the button, a Pre-order badge on cards, "Out of stock · Available to pre-order" on the stock line, and "Pre-order" in the cart. Shoppers pay in full; you ship when stock arrives.
2. 2
   Deposits and pay-later: install a pre-order app that uses Shopify's purchase options. Beacon shows its options, "Pre-order" on the button and the deposit ("Pay $20 today and $80 later"). Beacon treats a one-time option as a pre-order when its name says so (for example "Pre-order") or the product is out of stock.
3. 3
   Announce, without taking orders: give a sold-out product the metafield preorder.status with the value open, limited or true (optional preorder.start_date and preorder.end_date). It shows a Pre-order badge but can't be bought yet.

Scroll animations

Theme settings → Interactions → Scroll animations: sections fade in, or fade in and rise, as shoppers scroll to them (the first section always shows at once). Choose None to turn them off. Shoppers who ask their device to reduce motion never see them.

Product page

Every part of the buy box is a block you can add, remove and reorder: brand, title, price, stock line, free-shipping meter, variant picker, quantity and buy buttons, trust cards, description, details, collapsible tabs, text, custom Liquid and app blocks.

• Swatches: turn on Show swatches in the variant picker. Options linked to a color or pattern metafield (Shopify's category metafields) show as swatches.
• Sticky add to cart: Buy buttons → Sticky add to cart (on by default). On phones, quantity and Add to cart stay pinned to the bottom of the screen; on computers, a bar with the product and Add to cart appears once the buttons scroll out of view.
• Image zoom: on by default (Product page → Image zoom). Shoppers click or tap a photo to see it full screen, then zoom in and drag around. Upload photos at least 2000px wide so zoomed photos stay sharp.
• Size chart: create a page with your chart (a table works well), then choose it in Variant picker → Size chart. A "Size chart" link appears beside the option called Size (or the names you list in Size option names). For a different chart per product, create a product metafield of type Page and connect the setting to it.
• Ingredients, nutrition, how to use: add a Collapsible tab, give it a heading and an icon, and connect its Text to a product metafield (rich text or multi-line text) so each product shows its own. Tabs with no text are hidden on products that don't have it.
• Countdown: add the Countdown block ("Sale ends in") and enter when it ends, as YYYY-MM-DD HH:MM in your store's time zone, e.g. 2026-11-27 23:59. By default it shows only on products with a compare-at price. When the time is up it disappears.
• Back-in-stock requests: Buy buttons → Back-in-stock form (on by default). Sold-out variants show "Notify me" with an email field. Each request arrives in your store's email, like a contact form message, with the product, variant and a link. Beacon doesn't email shoppers itself: reply when the item is back, or install a back-in-stock app for automatic emails (add its app block and turn this form off).
• Works automatically with Shopify features you turn on: subscriptions (selling plans), gift card recipient details, combined listings, B2B quantity rules and volume pricing, unit prices, pickup availability and Follow on Shop.

Cart

Theme settings → Cart:

• Cart type: a drawer that slides in, or a full cart page.
• Free-shipping goal: set the amount; shoppers see how close they are in the cart and on product pages.
• Add-ons: pick a collection of small extras to suggest in the cart.
• Drawer extras: order note and express checkout buttons.
• Currency codes on totals (helpful if you sell in several currencies).

Brands page

1. 1
   Online Store → Pages → Add page, title it "Brands".
2. 2
   Under Theme template, choose brands.
3. 3
   The logo grid uses the collections under the "Brands" item of your main menu; each collection's image is its logo. Below, an A–Z list shows every brand (vendor) in your store.

Contact and help pages

1. 1
   Online Store → Pages → Add page.
2. 2
   Choose the template contact (or help for a help center).
3. 3
   In the theme editor, edit the help cards, information cards (such as "Shipping at a glance"), the contact form fields and the common questions.

Messages from the contact form go to your store's email address (Settings → Store details).

Blog, search, 404, gift cards and password page

• Blog and articles: article cards with image, date and excerpt; article pages with a reading layout.
• Search page: before a search, popular searches and departments; after, results with filters and tabs for products and pages.
• 404 page: a friendly "page not found" with search and popular departments.
• Gift card page: the code with a copy button, a QR code, Apple Wallet and print.
• Password page: your logo, a message and an email sign-up while your store is closed.

Social media

Theme settings → Social media: links to your profiles (Facebook, Instagram, TikTok, YouTube, X, Pinterest). They show in the footer.

Accessibility and speed

• Keyboard and screen-reader friendly: skip link, visible focus, labeled controls, and menus, slideshow and tabs that work with the keyboard.
• Respects "reduce motion": the slideshow doesn't move by itself and animations are minimal.
• All five color palettes meet WCAG AA color contrast.
• Fast: images load at the right size, and scripts load only on the pages that need them.

To keep your store accessible: describe your images (alt text), keep headings in order, and check contrast if you change colors.

Frequently asked questions

A slide isn't showing. Why? Check its Show during dates and its Show settings. In the editor, the Slide schedule and Preview on date show exactly which slides show on any day.

Where do the filters come from? Shopify's Search & Discovery app. Install it and choose your filters there.

Why doesn't a product show "Sale"? "Sale" shows only when the compare-at price is higher than the price.

Do I need Shopify Plus for B2B? No. Shopify's B2B features (companies, catalogs, payment terms, quantity rules and price breaks) work on every plan; Plus adds catalogs assigned to single companies and more catalogs.

Can I use Beacon in another language? Yes. Beacon includes English, French, German, Italian, Spanish, Arabic and Simplified Chinese, and the theme editor is available in all of those except Arabic (Shopify's admin isn't offered in Arabic). Add languages in Settings → Languages; translate your products and pages, or any other language, with Shopify's Translate & Adapt app. The language selector shows when your store has more than one language.

Does Beacon support right-to-left languages? Yes. In Arabic, Hebrew, Persian, Urdu and other right-to-left languages, the whole layout mirrors automatically: menus, drawers, slides, carousels and arrows follow the reading direction. Slide settings that say "left" or "right" swap sides too, so the photo stays clear of the text.

The countdown ends at the wrong time. Countdown times use your store's time zone (Settings → General → Time zone), not the shopper's. Write the time with a 24-hour clock: 2026-11-27 18:00 for 6 p.m.

Can Beacon email shoppers when a product is back in stock? Beacon collects the requests and sends them to your store's email. Automatic emails need a back-in-stock app; most add their own button as an app block on the product page.

Do theme updates keep my changes? Updating adds a new copy of the theme with your settings carried over. Preview it before publishing.

B2B and wholesale

Beacon works with Shopify's B2B features (Customers → Companies, catalogs and payment terms) on every plan. Business buyers who log in see their company's prices, quantity rules, price breaks and payment terms automatically; nothing in the theme needs setting up for that.

• Location switcher: buyers with several locations or companies see "Buying for …" in the header and switch with one click. It shows only for logged-in business buyers.
• Quick order list: add the Quick order list block to the product page to list every variant with SKU, stock, price breaks and a quantity box. For a full order form, create a page and choose the template bulk-order: it lists the products of the collection you pick, with a search box (name or SKU), a category menu (choose the menu in the section) and "In stock only" (turn on the Availability filter in the Search & Discovery app).
• Quantity rules and price breaks you set in a B2B catalog show on product cards, the product page, quick buy, the quick order list and the cart.
• Show prices to (Theme settings → Trade (B2B)): everyone, logged-in customers or B2B customers only. Others see "Log in to see prices". This hides prices in the theme only; for prices that must stay private, use B2B catalogs.
• Show to: many blocks and sections have a Show to setting (everyone, retail shoppers, B2B buyers), e.g. a product text block that tells business buyers "Net 30 terms at checkout".
• Trade accounts: create a page with the template trade-account and pick it in Theme settings → Trade (B2B) → Trade account page. Applications arrive in your store's email.
• List view: collection and search pages have a grid/list switch; set the starting view in the section. List view shows SKUs and stock.

The Wholesale style starts with all of this switched on: list view, SKUs and stock on cards, the quick order list on product pages and a home page made for reordering.

Get help

Can't find what you need? Contact Realmdrop Software support: Beacon support form. We reply within two business days.

Please include your store URL and, if you can, a screenshot or the page where you see the problem.