Storefront · Question bar
Four of the five storefront blocks are tied to a place. The chat bubble runs everywhere at once; product questions and routine suggestions only exist on a product page; search help only on search results. The question bar is the exception in both directions: it is the only one whose place on your store is entirely your choice, and the only one that passes every question straight to the panel.
It is a section block where the chat bubble is an app embed, and that single difference decides everything else on this page. An embed is switched on once and then appears by itself. A section block exists from the moment you drag it somewhere.
Its block declares every template, so Shopify offers it on the home page, on a collection, in the cart, on a policy page — anywhere your theme has a section. The other three in-page blocks each declare exactly one template, and Shopify hides them everywhere else.
Section → Add block → Apps → the Refik question bar. That is Shopify’s own theme editor; the placement is stored in your theme’s layout data, written by Shopify when you drop it in.
An accent colour, and a switch for phones. Everything a shopper reads — the line above the box, the label on the button, the example questions — comes from the translation files the block ships with.
The chat bubble’s panel has 43 fields, because that block speaks in your shop’s voice. This one carries interface text, so those two fields are the whole surface you maintain.
Your drag is the only thing that puts it on a page: the block ships with every template declared and the position left to you. Until you place it, your storefront runs exactly as it ran before, and removing it is the same gesture in reverse.
On a narrow screen it stays hidden even after you place it, until you turn the phone switch on. That decision was measured, and the measurement is at the bottom of this page.
One fixed example tells a shopper that they may type something. A line that changes tells them what they may type — and that is the whole reason this block is a bar with a rotating line inside it.
Each example has to point at a need the catalogue can actually answer, and that is checked when the block is built, long before a shopper is standing in front of it. A store with a pack for its kind of business gets the examples from there; every other store gets them from the general translation file, in the same eleven storefront languages as the rest of the block.
One of the six used to ask for a routine for fine hair. The matcher carried other needs and that catalogue carried other products, so the bar was advertising the one question the assistant had to hand straight back. It was replaced by a keratin routine, which the matcher answers with a four-step chain. A prompt the store can answer is the only kind worth printing.
Its module runs entirely in the browser: the bar collects a sentence and raises one internal event. The plan check that guards search help and the product summary lives on a server, and this block stays on the near side of it. The answer belongs to the chat panel, which already holds the shopper’s cart, their order and their language.
What the shopper typed leaves the bar on the same internal browser event that the product-page module and the search row use. It travels the route that already existed, so one place in the storefront turns a question into a conversation.
The panel opens with the question already in it and sends it from there. The shopper types the sentence once.
A small queue holds work until the panel takes over, and it treats a typed question differently from everything else in it: opens and exit signals collapse to one, a cart event keeps only the latest, and typed questions are kept whole. Dropping one of those would be dropping a shopper’s own sentence.
Anything past 400 characters is cut at 400 before it is sent, so a pasted wall of text reaches the panel at the size of a typed one. An empty box returns the cursor and waits.
The chat bubble is what the bar hands to, so with the bubble switched off the block renders an empty container and stops. A box you can type into that leads nowhere is the worse of the two failures, because it looks like a working box.
That case announces itself. The block writes one warning to the browser console, and in the theme editor it leaves a visible note inside the empty container — a note you alone see.
Counted from the block’s own schema, its module, and the translation files it ships with.
2
settings on its panel in the theme editor: an accent colour, and a switch for phones.
6
example questions in the rotation, each one pointing at a need a catalogue can answer.
0
network requests its own module makes. The question travels on a browser event, and the panel does the asking.
Read from the block that ships: its settings schema, the module that drives the rotation, and the eleven translation files the examples come from. Each of the three is a property of that code.
All five answer from the same thing — your catalogue, your stock and the rules you typed in setup — so a shopper gets one answer wherever they ask. What separates them is where they can go and what they are allowed to read.
Runs site-wide as an app embed and has the largest settings panel of the five, because it speaks in your shop’s voice. It is also the one that answers, which is where the bar’s questions end up.
Lives on the product template and is written for the product it is on. It knows which page it is on; the bar deliberately leaves that unread.
Lives on the search results template and reads what the shopper searched for. The bar leaves the query alone.
Lives on the product template and is built from the complementary products you already marked in Shopify. It reads a metafield; the bar reads only what the shopper types.
Read from the five blocks’ own schemas and modules: which templates each one declares, how many settings it offers, which scripts it loads, and which of them calls out to a server. The five side by side, with what each one covers, are on the storefront page.