Signal: merchant setup guide

1. Getting started#

Install#

1. In Shopify admin go to Online Store > Themes.
2. Add Signal from the Theme Store (or upload the theme ZIP) and select Customize.
3. Open Theme settings (the paint brush icon) in the editor.

Choose a preset#

When you install from the Theme Store, you get the home page layout of the preset you picked. Switching preset later in the editor changes only the theme settings (fonts, colors, panels, corners, cards). It does not rearrange your sections or change your content. Choose the preset first and fine-tune afterwards, because it replaces your Theme settings values.

Before you build the pages#

• Create the menus in Content > Menus: main-menu, footer and customer-account-main-menu.
• Create the collections you want to show (bestsellers, one per category).
• Install Shopify's free Search & Discovery app for collection filters and the "Buy it with" products.
• Reviews: to show the star chip on cards and the hero, install a product reviews app that writes Shopify's standard rating metafields (reviews.rating and reviews.rating_count).
• Subscriptions: to show "Subscribe and save" on a product, install a subscription app and create selling plans for the product. Signal shows them; it does not create them.
• Bundles: the bundle builder only estimates the discount. Create a matching automatic discount in Discounts.
• Benefit lines: create the custom.benefit product metafield (see Metafields) and fill it in for your products.
• Add countries in Settings > Markets and languages in Settings > Languages if you want the selectors to appear.

2. Theme settings#

Everything in this section lives in Theme settings. Most groups are shared with the other themes in the family; Signal is specific to this theme.

Signal (panels and type)#

• Panel corner radius: 0, 8, 12, 20 or 28 px. Every section on a color scheme other than scheme 1 is drawn as a rounded panel on the page background.
• Space between panels: 8 to 32 px. The page background shows through the gap.
• Show a soft shadow under panels: off keeps panels flat on the page.
• Small labels: monospace or the body font, for chips, stat labels and the announcement bar.
• Ghost type opacity: 4 to 20%, how visible the giant decorative words are.

Logo and favicon#

Logo, Inverse logo (for dark schemes), widths for desktop and mobile, and a 32 x 32 px Favicon.

Colors and color schemes#

Each preset has five schemes in fixed roles: 1 the page tint, 2 the white panel, 3 the inverse (dark) panel, 4 the accent band, 5 a soft pastel band. A section on scheme 1 sits directly on the page; any other scheme draws it as a panel. Change a section's Color scheme to change its panel. Show the accent color on chooses buttons, badges or both. Set the sale, sold out and custom badge colors under Badges.

Typography#

Heading font, weight, scale (compact, default, large, display), size, case and letter spacing; body font and size. Fonts come from Shopify's font library. Uppercase headings run one size smaller automatically.

Layout#

Page width (1200, 1440 or 1680 px), page margin, grid spacing, Space between sections, corner radii for buttons, inputs, cards and media, uppercase buttons and the secondary button style. In Signal, small controls such as chips, pills and swatches are always rounded; the radius settings apply to buttons, inputs, cards and media.

Header#

Signal's header is always the floating bar, so the Header group in Theme settings has one setting, Sticky header. There is no layout or transparent option. The full list of header settings is in section 3.

Product cards#

Image ratio and fit, card style, tile color, shadow, second image on hover, vendor, Show product rating (needs a reviews app), color swatches, Enable quick add, text alignment, badges (position, sale format, sold out, custom tag prefix) and swatch shape and size. Tags named new and bestseller (any case) show a "New" or "Bestseller" chip on the card. A tag that starts with badge: shows its text as a chip.

Cart#

Cart type (drawer or page), order note, recommendations, Free shipping progress bar and its minimum, and the Gift wrap product. The progress bar is on in all four presets; set the minimum to match a real free shipping rate in Shopify's shipping settings.

Search, animations, social media, currency#

Search suggestions (with vendor and price toggles), a popular searches menu and a featured collection for the empty search window; reveal on scroll and the hover effect (none, zoom or lift); social account links; currency codes.

3. Signature sections and blocks#

Header#

Section: Header.

• Menu, and Show every submenu as a mega panel.
• Button label, Button link and Button color (accent or ink). The button sits at the right of the bar. Leave the label empty to hide it. Without a link it goes to all products.
• Icons: show search, show account, show social links in the mobile menu, country and language selectors.
• Account menu: the links of the account sheet (default menu customer-account-main-menu). The account icon is Shopify's account component, shown on every screen size when customer accounts are enabled.
• Show the bottom dock on phones: a bar with Home, Shop, Search and Cart (with the item count). Shop link (defaults to all products) and Dock color scheme. The dock hides while the product page's sticky add-to-cart bar shows.
• Space above the bar (0 to 24 px), Color scheme and Menu color scheme.
• Mega menu feature blocks (up to 8): type the exact title of a top-level menu item in Menu item, then choose a Collection (its first 4 products show as a strip), a Heading, and an optional Image tile with a link.

Hero product#

Section: Hero product. Put it first on the home page.

• Product: choose the product to feature. On a product page it can stay empty.
• Heading (empty uses the product title), Heading tag (use one heading 1 per page), Text, Rating text (for example "4.8 from 2,300 reviews"; the product's review metafields are used instead when they exist).
• Image (a cut-out on a transparent background works best), Image position (start or end), Image fit (contain or cover).
• Buy box: show price, variant options, quantity selector, dynamic checkout buttons, a link to the product page, and a Button label. The Add to cart button works from the home page.
• Benefit blocks (up to 5): an icon from a list of 14 and a line of text.
• Stat chip blocks (up to 3): a value, a label and a position on the image (six positions), for example "32h" and "battery life". Only enter figures you can support.
• Color scheme, Full-bleed section, top and bottom padding.

Ghost banner#

Section: Ghost banner. A very large word behind a product image, with text and buttons.

• Ghost word (a short word or model name), Word style (fill or outline), Largest word size (120 to 640 px; the word grows to fill the width up to this size), Word vertical offset (how far the image covers the word; 0 covers the bottom fifth of the letters), Scroll drift (none, low, medium, high; it never moves for shoppers who prefer reduced motion).
• Image, Image size, Image fit (cover fills a rounded 4:5 frame; contain shows a cut-out whole).
• Blocks: Heading (1), Text (1), Button (up to 2, primary or secondary).

Stats band#

Section: Stats band. Heading, text, alignment, and up to 4 Stat blocks: Number (digits and an optional decimal point, counted up from 0 when the section comes into view), Before the number, After the number, Label and Small print. Enter measured figures and keep the source of each one; do not publish numbers you cannot support. On the product page, claims that are true for the whole catalog (returns, dispatch time, warranty) belong in the section's own blocks. For figures that differ per product, add a JSON product metafield signal.stats (a list of objects with number, prefix, suffix, label and description, up to 4): it replaces the section's blocks for that product only.

Compare table#

Section: Compare table. Heading, text, a button, and the Feature column title.

• Column blocks (up to 4): Name, Caption and Highlight this column.
• Row blocks: Feature, a Note, and for each column a value of tick, cross or text, with the text. Values for columns that do not exist are ignored.
• The first column stays in place when the table scrolls on a phone.

Routine steps#

Section: Routine steps. Heading, text, Steps in view on desktop (2, 3 or 4; more steps scroll sideways), image ratio. Step blocks (up to 6): Image, Step label (empty numbers the steps automatically), Title, Text and an optional Product that shows with an Add button.

Inline image heading#

Section: Inline image heading. One large statement built from blocks, in order:

• Text (a word or phrase; style plain, marker, outline or ghost),
• Inline image (decorative; shape pill, round or soft; tilt −8 to 8),
• Line break (up to 3).

Settings: heading tag, size (h1, display or mega), alignment, image height, text under the heading, a button, color scheme.

Creator videos#

Section: UGC video. Heading, text, cards per row on desktop (3 to 6), Play videos in view (muted, looping; they pause out of view and stay still for reduced motion), Show creator handle. Video card blocks (up to 12): upload a vertical 9:16 Video (keep it short and small), a poster Image, Creator handle, Caption and a Tagged product (shows a shop chip that opens quick add). Use videos from creators who gave you permission.

FAQ with support#

Section: FAQ with support.

• Question blocks (up to 24): question and answer.
• Settings: open the first question, open one at a time, Add FAQ structured data (helps search engines show the questions).
• Support panel: position, heading, text, Answer time label and Average answer time, and a contact button. Type your real average answer time, or leave it empty to hide it. Add up to 5 Avatar blocks with square team photos.

Bundle builder#

Section: Bundle builder. Shoppers pick products from a collection and add them in one step.

• Collection, Products to show (4 to 12), Columns on desktop, Products in a bundle (2 to 5; shoppers must pick exactly this many), Bundle discount (0 to 40%), Button label.
• Note the bundle on the cart adds a cart attribute such as "Bundle, 15% off" so you can see it on the order.
• The section does not apply a discount. Create an automatic discount in Shopify admin (Discounts > Amount off products) with the same percentage; the total shown on the page is only an estimate.

Quiz call to action#

Section: Quiz call to action. A colorful panel with a question and up to 4 Answer chips. Each chip links to a collection, a page or any URL (without a link it goes to all products). It is a set of links, not a quiz engine.

Product page blocks#

Signal's product page uses the shared blocks (vendor, title, price, variant picker, buy buttons, inventory status, delivery estimate, pickup availability, complementary products, accordion, size chart, share). Three blocks are specific to Signal:

The default product template, in order: rating, title, benefit line, price, variant picker, purchase options, buy buttons, stock bar, delivery estimate, complementary products ("Buy it with"), and an accordion group. Below the product it adds a stats band, an image with text, a compare table, an icon row ("What is in the box"), routine steps, creator videos, an FAQ with support, related products and recently viewed products. Remove or reorder any of them.

Other sections#

The shared sections work in Signal too: Slideshow, Collection list, Featured collection, Collection tabs (used for "Bestsellers" with tabs), Image with text, Marquee, Shop the look, Before and after, Testimonials, Logo list, Video, Countdown timer, Timeline, Icon row, Blog posts, Contact form, Newsletter, Footer, Custom Liquid. Their settings are described in the Tessera guide. In Signal each of them draws as a panel when its color scheme is not scheme 1, and has the same padding settings.

Collection page#

Section: Collection. Signal's template shows an image banner (drawn as a panel), a sub-collection chips block, a white toolbar, filters in a drawer and a quiz call to action after the grid. The settings are the same as in the Tessera guide (filter layout, density switch, pagination, sticky toolbar).

4. Metafields#

Create custom.benefit in Settings > Custom data > Products > Add definition: name "Benefit", namespace and key custom.benefit, type Single line text. Then fill it in on each product. Keep it to one short line (the card shows one line, 14px).

custom.benefit = "Clears pores without drying your skin"

The two review metafields are written by your reviews app. A rating value looks like this:

{ "value": "4.8", "scale_min": "1.0", "scale_max": "5.0" }

Other store data Signal uses:

• Product tags: new and bestseller show chips; badge:Text shows a custom chip.
• Selling plans from your subscription app: purchase options.
• Complementary products from Search & Discovery: "Buy it with".
• Automatic discounts from Shopify: the bundle builder's real discount.

5. Home page recipe#

The default home page order works for all four presets:

1. Hero product
2. Collection list (categories)
3. Collection tabs ("Bestsellers")
4. Ghost banner
5. Stats band
6. Compare table
7. Inline image heading
8. Routine steps
9. UGC video
10. Logo list (value words)
11. FAQ with support
12. Icon row (trust)
13. Newsletter

You do not need all of them. A store with one product can keep the hero, stats, compare, FAQ and newsletter. Alternate colorful panels (schemes 3, 4, 5) with white ones (scheme 2) so the page reads as a stack of distinct panels, and keep scheme 1 for sections that should sit directly on the page.

6. FAQ#