With the LINE friend-add CTA, you can put a friend-add and LINE-link prompt on the pages of your Shopify store. You decide the copy and display rules in Lumo, switch it on in your Shopify theme, and the prompt adapts to each visitor's state on its own.
What the LINE friend-add CTA does
You can choose from four kinds of prompt that let visitors add your LINE account as a friend, or link their LINE account, right where they are.
| Type | How it looks | Good for |
|---|---|---|
| "Floating" | A button that stays in a corner of the screen. On PC, clicking it shows a QR code | A low-key prompt on every page |
| "Popup" | A modal that appears after a delay or at a scroll depth. Visitors can close it | Making the offer stand out and nudging visitors to add you |
| "Bar" | A band fixed to the top or bottom of the screen | A prompt that stays visible without getting in the way |
| "Inline" | A block embedded anywhere on the page (placed in the theme editor) | A fixed spot such as the product description or the footer |
What the visitor sees switches automatically with their state.
| Visitor state | Prompt shown | What happens after the tap |
|---|---|---|
| Not logged in to the store | Friend add | Goes to the LINE friend-add flow |
| Logged in, not a friend yet | Friend add and ID link | Adds you as a friend and links the Shopify customer with LINE at the same time |
| Logged in, and this browser already knows the friend | ID link | Links with one tap |
| Linked | Nothing | — |
On a phone, tapping the button opens the LINE app, and the friend add or link finishes there. On PC, the QR code takes center stage so the visitor can scan it with their phone. A "Continue on PC →" link sits next to the QR code for visitors who prefer to log in to LINE in the browser.
Every CTA gets its own QR code, so you can see which CTA brought each friend as a traffic source. The recorded source works as-is in reports and as a workflow condition.
What you need to use this feature
Showing a CTA requires a connected Shopify store and LINE Login.
- Your Shopify store is connected to the LINE official account
- LINE Login is set up on the LINE official account (needed for ID links)
- You can edit the Shopify theme in the theme editor (to switch the app embed on)
The CTA works alongside popups from other tools such as Klaviyo. Put them in different corners and they won't overlap.
Opening the CTA list
The CTA list lives inside the Shopify integration screens.
Pick the LINE official account in the navigation menu and open "Customer Data" > "Shopify". In the Shopify integration screen, click "CTA" in the side menu.
The list shows each CTA's name, type and status, plus views, clicks, friend adds and ID links for the last 30 days. Click "Create CTA" to add one.
Creating a CTA
You set the type and copy, the offer, the display rules and the measurement in that order, then click "Save CTA". The preview on the right updates as you go, so you can check the look while you work.
Basics
| Setting | Description |
|---|---|
| "CTA name" | An internal name. Visitors never see it |
| "Type" | Floating, Popup, Bar or Inline |
| "Position" | Bottom right or bottom left for Floating; top or bottom for Bar |
Copy
Leave the headline, body and button blank and Lumo's default copy is shown. Switch "Language to edit" to write Japanese, English, Traditional Chinese and Thai separately. The store picks the language from the visitor's browser.
There are two sets of copy.
- Friend add (visitors who are not logged in): shown to visitors who aren't logged in
- LINE link (logged-in customers): shown to logged-in customers, inviting them to add you and link at the same time
You can also set the small "Note" under the button and, for popups, an "Image" at the top.
Offer
Choose "Coupon" under "Offer" to pick a coupon campaign and set the "Offer name shown to visitors", for example "10% off coupon". {coupon} in the body is replaced with this name.
The CTA only announces the offer. The coupon itself is delivered by the response message of the QR code that Lumo creates for the CTA, or by a workflow message. Put the variable that matches the campaign's key into that message (for example, {{ shopify.discount_code_welcome10 }} when the key is welcome10).
Display rules
| Setting | Description |
|---|---|
| "Page types" | Home, product, collection, cart, page, blog, article or search. With none selected, the CTA shows on every page |
| "URL contains" | One entry per line. The CTA shows only on pages whose URL contains the text |
| "Exclude URLs" | One entry per line. The CTA never shows on these URLs |
| "When to show" | Immediately, after a delay or at a scroll depth (mainly for popups) |
| "Devices" | All, phones only or PC only |
| "Frequency" | How many days to hide the CTA after it's dismissed, and whether to show it once per visit |
| "After closing" | What happens after a popup or bar is closed. "Keep as a floating button (default)" leaves a small button in a corner that reopens the prompt any time. "Hide" keeps it hidden until the dismissal days pass. When kept, choose the corner under "Floating button position" |
If a separate Floating CTA is on the same page, the small button after closing isn't shown. Only one popup shows per page.
Measurement
"Control group (hidden) ratio" hides the CTA from a share of visitors so you can measure its effect. Set it to 0% to turn this off.
"Traffic source (QR code)" shows the QR code Lumo created for this CTA. Use "Open QR code" to change its response message and other settings.
Preview
In the preview on the right, switch "Preview as" between "Not logged in", "Logged in, not a friend yet", "Logged in, not linked yet" and "Linked", and "Device" between phone and PC, to check exactly how the CTA looks.
Switching the CTA on in your Shopify theme
A CTA created in Lumo appears on the store once you switch the app embed on in the Shopify theme editor.
| Step | Action |
|---|---|
| 1 | In Shopify admin, open "Online Store" > "Themes" > "Customize" |
| 2 | Open "App embeds" in the left panel |
| 3 | Under "Lumo LINE friend-add", switch on "Show the LINE friend-add CTA" |
| 4 | Click "Save" |
Once it's on, Floating, Popup and Bar CTAs are controlled entirely from Lumo. The embed's "Floating button position" is there if you want to fix the corner on the theme side. Leave "Environment" set to production.
Placing an Inline CTA
Inline CTAs appear where you add the "LINE friend-add (Lumo)" block to a section in the theme editor. The Inline CTA whose display rules match the page shows in that spot. The block has no settings of its own.
What happens when a PC visitor scans the QR code
PC visitors are guided to scan the QR code with their phone.
When a customer who is logged in to the store scans it, the friend add and the ID link both finish on the phone. A visitor who isn't logged in only becomes a friend; no ID link is made. For safety, the QR code is issued afresh every time the popup or panel opens, and it expires after 10 minutes.
Visitors who can't scan can use "Continue on PC →" to log in to LINE in the browser instead.
Checking the results
You can see and use the CTA's results in the list, in reports and in workflow conditions.
- List figures: views, clicks, friend adds and ID links for the last 30 days, per CTA
- Friend-add sources: each CTA's QR code is recorded as the traffic source, so the friend-add source report shows which CTA brought each friend
- Workflow conditions: use the traffic source as a condition, for example to send the offer message only to friends who came from this CTA
- External services: when Klaviyo or HubSpot is connected, the traffic source property is updated there too
When things don't work
If the CTA doesn't show, check the theme's app embed first, then the display rules.
| Symptom | What to check |
|---|---|
| Nothing shows on the store | Make sure "Lumo LINE friend-add" is on under "App embeds" in the theme editor and the theme is saved. Also check that the CTA's "Status" is active |
| It doesn't show on a certain page | Check "Page types", "URL contains", "Exclude URLs" and "Devices" |
| It stopped showing after being closed | It won't reopen on its own during the days set under "Frequency". With "After closing" set to keep a floating button, visitors can reopen it from the small button |
| I see it but some customers don't | The share set under "Control group (hidden) ratio" deliberately doesn't see it. Linked customers don't see it either |
| The Inline CTA doesn't show | Check that the "LINE friend-add (Lumo)" block is in a section and that the page matches the Inline CTA's display rules |
| Scanning the QR code on PC doesn't link the ID | Make sure the QR code was opened while logged in to the store. A QR code opened more than 10 minutes ago has expired; reopen it and scan again |
| The coupon doesn't arrive | Coupons are sent by the CTA's QR code response message or a workflow. Check that the message contains the coupon variable and that the campaign is active |
| What happens to the QR code when a CTA is deleted | The QR code and its traffic-source records stay even after the CTA is deleted |