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.
Friends added through a CTA are recorded with the acquisition route "Website friend-add CTA". The CTA placement name is recorded as the touchpoint, so you can still see which CTA brought each friend (behind the scenes, the QR code Lumo creates for each CTA is tied to the placement). The URL of the page where the friend add started is recorded too (including phone visitors who went straight from the button). The recorded route, touchpoint and page work as-is in reports and as workflow and segment conditions.
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 can run alongside popups from tools such as Klaviyo. Adjust placement and timing, then check phone and desktop previews for overlap.
You can show the same CTA on your own sites outside the store (a landing page, for example). Add the site's URL under the CTA's "Sites to show on" and paste the tracking code on each page of that site. Outside the store, the CTA only invites visitors to add you as a friend. The steps are in the article "Adding a friend-add CTA to your website".
Opening the CTA list
The CTA list lives in the LINE official account's side menu.
Pick the LINE official account in the navigation menu and click "CTA" in the side menu (it sits right under "QR Codes").
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 Shopify storefront language.
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". Choose "Name only" to set just the name without picking a campaign (you deliver the offer with a message of your own). {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. When a coupon campaign is selected, put the variable that matches the campaign's key into that message (for example, {{ shopify.discount_code_welcome10 }} when the key is welcome10). With "Name only", send the offer with a message you prepare yourself.
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 |
| "Audience" | "All visitors" or "Test viewers only". Register test viewers on the "ID linkage" tab of the Shopify integration. With Test viewers only selected, visitors who are not logged in to the store do not see it |
| "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" shows the route Lumo created for this CTA, marked "Auto-created". To send a greeting or reward message right after the friend add, use "Set up greeting and reward messages". Use "Open route details (QR code)" to review the route itself.
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 when the "Lumo LINE CTA" app embed is enabled for the theme you want to use.
| Step | Action |
|---|---|
| 1 | In Shopify admin, open "Online Store" > "Themes", then open the theme editor for the target theme |
| 2 | Open "App embeds" in the left panel |
| 3 | Turn on the toggle beside "Lumo LINE CTA" |
| 4 | Expand its settings and make sure "Show LINE CTAs / LINEのCTAを表示する" is also on |
| 5 | Click "Save" and preview the theme |
In English and Japanese editors, the display setting and its help text show English and Japanese together. Configure copy, offers, display rules, and Floating or Bar positions under "CTA" for the LINE official account in Lumo. There are no position or environment selectors in the theme settings.
Enable the embed for each theme you use. For the live store, configure the published theme; when switching themes, enable it again in the new theme.
Placing an Inline CTA
Create an Inline CTA in Lumo and set its display rules. In the theme editor, open the target page and add the "Lumo LINE CTA" block to a section that supports app blocks, then save. Sections without app block support cannot host it.
Inline CTAs also require both the "Lumo LINE CTA" app embed and its display setting to be enabled. The placement shows the Inline CTA that matches the page's display rules. Copy and display rules are configured in Lumo, not in this block.
"Lumo LINE ID Link" can be added to the new Thank you and Order status pages, and the Profile and Orders pages of new customer accounts. It cannot be placed on legacy customer account pages. See How to integrate Shopify.
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.
On the Free and Starter plans, the QR code view for PC shows a "Powered by Lumo" label.
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: friends who come through a CTA are recorded with the route "Website friend-add CTA", and the CTA's placement name as the touchpoint. The friend-add source report shows which CTA brought each friend
- Acquisition funnel report: in the report Acquisition Funnel dataset, analyze how many people reach each stage — CTA views → clicks → friend adds → ID links → orders — by route and touchpoint. The page axis is available too (it covers friend adds onward; CTA views and clicks carry no page information)
- Workflow and segment conditions: use the route type, the QR code (CTA placement) and the URL of the page the friend add started on as conditions, for example to send the offer message only to friends who came from this CTA
- External services: when Klaviyo or HubSpot is connected, the first friend-add route and page are written to the "LINE Acquisition Route" and "LINE Acquisition Page" properties
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 CTA" 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. With "Audience" set to "Test viewers only", nobody outside the registered test viewers sees it |
| The Inline CTA doesn't show | Check that the "Lumo LINE CTA" 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 |