The page, unchanged
The section is left out of the page entirely. The product template renders exactly as it did before the block was dragged in.
Routine suggestion
What goes with this one, out of your own data.
A section block on the product template that shows the complementary products you set in Shopify. It renders in Liquid while Shopify builds the page, so it is painted with the rest of your theme — and every card it prints is a product a shopper can buy at that moment.
The data
The pairings are yours, set on the product in Shopify.
On a product in Shopify admin you can name the products that go with it. That field is where this block reads from, and it is the only place it reads from.
The block runs in Liquid while Shopify builds the page: it reads the field, counts how many of those products can be bought, and renders the cards. That path is Liquid and your catalogue: one field, read while the page is built, so a card and Shopify agree at the moment a shopper sees it.
The same field also answers the shopper who asks the chat what goes with a product, so the section on the page and the answer in the panel quote the same field.
Everything on this page was read out of the block that ships: its template, its settings schema, its eleven translation files and the plan table that decides whether it appears. Every figure below is a property of that code.
Settings
Five settings, and that is the whole list.
These are all the choices the block offers in the theme editor. Leave any of them empty and it falls back to a value it can defend.
Heading and subheading
Write your own, or leave both empty. Empty falls back to the wording in your vertical pack, then to the block’s own translation — eleven storefront languages ship with it.
How many products
Between two and four, three unless you change it. If fewer than that can be bought, fewer are shown: the row carries exactly the ones a shopper can buy.
The label on the button
One word by default. The button posts one unit of the variant on the card to Shopify’s own cart endpoint, and tells your theme to refresh the cart.
Accent colour
Optional, and left empty on purpose in most stores: the block inherits the colour you already chose for the chat, so one decision covers every surface. A value you do type passes through Shopify’s own colour filter, and only a colour it recognises is printed.
Where it sits
You drag it into the product template where you want it and remove it the same way, in Shopify’s own theme editor. The placement lives in your theme’s own layout data, written by Shopify when you drop it in.
Which products to pair is set on the product in Shopify, where your catalogue already is — one list, edited in one place, by the person who knows the range. Holding a second copy inside Refik would give you two lists to keep in step with each other.
Limits
What reaches a shopper, and what the block leaves alone.
A suggestion block is the easiest place in a store to become slightly untrue — a sold-out item, a price that differs from the till, a pairing invented by software. Each of those three is closed off inside the block itself.
Every card it prints
- A product a shopper can buy at that moment — stock is read once to decide whether the section appears at all, and again for every card, because stock can change after you set the pairing
- A pairing you chose yourself: when the field is empty the whole section stays off the page, heading and row together
- The price the shopper is charged: the figure on the card and the variant the button adds are read from the same value
- Your own catalogue and your own stock, and only those
What it leaves alone
- Your theme files. It is a theme app extension block, switched on and off by you
- A product, a price or an order. The only write it makes is a line in the shopper’s own cart, and only after they press the button
- The order you set in Shopify. It lists your pairings in the order you put them
- The routine table in the chat panel. Listing what pairs with a product and building an ordered routine are two different jobs, and this block does the first
The price rule is here because it was once wrong. The card printed the cheapest variant’s price while the button added the first variant in stock, so the moment a cheap size sold out the shopper read one figure on the card and was charged another, silently. Both now come from the same value, and a test holds them together.
Silence
When the row would be empty, three people are told three different things.
A block that draws a blank in silence is the worst outcome: you dragged it in, the page looks finished, and the reason stays hidden. So the silence is split by audience.
The reason and the fix
A note only you can see, naming which of the two states you are in and what would change it. It is printed only inside the theme editor, so it reaches you alone.
A console warning
The same sentence is written to the browser console on the live storefront too, so “why is that section missing” can be answered by looking.
The two states are kept apart because the work is different. An empty pairing field sends you to that product in Shopify admin to fill it. All of them out of stock asks only for patience: the section returns on its own once one of them is back. An earlier version counted the field where it should have counted the stock, so a product whose pairings had all sold out printed a heading above an empty row — quiet enough to pass review, and wrong on the page.
Two jobs
A suggestion and a routine are two jobs.
The block is named after the routine, but it does one part of it. Knowing what pairs with a product and putting products in the order they are used are different questions, and Refik answers them in different places.
This block, on the page
- Lists what you paired with the product the shopper is already looking at
- Shows each one’s price and puts it in the cart in a single press
- Runs in Liquid, so it can sit on every product page at the cost of the page itself
- Renders on the server, so it is painted with the rest of the page
The chat, when asked
- Builds an ordered set and puts it on a routine table the shopper can see
- Can pin the product they are on into that set and choose the other steps around it
- Names which of the concerns they stated the set still leaves open, in the order they said them
- Reads the same complementary data, so both surfaces quote one field
The separation is written into the assistant’s own instructions: the tool that lists pairings is told, in as many words, that the routine table belongs to the routine tool alone — so a shopper who asks for a routine gets the routine. A recorded conversation is on the session page.
Questions
Questions about this block
Which plan does it need?
The four section blocks — search help, product questions, the question bar and this one — are on Growth and above. Starter ships the chat bubble as its one storefront surface. The tiers are on the pricing page.
What happens if the plan flag is unreadable?
The block renders. Refik writes its own plan flag when your plan changes, and if that flag is missing or unreadable the block is shown: a fault on our side leaves a section you are paying for on the page. Only an explicit “off” hides it, and when it does you get a note in the theme editor saying so.
Does it slow the product page down?
The cards are built on the server, so they are painted before the block’s stylesheet arrives. The declarations that decide the size of a card are repeated inside the block itself; when the stylesheet lands, only colour and shadow change, so the layout holds. A test compares the two copies and fails if they drift apart.
What if only one product is paired?
One card, at the width of a card. This was wrong once: the row was told to fill the space it was given, so a single pairing stretched across the full page and its square image became a page-wide square. Cards now have a maximum width and line up from the start; leftover space stays empty.
Where does the wording come from if I leave the fields empty?
Your vertical pack first, then the block’s own translation. A beauty store gets “Complete the routine” and “What our advisor pairs with this”; the block’s own default is “Goes well with this”. Both ship in eleven languages, and the vertical packs are listed with what each one changes.
Which templates can it go on?
The product template, and that is the only one Shopify offers you: the block declares that template in its schema, because the pairings are a field on a product. The question bar is the block that goes on any template — the five surfaces are compared on where Refik answers.
Where this block sits among the other four, and what each of them covers, is on where Refik answers. What it reads out of Shopify, and the single line it writes, is listed step by step on the setup page.