`, appends it to the page, and mounts its interface into *that div only*. The only change to your theme’s DOM is one appended sibling node — Quikly never re-renders, reflows, or invalidates your existing markup. **Its styles can’t leak into your theme.** Quikly’s CSS reset is namespaced to its own `q_`-prefixed classes, so it can’t restyle your elements. The campaign stylesheet is injected via JavaScript after your page has already rendered, so it isn’t render-blocking for your storefront — it only gates the paint of Quikly’s own widget. ## What this means for your Core Web Vitals [Section titled “What this means for your Core Web Vitals”](#what-this-means-for-your-core-web-vitals) Because nothing Quikly loads is render-blocking, it stays out of the metrics that matter most for your storefront: * **Largest Contentful Paint (LCP):** Quikly’s scripts and styles load off the critical path, so they don’t delay your store’s main content from painting. * **Interaction to Next Paint / responsiveness:** the widget’s work happens after your page is interactive, so it doesn’t push back time-to-interactive. * **First paint and `DOMContentLoaded`:** unaffected, since every Quikly script is async or dynamically injected. The Quikly widget appears as a follow-on paint into its own layer, after your store is already usable. ### A note on layout shift (CLS) [Section titled “A note on layout shift (CLS)”](#a-note-on-layout-shift-cls) The widget can render in several different placements, and its layout impact depends on which you choose: * **Overlay placements** — a popover, or a fixed bar pinned to the top of the viewport — layer *over* your page without moving your existing content, so they don’t shift your storefront’s layout. * **Inline placements** — injecting the widget into the flow of the page, or having it take over an existing theme banner — occupy space in your layout by design. Because the widget paints after your page loads, an inline placement can produce a small layout shift as it appears. Either way, the placement is something you configure intentionally, so any space the widget takes is a deliberate part of your page rather than an unexpected jump. If layout stability is a priority for a given page, an overlay placement avoids movement entirely. ## The one honest caveat [Section titled “The one honest caveat”](#the-one-honest-caveat) We won’t claim a live campaign is completely free. When a campaign *is* running, there’s a small, **deferred** cost: an extra UI bundle download, the widget’s stylesheet, a client init, and one data round-trip before the widget appears. Like any third-party widget, that competes for bandwidth and CPU. The important part is *when* it happens: all of it occurs **after** your storefront is interactive, and none of it sits in front of your page render or delays first paint, `DOMContentLoaded`, or interactivity. In short — there’s a lightweight cost only when there’s actually something to show a shopper, and even then it’s engineered to stay off the critical path. ## How to verify it yourself [Section titled “How to verify it yourself”](#how-to-verify-it-yourself) Open your browser’s DevTools, go to the **Network** tab, and load a storefront page: * **With no live campaign:** you’ll see the small `embed/js` bootstrap request resolve to an empty response — no campaign UI bundle or stylesheet follows. * **With a live campaign:** you’ll see the additional UI bundle and stylesheet load *after* the page’s own requests, as async, post-load fetches rather than render-blocking resources. *** ## Our Lighthouse measurements [Section titled “Our Lighthouse measurements”](#our-lighthouse-measurements) The rest of this page documents Quikly’s analysis of the performance impact of the Quikly Shopify app on a Shopify store. ### Requirements [Section titled “Requirements”](#requirements) * [To be published in the Shopify App Store, your app must not reduce storefront Lighthouse performance scores by more than 10 points.](https://shopify.dev/docs/apps/best-practices/performance#testing-for-performance:~:text=To%20be%20published%20in%20the%20Shopify%20App%20Store%2C%20your%20app%20must%20not%20reduce%20storefront%20Lighthouse%20performance%20scores%20by%20more%20than%2010%20points) * To qualify for Built for Shopify status, your app must not reduce Lighthouse performance scores by more than ten points, and must meet [other applicable criteria](https://shopify.dev/docs/apps/store/built-for-shopify/criteria) ### Testing methodology [Section titled “Testing methodology”](#testing-methodology) Each page is analyzed as many times as needed for a performance number to repeat three times. Only when a performance is achieved three times is it taken into account, after which the counter for that number restarts. The first five numbers (including if duplicated) are taken into account, as a way to eliminate outliers in the final calculation. The extremes will be mentioned but not taken into account mathematically since they tend to be anomalies. Usually this results in around 50 lighthouse reports for each state. ### Storefront App Extension Performance [Section titled “Storefront App Extension Performance”](#storefront-app-extension-performance) These are the lighthouse reports for the storefront page on mobile (as per the [testing guide](https://shopify.dev/docs/apps/best-practices/performance/storefront)). Our app loads a banner and also an animated drawer here. Due to the nature of the drawer animation and the need to fetch graphics, it is within expectations that performance would be slightly reduced compared to the clean install of the shopify storefront. #### Performance on a Clean Storefront (Starting Score) [Section titled “Performance on a Clean Storefront (Starting Score)”](#performance-on-a-clean-storefront-starting-score) The average performance of a clean storefront hovered in the low eighties, peaked once at 91 and bottomed out at 59. Interesting, it would also very consistsently yield a score of 62 or 63 every third or fourth page load. Maybe a nuance with Shopify caching?  Starting Score = (85 + 62 + 83 + 86 + 88) / 5 = (404 / 5) = 80.8 #### Performance with our App (Ending Score) [Section titled “Performance with our App (Ending Score)”](#performance-with-our-app-ending-score) The average performance of the storefront with our app against our test servers hovered in the high seventies. Peaking once at 89 and bottoming out at 52. Noticeably, our app seems to underperform on first load after a fresh install, and performs much better on subsequent pageloads. Our app also performs significantly better on desktop rather than mobile, likely due to our app taking up relatively more visual space on mobile, tending to hover in the high eighties and low nineties versus the clean desktop performance hovering the mid-nineties. The addition of our app also seemed to eliminate the frequency with which the storefront lighthouse performance would cyclically hit the low sixties, as it would do clean.  Ending Score = (78 + 79 + 63 + 74 + 76) / 5 = (370 / 5) = 74 #### Storefront App Extension Performance Ratio [Section titled “Storefront App Extension Performance Ratio”](#storefront-app-extension-performance-ratio) Performance ratio = (Starting Score / Ending Score) = 74 / 80.8 = 0.915 Furthermore, on average, our app does stay within a 10 point reduction of the lighthouse performance score. That being said, there are definitely improvments to be made here. To begin with, testing against our test API is slower than our live API, so there should be performance improvements available there. In addition to that, once client needs become more apparent after launch, there are a lot of variations with how we can store information within shopify to create more elegant loading states for banners that appear immediately, which should drastically improve performance. ### Checkout Extension Performance [Section titled “Checkout Extension Performance”](#checkout-extension-performance) The lighthouse on mobile for a clean checkout throws an error: The page did not load any content. Please ensure you keep the browser window in the foreground during the load and try again. So we will be using the desktop for this. All in all, using the eye test and with the knowledge of how lighthouse performance check works, the checkout extension should fare much better –– the loading should be virtually instantaneous since the presence of the intial state is determined not by a fetch but by cart attributes. #### Performance on a Clean Checkout (Starting Score) [Section titled “Performance on a Clean Checkout (Starting Score)”](#performance-on-a-clean-checkout-starting-score) The performance of a clean checkout stayed between low eighties and high seventies with no real outliers.  Starting Score = (82 + 78 + 74 + 83 + 80) / 5 = (397 / 5) = 79.4 #### Performance with the Checkout Extension (Ending Score) [Section titled “Performance with the Checkout Extension (Ending Score)”](#performance-with-the-checkout-extension-ending-score) As per expectations, our checkout extension performs very well in lighthouse performance analysis. It is not 100% clear as to why the score is elevated to above that of a clean page, but regardless of that, the score is well within acceptable ranges and effectively does not reduce lighthouse performance at all. There were no real outliers during numerous reloads –– the checkout extension is very consistent.  Ending Score = (82 + 83 + 83 + 79 + 81) / 5 = (408 / 5) = 80.6 #### Storefront Checkout Extension Performance Ratio [Section titled “Storefront Checkout Extension Performance Ratio”](#storefront-checkout-extension-performance-ratio) Performance ratio = (Starting Score / Ending Score) = 80.6 / 79.4 = 1.015 # Campaign Ideas > Common ways brands use Quikly — pick the play that matches your goal this week. Not sure what to run next? These are the plays we see brands return to most often, paired with examples from real customer campaigns. Each one maps to a specific goal. ## Grow your email list [Section titled “Grow your email list”](#grow-your-email-list)  **Goal:** Turn anonymous traffic into subscribers. Run a campaign that reveals an offer in exchange for an email. Use it as your sitewide welcome unit, or trigger it on exit intent. Subscribers get a real reward (not a static “10% off”), and you walk away with audiences that opted in to a moment of urgency — they tend to convert better downstream. *Pictured: Chunk Nibbles uses a tiered reward to motivate a fast email opt-in.* Related: [Klaviyo integration](/integrations/klaviyo/) ## Re-engage your existing email or SMS audience [Section titled “Re-engage your existing email or SMS audience”](#re-engage-your-existing-email-or-sms-audience)  **Goal:** Drive a measurable lift from a list send. Send your subscribers to a Quikly campaign built just for them. Because the reward is time-boxed and quantity-limited, the same list responds harder than it does to a flat promo code. Pair the campaign with a Klaviyo or Vibes flow so the reward delivers automatically. *Pictured: Jupiter offers the first 75 subscribers a free Clarity Comb with any $65+ order — one clean reward, capped quantity, no tiered math to parse.* ## Promote a specific product or collection [Section titled “Promote a specific product or collection”](#promote-a-specific-product-or-collection)  **Goal:** Concentrate demand on a single SKU, launch, or category. Target the campaign to product or collection pages so the offer only appears in the right context. This works well for new launches, slow-moving inventory you want to clear, or a hero collection you’re trying to build heat around. *Pictured: Beek puts a one-day, capped offer behind a single hero shoe — concentrated demand without sitewide markdowns.* Related: [Product page targeting](/shopify/tutorials/product-page-targeting/), [Visibility controls](/shopify/tutorials/visibility-controls/) ## Share links with affiliates and influencers [Section titled “Share links with affiliates and influencers”](#share-links-with-affiliates-and-influencers)  **Goal:** Give partners something more compelling than a static discount code. Generate campaign links that unlock a Quikly offer when clicked. Each partner can share their own link, and the urgency mechanic gives their audience a reason to click *now* instead of bookmarking it. You get cleaner attribution and a more interesting story for the creator to tell. *Pictured: Borboleta gives each influencer a tiered VIP unlock — the first 25 of their followers get the deepest discount, then it tapers.* ## A/B test offers on the same day [Section titled “A/B test offers on the same day”](#ab-test-offers-on-the-same-day)   **Goal:** Find out which offer strategy actually moves the needle. Run two campaigns side by side and split traffic between them — for example, a tiered dollar-off ladder against a flat percentage-off code, or a discount against a free-gift-with-purchase. Because Quikly campaigns are quick to spin up, you can resolve the test in hours instead of weeks and roll the winner out the same day. *Pictured: a tiered “first 10 get the most off” structure versus a flat 25% off promo code — same audience, very different psychology.* Related: [Duplicate a campaign](/shopify/tutorials/duplicate-campaign/), [Offer configuration](/shopify/tutorials/offer-configuration/) ## Add urgency to a scheduled storewide sale [Section titled “Add urgency to a scheduled storewide sale”](#add-urgency-to-a-scheduled-storewide-sale)   **Goal:** Lift conversion on a sale you’re already running. Instead of “20% off all day,” cap the offer with a redemption limit or a countdown. Shoppers who would have browsed and bounced have a reason to check out now. Layer this on top of your existing sale calendar — it doesn’t require a new campaign concept, just a tighter constraint on the one you’ve already planned. *Pictured: Neuro tiers the discount so the fastest shoppers get the most off, and Jetson caps a sitewide offer at 25 orders to convert browsers into buyers before the count runs out.* Related: [Offer configuration](/shopify/tutorials/offer-configuration/) ## Amplify an existing sale [Section titled “Amplify an existing sale”](#amplify-an-existing-sale)  **Goal:** Pull conversion forward in the day on a sale you’re already running. Stack a small bonus on top of your live sitewide promotion — an extra $5 off, or an extra 5% — and keep the quantity intentionally tight. Even something like *an extra $5 off the first 20 orders* is enough to pull conversion forward in the day. The reward can be nominal because the urgency is doing the work, not the discount. Especially effective for brands with steady traffic but late-day purchasing patterns. *Pictured: Lucky Energy stacks just an extra 5% off — capped at the first 25 orders — on top of their existing sale. Small reward, tight cap, real-time countdown doing the heavy lifting.* Related: [Offer configuration](/shopify/tutorials/offer-configuration/) *** Still not sure where to start? Most brands run their first Quikly campaign as either a list-growth play or a re-engagement send to an existing audience — both have the shortest path to a measurable result. # Legacy Checkout Extension # Legacy Checkout Extension [Section titled “Legacy Checkout Extension”](#legacy-checkout-extension) If you use Shopify Plus and have not yet updated to the new “extensible checkout” system, you can use the “Edit Code” feature in your Shopify theme to add the Quikly checkout snippet. 1. Create a new snippet called ‘quikly.liquid’. Make sure you replace ##REPLACE\_WITH\_BRAND\_ID## with your config key provided by Quikly. You can find the full source of this file below.   2. Edit the checkout.liquid file, and add `{% render 'quikly' %}` to include the new snippet. Typically you will want to place this directly above the `{{ content_for_layout }}` tag  ```html

{% render 'quikly' %} {{ content_for_layout }}

``` Here is the contents of snippets/quikly.liquid. ```html ``` # FAQ > Answers to common questions from Shopify merchants evaluating Quikly. Common questions we hear from merchants evaluating Quikly. If yours isn’t here, reach out — we’ll answer it and add it. ## Can Quikly read live Shopify inventory and show “X units left” in a popup? [Section titled “Can Quikly read live Shopify inventory and show “X units left” in a popup?”](#can-quikly-read-live-shopify-inventory-and-show-x-units-left-in-a-popup) Quikly works on offer limits rather than live SKU stock, which plays nicely with scarcity messaging. You set a redemption cap (a bit below your available units) and the campaign enforces it in real time. So if you have 55–60 units pre-promo, you’d run something like “only the next 50 orders get X% off” with a live countdown as purchases come in. The cap becomes the marketing hook — and because it’s enforced by Quikly, you don’t have to worry about overselling if Shopify’s inventory count drifts. Related: [Campaign Ideas](/shopify/campaign-ideas/) ## Can I target only low-intent users? [Section titled “Can I target only low-intent users?”](#can-i-target-only-low-intent-users) Yes. The strongest lever is **list segmentation via an activation link**. Quikly campaigns can be gated to a specific link, so the offer is only visible to traffic you send to it — e.g. email subscribers who haven’t engaged in the last 6 months. That gives you a clean, defined audience, predictable volume, and clear attribution. You can also layer in on-site signals like exit intent, and suppress the campaign for logged-in repeat customers. We generally recommend leading with the segmented activation link though — it’s a more precise definition of “low intent” than behavioral guesses, and it measures better. Related: [Klaviyo integration](/integrations/klaviyo/), [Visibility controls](/shopify/tutorials/visibility-controls/) ## How long does it take to install and launch a first campaign? [Section titled “How long does it take to install and launch a first campaign?”](#how-long-does-it-take-to-install-and-launch-a-first-campaign) Quikly installs from the Shopify App Store and the storefront extension drops into your theme without code changes. Most merchants are live with a first campaign the same day — configure the offer, set the cap and timing, point it at the audience or pages you want, and publish. Related: [Getting Started](/shopify/getting-started/), [Offer configuration](/shopify/tutorials/offer-configuration/) ## Will Quikly slow down my storefront? [Section titled “Will Quikly slow down my storefront?”](#will-quikly-slow-down-my-storefront) No. The app extension is built against Shopify’s performance requirements (no more than a 10-point Lighthouse drop, which is the Built for Shopify bar). We continuously test against a clean storefront baseline. Related: [Shopify App Performance](/reference/performance/) ## Does it work with a headless Shopify store? [Section titled “Does it work with a headless Shopify store?”](#does-it-work-with-a-headless-shopify-store) Yes — Quikly has a headless integration path for Hydrogen and custom storefronts using our JavaScript SDK. Related: [Headless](/shopify/headless/), [JavaScript SDK](/javascript-sdk/overview/) ## How are discount codes generated and delivered? [Section titled “How are discount codes generated and delivered?”](#how-are-discount-codes-generated-and-delivered) Quikly generates and manages standard Shopify discount codes on your behalf — no manual setup in the Shopify admin. ## Can I reuse the same discount code across campaigns? [Section titled “Can I reuse the same discount code across campaigns?”](#can-i-reuse-the-same-discount-code-across-campaigns) No. Because Quikly controls the total number of uses for each offer code, every campaign needs its own unique code. If you’re reusing a base code across many campaigns and running out of variations, two easy options: * **Append the date** to the code — for example, `TENOFF0530` for a campaign starting May 30th. * **Leave the discount code blank** when configuring the offer, and Quikly will auto-generate a unique code for you. Related: [Configuring Offers](/shopify/tutorials/offer-configuration/) ## Can I run Quikly inside Shopify Checkout? [Section titled “Can I run Quikly inside Shopify Checkout?”](#can-i-run-quikly-inside-shopify-checkout) Yes. Our checkout extension lets you surface urgency messaging and offers inside the checkout itself, which is otherwise locked down on Shopify Plus. Related: [Checkout Extension](/shopify/checkout-extension/) ## Can I A/B test Quikly against my current popup or promo? [Section titled “Can I A/B test Quikly against my current popup or promo?”](#can-i-ab-test-quikly-against-my-current-popup-or-promo) Yes — A/B testing is built in, and reports on revenue lift rather than just click or open rates. That’s the cleanest way to prove incremental revenue versus a flat-discount baseline. Related: [Overview](/shopify/overview/) ## How do I move the Teaser or Popup up/down on the page, or layer it behind my theme? [Section titled “How do I move the Teaser or Popup up/down on the page, or layer it behind my theme?”](#how-do-i-move-the-teaser-or-popup-updown-on-the-page-or-layer-it-behind-my-theme) Both the Teaser and the Popup expose the same two controls under **Build > Components > \[component] > Edit > Styles > Display**: * **Spacing > Offset** sets the distance from the edge of the screen, with a separate **Vertical (Mobile)** field for tuning mobile independently. * **Layout > Z-Index** sets stacking order. The default is `1001`; lower the value to sit behind a theme element like the cart drawer. Related: [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup/) ## In the popup, how do I insert copy that dynamically pulls in the offer description and quantity? [Section titled “In the popup, how do I insert copy that dynamically pulls in the offer description and quantity?”](#in-the-popup-how-do-i-insert-copy-that-dynamically-pulls-in-the-offer-description-and-quantity) Use **Dynamic Text**. In the Design Editor, go to **Build > Components > Popup**, click the **Edit** (pencil) icon, and click into the Formatted Text block. Place your cursor where the value should appear, click **Dynamic Text**, and choose **Offer info**. From there you can insert the offer’s full title, short title, subtitle, or quantity, and choose whether it reflects the current tier or a specific tier (e.g. tier 1 for “the first 50 to buy”). To show how many offers have been *claimed* or are *still available* rather than the tier’s total quantity, use the **Offer count** dynamic text type instead. Related: [Insert Dynamic Offer Text in the Popup](/shopify/tutorials/dynamic-offer-tokens/) ## How do I automatically adjust the reward description from singular to plural? [Section titled “How do I automatically adjust the reward description from singular to plural?”](#how-do-i-automatically-adjust-the-reward-description-from-singular-to-plural) Use the **Offer count** dynamic text tag instead of typing the word yourself. If you hardcode “offers” after the count, you’ll get “1 offers left” when the count reaches 1. Instead, insert a **Dynamic Text > Offer count** tag, set the **Count type** (e.g. Remaining in tier), and fill in its **Singular word** and **Plural word** fields — then delete the static word from the text. The tag picks the right form automatically, so it reads “1 order left” or “12 orders left.” Related: [Insert Dynamic Offer Text in the Popup](/shopify/tutorials/dynamic-offer-tokens/) ## How do I test offer codes before the campaign is live? [Section titled “How do I test offer codes before the campaign is live?”](#how-do-i-test-offer-codes-before-the-campaign-is-live) On the campaign overview screen, open the **Timing** card, click **Edit**, and under **Timing > Starts** check **Activate discount codes before campaign launches**. The codes become active in your store so you can confirm their configuration and how they combine with your other offers before the start date. Note that the codes are genuinely valid while this is checked — anyone who knows a code could use it — so you may want to uncheck it once testing is done. Related: [Test Offer Codes Before Launch](/shopify/tutorials/test-before-launch/) ## How do I add an image to the popup? [Section titled “How do I add an image to the popup?”](#how-do-i-add-an-image-to-the-popup) In the Design Editor, click **Components**, select the **Popup**, and click the **pencil** to edit. Click **Add Content > Image** (or click an existing image), then **Select image** to open your library — choose an existing image or click **Upload new**. After selecting, you can expand the image to the popup edges, set its size and crop (aspect ratio), align it, round its corners, and add borders or a background. Uploads can be any image format (PNG, JPG, GIF, and others such as SVG or WebP), up to a maximum of 10 MB. There’s no fixed dimension requirement. Related: [Add an Image to the Popup](/shopify/tutorials/popup-image/) ## On mobile, the popup looks too large — can I optimize it? [Section titled “On mobile, the popup looks too large — can I optimize it?”](#on-mobile-the-popup-looks-too-large--can-i-optimize-it) Yes. The most effective option is to wrap the content you don’t need on phones — like a next-up offer display — in a **Container** block and hide that container on mobile: in the block’s **Styles > Visibility**, choose **Mobile (≤480px)** or **Tablet and below (≤768px)**. Only the wrapped content drops on small screens, so the popup renders more compactly. You can also resize the **Teaser** under **Build > Components > Teaser > Edit > Styles**, where you’ll find width and height controls. Related: [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup/) ## Once my campaign is published, how do I take it off my site? [Section titled “Once my campaign is published, how do I take it off my site?”](#once-my-campaign-is-published-how-do-i-take-it-off-my-site) Open the campaign’s detail page and click **Pause campaign** in the header. Pausing hides it from visitors and returns it to draft mode — you don’t need to delete it. Re-publish from the same page whenever you want it live again. Related: [Managing a Live Campaign](/shopify/tutorials/managing-live-campaign/) ## Can I change the quantities in a tier while the campaign is live? [Section titled “Can I change the quantities in a tier while the campaign is live?”](#can-i-change-the-quantities-in-a-tier-while-the-campaign-is-live) Yes, though we don’t recommend it — fixed quantities protect the authenticity of the promotion. If you need to, go to the campaign overview page, click **View All** next to Offer configuration, expand the offer level, update the quantity, and click **Save Offer**. Because customers may have already claimed, you’ll get a confirmation prompt before it applies: increasing the quantity adds new offers to the claim queue immediately, while decreasing only removes *unclaimed* offers (anyone who already claimed keeps theirs). Related: [Managing a Live Campaign](/shopify/tutorials/managing-live-campaign/) ## Can I make the discount code valid only on certain products? [Section titled “Can I make the discount code valid only on certain products?”](#can-i-make-the-discount-code-valid-only-on-certain-products) Yes. Each offer level has a **“Discount applies to”** dropdown under **Build > Offers** where you can scope the discount to **All Products**, **Specific products**, or **Specific collections**. To *exclude* certain items instead, create a Shopify collection of everything that should be eligible and point the offer at that collection — Shopify discount codes only support “applies to” rules, not “exclude” rules. Related: [Configuring Offers](/shopify/tutorials/offer-configuration/) ## What happens when the offer cap is hit? [Section titled “What happens when the offer cap is hit?”](#what-happens-when-the-offer-cap-is-hit) The campaign stops awarding the headline offer in real time and can fall back to a lower tier (e.g. “next 100 get 10% off”) or close out entirely. Customers see exactly where they stand while it’s live, which is what creates the urgency. Related: [Campaign Ideas](/shopify/campaign-ideas/) # Getting Started The steps to add Quikly to your shopify store can vary depending on if you are on Shopify Plus or use a headless commerce set up. The basic steps are: 1. Create your Quikly account. Your client success rep will provide you with your login information. 2. Install the Quikly App into your shopify store. 3. Turn on the plugin in the theme editor, or for a headless setup, install the script tag. 4. If you use the legacy checkout.liquid checkout process, install the checkout extension snippet in your theme. # App Installation [Section titled “App Installation”](#app-installation) 1. Install the [Quikly: Urgency Marketing for Shopify App](https://apps.shopify.com/quikly) on your Shopify store.  2. Follow the onboarding steps to enable the theme extension. ## Theme Extensions [Section titled “Theme Extensions”](#theme-extensions) ### App Embed Block [Section titled “App Embed Block”](#app-embed-block) If you use a shopify theme, you can use the Shopify theme editor to enable the Quikly components in your theme. First let’s use the theme editor to add the Quikly App Embed block to your theme. Click to Sales channels > Online Store > Themes, then on “Customize”. Click on the App embeds icon, then turn on the “Quikly Embed Block”. This will allow any current Quikly promotion to appear seamlessly on your site.  ### Checkout Extension (Shopify Plus) [Section titled “Checkout Extension (Shopify Plus)”](#checkout-extension-shopify-plus) The Quikly Checkout Extension displays Quikly promotions during checkout (for example, a banner confirming a claimed discount is applied to the cart). It is separate from the App Embed Block above — the embed block powers Quikly across your storefront, while the checkout extension specifically adds Quikly to the checkout page. Shopify Plus is required to add checkout extensions. To install the Checkout Extension: 1. **Access checkout settings:** From your Shopify Admin, go to **Settings > Checkout**. 2. **Open the editor:** Scroll to the **Configuration** section and click **Customize** (or **Customize checkout**). 3. **Add the app block:** In the checkout editor, click **Add app** (or **Add block**) in the left-hand sidebar. 4. **Select the extension:** Find **Quikly** in the list and enable the **Quikly Checkout Extension**. 5. **Position and save:** Drag the block to place it where you want it in the checkout layout, then click **Save**. [Your browser does not support the video tag.](/shopify/QuiklyCheckoutExtension.mp4) You’re done! Quikly will work with you to configure your campaigns and provide activation links to trigger these promotions on demand. # Headless Commerce [Section titled “Headless Commerce”](#headless-commerce) If you have a custom storefront that does not use a shopify theme, you can grab the [script tag here](./headless). # Example [Section titled “Example”](#example) Here is an example campaign that is configured with a limited quantity discount, providing a unique discount to the first 25 customers that enter their email address.  During checkout, those fast enough to claim a discount code will see an information banner to indicate if the promotion is currently applied to their cart.  # Script Tag / Headless Setup # Headless Commerce [Section titled “Headless Commerce”](#headless-commerce) If you have a custom storefront that does not use a shopify theme, you can use a version of our [script tag](/javascript-sdk/reference) along with Google Tag Manager or pasted directly into your frontend code. ```html ``` If you use Shopify’s checkout process, follow the [checkout extension installation instructions](/shopify/checkout-extension) to complete the set up. # Identifying Quikly Orders in Shopify > Two ways an order relates to a Quikly campaign — the offer code a shopper used, and the _q_scope attribute that records who saw the campaign — and how to find each in the Shopify admin and order exports. A common question is: *which of my Shopify orders came from Quikly?* There are two distinct ways an order relates to a Quikly campaign, and they answer different questions. Knowing which one to look at — and where to look — saves a lot of confusion. In short: * **Offer codes** tell you who **used** an offer. * The **`_q_scope` attribute** tells you who **saw** the campaign. ## Offer codes — who *used* an offer [Section titled “Offer codes — who used an offer”](#offer-codes--who-used-an-offer) Any order that redeemed a Quikly offer will have one of the campaign’s promo/discount codes applied. This is the clearest “this order came from Quikly” signal, and it’s the easiest to work with in the Shopify admin. To find these orders, filter or search your orders by the discount code(s) associated with the campaign. The code appears on the order like any other discount, so it shows up in the admin, on the order detail, and in exports without any special handling. The limitation: offer codes only capture **redemptions**. They tell you nothing about shoppers who were shown the campaign but didn’t use an offer — which you need in order to measure the campaign’s overall impact. ## The `_q_scope` attribute — who *saw* the campaign [Section titled “The \_q\_scope attribute — who saw the campaign”](#the-_q_scope-attribute--who-saw-the-campaign) Separately, any order that came from a session that was *shown* the Quikly campaign — whether or not an offer code was ultimately used — receives an order note attribute called `_q_scope`. This is the signal that captures the full population exposed to the campaign, not just the people who redeemed. There are a few important things to know about how this attribute behaves in Shopify: * **It’s an order attribute, not a tag.** It will **not** appear in the Tags column or in tag-based filters. * **It surfaces under Additional Details.** On an individual order, you’ll find it in the **Additional Details** section of the order page. * **Admin search does not index note attributes.** Searching for `_q_scope` in the Shopify admin returns nothing. This is the single most common point of confusion — the value is on the order, but the admin’s search simply doesn’t look at note attributes. * **It is included in a CSV order export.** Exporting your orders to CSV is the easiest way to pull and filter on `_q_scope`. In the export, note attributes appear in the `Note Attributes` column as `Name:Value` pairs (for example, `_q_scope:...`). So if you want to work with `_q_scope` across many orders, export to CSV and filter there rather than trying to search the admin. ## Why the distinction matters [Section titled “Why the distinction matters”](#why-the-distinction-matters) When a campaign is configured to display to only a percentage of traffic (an A/B test), `_q_scope` is what makes measurement possible. It lets us compare the **served** group against the **control** group and measure the campaign’s overall lift on metrics like conversion rate, sales per session, and average order value. Offer codes alone can’t do this — they only tell you redemptions, not overall lift across everyone who was exposed. When Quikly reports on A/B test results, we report on the number of sessions served and the orders from those sessions, broken out between the served and control groups. ## Summary [Section titled “Summary”](#summary) | Signal | Answers | Where to find it | | ------------------------ | ------------------------ | -------------------------------------------------------------------------------------- | | **Offer code** | Who **used** an offer | Shopify admin — filter/search by discount code | | **`_q_scope` attribute** | Who **saw** the campaign | Order page → Additional Details; or the `Note Attributes` column of a CSV order export | *** Need help reconciling your order data with a Quikly A/B test? Reach out to your account team and we can walk through the numbers with you. # Quikly: Urgency Marketing for Shopify > Drive immediate purchases with real scarcity. Limited offers boost conversions and AOV. Drive immediate purchases with real scarcity. Limited offers boost conversions and AOV. Boost conversions & AOV with urgency campaigns proven by 70M+ consumers. Launch quantity-limited flash sales, tiered fast-buyer discounts, or time-sensitive offers where the discount decreases hourly. Our algorithm analyzes your store’s sales & discount history to suggest urgency strategies—whether you want to move inventory, bump AOV, or shorten decision time.  ## Key Features [Section titled “Key Features”](#key-features) ### **Proven Tactics and Designs** [Section titled “Proven Tactics and Designs”](#proven-tactics-and-designs) “Next 50 get $20 off” beats “20% off this weekend” every time. Our urgency campaigns are backed by data from 70M+ consumer interactions. ### **Urgency Across All Channels** [Section titled “Urgency Across All Channels”](#urgency-across-all-channels) Deploy campaigns via popups, banners, checkout, email & SMS to drive immediate purchases wherever your customers are. ### **Smart Urgency Recommendations** [Section titled “Smart Urgency Recommendations”](#smart-urgency-recommendations) Learn from your own sales & discount patterns. Our algorithm suggests the most effective urgency strategies for your specific store. ### **Shift Stale Stock Fast** [Section titled “Shift Stale Stock Fast”](#shift-stale-stock-fast) Time-limited deals like “15% off for next 5 hours” help move inventory quickly while protecting margins. ### **A/B Testing Built-In** [Section titled “A/B Testing Built-In”](#ab-testing-built-in) Measure revenue lift, not just clicks or opens. Prove incremental revenue with our built-in testing framework. ## How It Works [Section titled “How It Works”](#how-it-works) ### Example Campaign [Section titled “Example Campaign”](#example-campaign) Configure a promotion to offer one-time-use discount codes to the first 100 customers that click through an email. After the first 100 claim, the next 500 will earn a discount of a lower value. This promotion is only visible to customers who click from your email. ### Real-Time Updates [Section titled “Real-Time Updates”](#real-time-updates) Customers see exactly where they stand in the queue and how long they have to act before the promotion ends. This creates genuine urgency to respond and get the best offer. ## Pricing [Section titled “Pricing”](#pricing) We offer flexible pricing plans to fit businesses of all sizes, from free plans for smaller stores to enterprise solutions for high-volume merchants. **View our complete pricing details at [hello.quikly.com/pricing](https://hello.quikly.com/pricing)** All plans include 14-day free trials and are designed to scale with your business growth. ## Integrations [Section titled “Integrations”](#integrations) Works seamlessly with: * **Checkout Extensions** - Native Shopify checkout integration * **Email Marketing** - Klaviyo, Iterable, Braze * **CRM** - Salesforce integration * **SMS** - Direct SMS campaign deployment * **All Shopify Themes** - Works with the latest themes ## Quick Start for Developers [Section titled “Quick Start for Developers”](#quick-start-for-developers) 1. **Install the App** - Available in the [Shopify App Store](https://apps.shopify.com/quikly) 2. **Configure Campaigns** - Use our intuitive dashboard to set up urgency campaigns 3. **Deploy** - Campaigns go live in minutes across all your channels 4. **Measure** - Track performance with built-in analytics and A/B testing ## Technical Requirements [Section titled “Technical Requirements”](#technical-requirements) * Shopify store with admin access * Compatible with all modern Shopify themes * No coding required for basic setup * API access available for custom integrations ## Support & Resources [Section titled “Support & Resources”](#support--resources) * **Documentation** - Comprehensive guides and API reference * **Developer Support** - Technical assistance for custom implementations * **Community** - Connect with other developers using Quikly * **Status Page** - Real-time system status and updates # How to Use the Advanced Editor > Learn how to use the advanced editor features in the Quikly platform. Coming Soon This tutorial will cover how to use the advanced editor features in the Quikly platform to create more sophisticated campaigns. ## What You’ll Learn [Section titled “What You’ll Learn”](#what-youll-learn) * Advanced campaign configuration options * Custom styling and branding features * Advanced targeting and segmentation * A/B testing capabilities ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [How to Duplicate a Campaign](/shopify/tutorials/duplicate-campaign) * [How to Position the Banner Component](/shopify/tutorials/position-banner) - Coming Soon # Coordinating Your Site with the Quikly Test Group > How Quikly handles A/B test split groups, and how to detect whether a visitor is in the Quikly half if you want to coordinate your own site elements. When you run Quikly as an A/B test — for example, showing the campaign to 50% of visitors via [Visibility Percentage](/shopify/tutorials/visibility-controls/) — a common question is: *can I tell which visitors are in the Quikly half, so I can keep other site elements consistent?* Here’s how we think about it, and what’s available if you need to drive your own logic off the split. ## The control group is left untouched [Section titled “The control group is left untouched”](#the-control-group-is-left-untouched) For the **control (BAU) group** — the visitors who don’t get Quikly — we intentionally don’t touch anything. Those shoppers get your normal site experience with no Quikly footprint, which keeps the test clean: any lift you measure is attributable to Quikly, not to a side effect of the test setup. ## Let Quikly account for coordinating changes [Section titled “Let Quikly account for coordinating changes”](#let-quikly-account-for-coordinating-changes) For the **Quikly group**, the ideal is that Quikly handles any coordination on your behalf, rather than you detecting the split and reacting to it yourself. The most common example is other on-site popups overlapping the campaign. Quikly has a built-in **“hide other popups”** setting that suppresses competing popups whenever the Quikly campaign is visible — and only for the Quikly group, since the control group never triggers it. If that’s the coordination you’re after, your account team can enable it on the campaign and you don’t need to write any code. If there’s a coordinating change you’d like Quikly to handle, ask your account team first — there’s a good chance we can do it on our side. ## Detecting the Quikly group yourself [Section titled “Detecting the Quikly group yourself”](#detecting-the-quikly-group-yourself) If you want to conditionally show or hide *your own* site elements based on the split, you can read Quikly’s first-party `q_visibility` cookie on the client. When a visitor is placed in the Quikly half, the cookie holds an entry set to `true`. This helper returns `true` when a Quikly campaign is showing for the visitor: ```js function isQuiklyVisible() { var match = document.cookie.match(/q_visibility=([^;]+)/); if (!match) return false; var visibility = JSON.parse(decodeURIComponent(match[1])); return Object.keys(visibility).some(function (key) { return !key.startsWith("v_") && visibility[key] === true; }); } ``` Run it on a short delay so Quikly’s script has time to load and make the assignment, then coordinate your own elements: ```js setTimeout(function () { if (isQuiklyVisible()) { // visitor is in the Quikly group — // e.g. hide your own competing popup } }, 1000); // 1s is usually plenty ``` ### Two things to keep in mind [Section titled “Two things to keep in mind”](#two-things-to-keep-in-mind) * **Give it a moment.** The group assignment is made client-side just after Quikly’s script loads, so the cookie isn’t guaranteed to be there on the very first render. The `setTimeout` above handles this — bump it to `1500`–`2000`ms if your page loads slowly. This approach fits elements that aren’t first-paint-critical, like a delayed popup, better than something that must be correct the instant the page paints. * **Check for “visible,” not “not visible.”** Only an explicit `true` means a campaign is showing. A missing or `false` entry can mean the visitor is in the control half *or* that a campaign was hidden for another reason (sold out, repeat visitor, a URL rule, and so on) — so treat the helper as “is Quikly showing?” rather than “is this visitor in the control group?” *** Not sure which approach fits your test? Reach out to your account team — if you tell us the specific element you’re trying to coordinate, we can usually handle it on our side. # How to Duplicate a Campaign > Learn how to duplicate an existing campaign in the Quikly platform. Sometimes you want to create a new campaign based on an existing one. This tutorial shows you how to duplicate a campaign in the Quikly platform. ## What You’ll Learn [Section titled “What You’ll Learn”](#what-youll-learn) * How to access campaigns from your Shopify admin * How to duplicate an existing campaign with all original settings * How to update campaign timing and scheduling * How to modify incentive structures and discount codes * How to preview campaigns in your store before publishing * How to publish and schedule your duplicated campaign ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [How to Use the Advanced Editor](/shopify/tutorials/advanced-editor) - Coming Soon * [How to Position the Banner Component](/shopify/tutorials/position-banner) - Coming Soon # Insert Dynamic Offer Text in the Popup > Use Dynamic Text to pull an offer's title, subtitle, and quantity into your popup copy so it stays accurate as the campaign runs. Instead of typing your offer details into the popup by hand, you can insert **Dynamic Text** that pulls them straight from the offer — the title, subtitle, and quantity. Because the text reads from the campaign’s offer data, the copy stays correct even if you change the offer later, and it can reference a specific tier (for example, “the first 50 to buy”). [Your browser does not support the video tag.](https://d1kt5al5rlsv0i.cloudfront.net/quikly.github.io/videos/dynamic-tags.mp4) ## Insert an Offer Detail [Section titled “Insert an Offer Detail”](#insert-an-offer-detail) 1. In the Design Editor, go to **Build > Components > Popup**, then click the **Edit** icon (the pencil).  2. Click the **Formatted Text** block you want to edit to open the rich text editor. 3. Place your cursor where you want the dynamic value to appear, then click **Dynamic Text** at the bottom of the panel.  4. Choose **Offer info** from the Dynamic Text menu.  5. Pick the **Offer field** you want to display: * **Full (long) title** * **Short title** * **Subtitle** * **Quantity** — the total number of offers in the selected tier 6. Set the **Offer level** to control which tier the value comes from: * **Current tier** — shows the value for whichever tier is active at the moment a shopper sees the popup * **A specific tier** (e.g. `1`) — always shows that tier’s value 7. Click **Add Text** to insert the token, then **Save**.  ## Example: “The first 50 to buy” [Section titled “Example: “The first 50 to buy””](#example-the-first-50-to-buy) To show how many total offers are in the first tier: * **Offer field:** Quantity * **Offer level:** 1 Surround the token with your own copy in the editor — for example, type `The first`, insert the Quantity token, then type `to buy` — and the popup renders **“The first 50 to buy”** automatically. ## Showing Claimed or Remaining Counts Instead [Section titled “Showing Claimed or Remaining Counts Instead”](#showing-claimed-or-remaining-counts-instead) The **Offer info > Quantity** field shows the *total* number of offers in a tier. If you want a live count of how many have been **claimed** or how many are **still available (left)**, use the **Offer count** dynamic text type instead of Offer info. Offer count updates in real time as shoppers claim the offer, which is what drives the scarcity messaging. ## Automatically Pluralize the Reward Word [Section titled “Automatically Pluralize the Reward Word”](#automatically-pluralize-the-reward-word) When a count drops to 1, hardcoded copy reads awkwardly — “1 **offers** left” instead of “1 offer left.” Let the **Offer count** tag handle the singular/plural switch for you instead of typing the word yourself. The common mistake is to insert the count tag and then type the word after it. Here, “orders” is typed as static text, so it always reads “orders” even when the count is 1:  Instead, define the word inside the tag: 1. Insert a **Dynamic Text > Offer count** tag and set the **Count type** (for example, **Remaining in tier**). 2. Fill in the **Singular word** (shown when the count is 1, e.g. `order`) and the **Plural word** (shown when the count is more than 1, e.g. `orders`). 3. Click **Save**, then **delete the static word** you typed in the text field — the tag now supplies the correctly pluralized word.  The copy now reads “1 order left” or “12 orders left” automatically as the count changes. This works for any reward word — offer, reward, discount, order, and so on. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Configuring Offers](/shopify/tutorials/offer-configuration) — Set the products, tiers, and quantities the dynamic text reads from * [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup) * [Campaign Visibility Controls](/shopify/tutorials/visibility-controls) # Country, Market, Language & Currency Targeting > Show or hide campaigns based on a visitor's country, your store's selected market, their language, or their currency. Quikly can show or hide a campaign based on where a visitor is located and how they’re browsing your storefront. For example, to make a campaign appear only to people in the United States, enable **Based on visitor’s location** and add the United States to **Show only in these countries**. ## Configuring the filters [Section titled “Configuring the filters”](#configuring-the-filters) 1. From the **Campaign Overview** page, click **Edit** next to **Audience Targeting**.  2. In the modal that appears, find the **Additional Filters** section and check the box for the filter you want to use: * **Based on visitor’s location** — Show or hide the campaign for visitors from specific countries, based on their IP address. * **Based on store’s selected market** — Show or hide the campaign based on your Shopify store’s selected market. * **Based on language** — Show or hide the campaign based on visitors’ language preferences. * **Based on currency** — Show or hide the campaign based on visitors’ currency preferences. 3. Once a filter is enabled, two fields appear. Add values to either or both: * **Show only in/for these…** — The campaign appears *only* when the visitor matches one of these values (an allow list). * **Hide in/for these…** — The campaign is hidden when the visitor matches any of these values (a block list).  4. Click **Save**. When you save, the enabled filters appear back on the Campaign Overview under **Additional Filters** (e.g. “Geo countries — Include: United States”). ## The four filters [Section titled “The four filters”](#the-four-filters) There are four independent filters. Each is optional, and you can combine them — for example, show a campaign only to visitors physically located in Canada *and* browsing in French. | Filter | What it’s based on | Source | | ------------------------------------ | ---------------------------------------------------- | --------------------------------------- | | **Based on visitor’s location** | The visitor’s country, derived from their IP address | Quikly geolocation (server-side) | | **Based on store’s selected market** | The Shopify market the visitor is browsing in | Shopify Markets | | **Based on language** | The visitor’s selected storefront language | Shopify Markets / translated storefront | | **Based on currency** | The store’s currency for the visitor | Shopify | ### How Quikly gets these values [Section titled “How Quikly gets these values”](#how-quikly-gets-these-values) Quikly reads three of these values directly from your Shopify storefront through the Quikly theme app embed: ```liquid localization: { country_code: {{ localization.country.iso_code | json }}, // store's selected market language_code: {{ localization.language.iso_code | json }}, // language currency_code: {{ shop.currency | json }} // currency } ``` * **Store’s selected market**, **language**, and **currency** come from Shopify’s `localization` object — i.e. whatever market, language, and currency the visitor has selected (or been assigned) in your storefront. These reflect the visitor’s *storefront selection*, which Shopify drives from their location, browser settings, and any selectors you’ve added. * **Visitor’s location** is different: it is resolved by Quikly from the visitor’s **IP address**, independent of Shopify. Use this when you care about where the visitor physically is, regardless of which market or currency they happen to be browsing in. Note “Based on visitor’s location” (IP geolocation) and “Based on store’s selected market” can return different countries for the same visitor — for instance, a visitor in Germany who has manually switched your storefront to the United States market. Pick the one that matches your intent. ## How include and exclude interact [Section titled “How include and exclude interact”](#how-include-and-exclude-interact) For each filter: * **Exclude takes precedence.** If a visitor matches a “Hide in/for these…” value, the campaign is hidden — even if they also match an included value. * If you set **only** an include list, the campaign shows only to matching visitors and is hidden for everyone else. * If you set **only** an exclude list, the campaign shows to everyone *except* the excluded visitors. * Leaving both fields empty disables that filter entirely. When multiple filters are enabled, a visitor must pass **all** of them for the campaign to appear. ## Requirements & notes [Section titled “Requirements & notes”](#requirements--notes) * **Market, language, and currency filters depend on Shopify.** The values are only meaningful if your store uses [Shopify Markets](https://www.shopify.com/markets) (for markets and currency) and/or offers multiple storefront languages. If your store sells in a single market, language, and currency, those three filters won’t meaningfully segment your traffic — use **Based on visitor’s location** instead. * **Visitor’s location works on any store** because it relies on IP geolocation rather than Shopify configuration. * Countries are selected by name; the value stored is the ISO country code (e.g. `US`). Languages and currencies use their ISO codes as well (e.g. `EN`, `USD`). * In the **campaign editor/preview**, these filters are bypassed so you can always see your campaign while building it. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Campaign Visibility Controls](/shopify/tutorials/visibility-controls) — URL rules, visitor limits, visibility percentage, and component-level filters * [Show or Hide Components on Specific Products](/shopify/tutorials/product-page-targeting) # Managing a Live Campaign > Pause a published campaign to take it off your storefront, then re-publish it whenever you're ready. Once a campaign is published, you can still manage it without taking it down — pause it from your storefront, or adjust tier quantities while it runs. This tutorial covers both. ## Pause a Published Campaign [Section titled “Pause a Published Campaign”](#pause-a-published-campaign) If you no longer want a campaign active on your site, you don’t need to delete it — you can pause it. Pausing hides the campaign from visitors and returns it to draft mode, and you can re-publish it at any time to make it live again. 1. Open the campaign you want to take down to its **campaign detail page**. 2. Click **Pause campaign** in the header. The status badge changes from **Active**, the campaign stops showing to visitors, and it returns to draft.  When you’re ready to bring it back, return to the same page and re-publish it — the campaign goes live again with its existing settings. ## Change Tier Quantities While Live [Section titled “Change Tier Quantities While Live”](#change-tier-quantities-while-live) You *can* change the quantity available for an offer that hasn’t been fully claimed, but we don’t recommend it — keeping quantities fixed protects the authenticity of the promotion. If you do need to adjust a quantity on a running campaign: 1. From the **campaign overview page**, next to **Offer configuration**, click **View All**. 2. Next to the offer level you want to modify, click it to expand the details. 3. Update the **quantity**, then click **Save Offer**. ### What happens when you change a live quantity [Section titled “What happens when you change a live quantity”](#what-happens-when-you-change-a-live-quantity) Because customers may have already claimed, Quikly shows a **confirmation prompt** describing the impact, and the change isn’t applied until you acknowledge it: * **Increasing the quantity** creates new offers and adds them to the claim queue, so they become available right away. * **Decreasing the quantity** removes only **unclaimed** offers. Customers who have already claimed keep their offer — you can’t reduce a tier below the number that has already been claimed. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [How to Duplicate a Campaign](/shopify/tutorials/duplicate-campaign) * [Campaign Visibility Controls](/shopify/tutorials/visibility-controls) — Hide a live campaign on specific pages without pausing it entirely * [Configuring Offers](/shopify/tutorials/offer-configuration) # Configuring Offers > How to configure which products your Quikly discount applies to, including how to exclude specific items Quikly uses Shopify’s native discount codes, so discounts follow Shopify’s standard discount rules. Within each offer level in your Quikly campaign, you can configure which products the discount applies to. ## Configuring Discount Scope [Section titled “Configuring Discount Scope”](#configuring-discount-scope) 1. Navigate to **Build > Offers** in your Quikly campaign. 2. For each offer level, locate the **“Discount applies to”** dropdown.  3. Select one of the following options: * **All Products** - The discount applies to every item in the cart * **Specific products** - The discount applies only to selected products * **Specific collections** - The discount applies only to items within selected collections 4. If you selected “Specific products” or “Specific collections”, click **Browse** to open the selection modal.  5. Check the boxes next to the products or collections you want included, then save your changes. ## Excluding Items from a Discount [Section titled “Excluding Items from a Discount”](#excluding-items-from-a-discount) Shopify discount codes don’t support “exclude” rules directly (for example, you cannot simply exclude fleece items). Instead, discounts can only be configured to **apply to** specific products or collections. To effectively exclude certain items from a discount, the recommended approach is to create a collection in Shopify that includes all products eligible for the discount, while ensuring the excluded items are not part of that collection. ### Creating a Smart Collection in Shopify [Section titled “Creating a Smart Collection in Shopify”](#creating-a-smart-collection-in-shopify) A smart collection automatically includes products based on conditions you define. This is the recommended way to create an exclusion collection. 1. In your Shopify Admin, go to **Products > Collections**. 2. Click **Create collection**. 3. Under **Collection type**, select **Smart**.  4. Under **Conditions**, set up rules that include all products except the ones you want to exclude. For example: * **Product tag** is not equal to `new-launch` * **Product tag** is not equal to `sale-exclusion` * **Product type** is not equal to `Gift Cards` You can combine multiple conditions using “Products must match: **all conditions**” to create precise exclusion rules.  5. Give your collection a descriptive name (e.g., “Discount Eligible Products”). 6. Save the collection. Note This collection does not need to be published to any sales channels. It only needs to exist in Shopify for the discount to reference it. You can leave all sales channels unchecked under **Publishing**. 7. Return to your Quikly campaign, and under **“Discount applies to”**, select **Specific collections** and choose your newly created smart collection. This approach ensures that only eligible products receive the discount while the excluded items remain at full price. # How to Upgrade Your Quikly Subscription > Step-by-step guide to upgrading your Quikly plan through the Shopify Admin [Your browser does not support the video tag.](https://d1kt5al5rlsv0i.cloudfront.net/quikly.github.io/videos/QuiklyPlanSelection.mp4) ## Steps [Section titled “Steps”](#steps) 1. From the Shopify Admin area, click on **Apps**, then select **“App and sales channel settings”**  2. Click on **Quikly** from the app list.  3. Click **“Manage”** under Billing and usage charges  4. Select the appropriate plan based on your store size, and choose monthly or yearly billing.  5. Click **“Approve”** on the following page.  # Add an Image to the Popup > Add an image to your popup from the Design Editor, choose it from your library or upload a new one, and adjust how it sizes, crops, and aligns. You can add an image to your popup — or any component — from the Design Editor, then control how it sizes, crops, and aligns. ## Add the Image Content [Section titled “Add the Image Content”](#add-the-image-content) 1. In the Design Editor, click **Components**, then click the component you want to modify. For this example, we’ll use the **Popup**. 2. Click the **pencil** icon to edit. 3. Add an Image content block one of two ways: * Click **Add Content** and choose **Image** from the content types, or * Click an existing image in the content stack to edit it.  4. In the Image content block, click **Select image**.  5. The **Choose from Library** window opens. Pick an existing image from your library, or click **Upload new** to add one to your account.  ## Adjust How the Image Displays [Section titled “Adjust How the Image Displays”](#adjust-how-the-image-displays) Once an image is selected, the Image block exposes controls for fit and styling: * **Expand to container edges** — Makes the image span the full popup width by ignoring the side padding. (Leave it off to keep the image inset within the popup’s padding.) * **Size** — Set the image’s width and height. You can also set an **aspect ratio** to crop the image to a fixed shape; when an aspect ratio is set, the image fills the frame (cover) and is centered by default, with controls to change how it’s fitted and positioned within the crop. * **Layout** — Align the image left, center, or right within the popup. * **Borders** — Round the corners (border radius) and add a border color. * **Background** and **Spacing** — Set a background color behind the image, and adjust margins and padding around it. Click **Save** when you’re done, and preview the popup to confirm the image looks right on both desktop and mobile. ## Image Specifications [Section titled “Image Specifications”](#image-specifications) When uploading a new image to your library: * **File type:** Any image format. The uploader shows PNG, JPG, and GIF, and also accepts other image formats such as SVG and WebP. * **Maximum file size:** 10 MB. There’s no fixed dimension requirement, but for crisp results upload an image at least as large as the space it will fill in the popup, and use the **Size** and aspect-ratio controls above to fit it. Smaller, web-optimized files also keep the popup loading fast. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Insert Dynamic Offer Text in the Popup](/shopify/tutorials/dynamic-offer-tokens) * [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup) # How to Position the Banner Component > Learn how to position and customize the banner component in your Shopify store. Coming Soon This tutorial will show you how to position and customize the Quikly banner component in your Shopify store for optimal visibility and conversion. ## What You’ll Learn [Section titled “What You’ll Learn”](#what-youll-learn) * How to position the banner on different pages * Customizing banner appearance and styling * Mobile vs desktop positioning considerations * Best practices for banner placement ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup) - Adjust offset and Z-Index for the Teaser and Popup * [How to Duplicate a Campaign](/shopify/tutorials/duplicate-campaign) * [How to Use the Advanced Editor](/shopify/tutorials/advanced-editor) - Coming Soon # Position and Layer the Teaser and Popup > Adjust the vertical offset, Z-Index, and mobile sizing of the Teaser and Popup components so they sit in the right place — and at the right size — on your storefront. The **Teaser** and **Popup** components share two styling controls that determine where they appear on the page: * **Offset** — how far the component sits from the edge of the screen (Spacing). * **Z-Index** — whether the component stacks in front of or behind other on-page elements (Layout). Both controls live in the same place for each component: **Build > Components > \[Teaser or Popup] > Edit > Styles > Display**. They’re [component-level](/shopify/tutorials/visibility-controls#component-level-controls) styling options, so adjusting one placement doesn’t affect the rest of the campaign. ## Adjusting the Vertical Offset [Section titled “Adjusting the Vertical Offset”](#adjusting-the-vertical-offset) The vertical offset controls the distance between the component and the edge of the screen it’s anchored to. A separate **Vertical (Mobile)** field lets you tune mobile independently, since storefronts often have different headers, footers, and safe areas on smaller screens. 1. Go to **Build > Components**. 2. Click the **Teaser** (or **Popup**) row, then click **Edit**. 3. Open the **Styles** tab. 4. Expand **Display**, then expand **Spacing**. 5. Under **Offset**, update **Vertical** for desktop and **Vertical (Mobile)** for mobile. You can also tune **Horizontal** here if needed.  6. Click **Save** and preview the storefront on both desktop and mobile to confirm placement. Values accept any standard CSS length unit — `px` and `rem` are the most common. ## Adjusting the Z-Index [Section titled “Adjusting the Z-Index”](#adjusting-the-z-index) Z-Index controls stacking order: a higher number sits in front, a lower number sits behind. Quikly components are designed to sit on top of your storefront so they stay visible, but occasionally one overlaps a piece of your theme’s UI that should win instead — most commonly the **cart drawer on mobile**, but also sticky headers, chat widgets, and cookie banners. Every Quikly component defaults to a Z-Index of **1001**, which keeps it above typical storefront content. To push a component *behind* a theme element, set its Z-Index **below** that element’s z-index. ### Example: Teaser Behind the Mobile Cart Drawer [Section titled “Example: Teaser Behind the Mobile Cart Drawer”](#example-teaser-behind-the-mobile-cart-drawer) When a shopper opens the cart drawer on mobile, you usually want the drawer in front and the teaser tucked behind it. 1. Go to **Build > Components**. 2. Click the **Teaser** row, then click **Edit**. 3. Open the **Styles** tab. 4. Expand **Display**, then expand **Layout**. 5. Set **Z-Index** to a value below your cart drawer’s z-index. In the example below it’s set to `999`, just under the `1001` default.  6. Click **Save**, then open your storefront on mobile and open the cart drawer to confirm the teaser now sits behind it. ### Finding the Right Value [Section titled “Finding the Right Value”](#finding-the-right-value) The number that works depends on the z-index your theme assigns to the element you’re layering against: * **To go behind an element**, set Quikly’s Z-Index lower than that element’s. * **To stay in front**, leave the default (1001) or raise it. If you’re not sure what z-index your theme uses for the cart drawer or header, inspect that element in your browser’s dev tools and read its `z-index` value, then set the Quikly component just below it. Many Shopify themes use values in the low thousands for drawers and overlays, so a value like `999` is a safe starting point for sending a component behind them. ## Advanced: Override the Offset on Specific Templates [Section titled “Advanced: Override the Offset on Specific Templates”](#advanced-override-the-offset-on-specific-templates) The Offset fields apply globally to the component. If you need a different offset on just one template — for example, more breathing room on the product page so the teaser clears a sticky “Add to Cart” bar — you can override the CSS variable for that template only. 1. Go to **Build > Styles > Theme CSS**. 2. Add a rule that targets the template’s body class and the component’s position class. For example, to set the mobile vertical offset to `115px` on the product page when the Teaser is positioned in the bottom-left: ```css html body:not(.q_layout_root).product-page .q_Panel_position_bottomLeft { --q-component-mobileOffsetVertical: 115px !important; } ``` 3. Click **Save** and preview the product page on mobile to confirm. This assumes the product page renders with a `product-page` class on the `` tag. Most Shopify themes do, but if yours doesn’t, inspect the page in your browser’s dev tools and substitute whatever class the template actually uses. Adjust `.q_Panel_position_bottomLeft` if your component is anchored to a different corner. ## Making the Popup More Compact on Mobile [Section titled “Making the Popup More Compact on Mobile”](#making-the-popup-more-compact-on-mobile) If the popup feels too large on phones, there are two ways to slim it down. ### Hide Bulky Content on Mobile with a Container [Section titled “Hide Bulky Content on Mobile with a Container”](#hide-bulky-content-on-mobile-with-a-container) Wrap the content you want to drop on small screens — for example, a next-up offer display — in a **Container** block, then hide that container on mobile. The rest of the popup stays intact; only the wrapped content is removed on phones, so the popup renders more compactly. 1. In the Design Editor, open the popup for editing and select the **Container** block that holds the content you want to hide. 2. Open the **Styles** tab and expand **Visibility**. 3. Set the visibility option to the breakpoint where the container should disappear: * **Mobile (≤480px)** — hides the container on phones. * **Tablet and below (≤768px)** — hides it on tablets and phones. * **Always show** — the default; the container shows on every screen size.  4. Click **Save** and preview on a phone to confirm the popup is more compact. ### Resize the Teaser [Section titled “Resize the Teaser”](#resize-the-teaser) You can also shrink the **Teaser** directly: 1. Go to **Build > Components > Teaser** and click the **Edit** (pencil) icon. 2. Open the **Styles** tab and look under the display options for the teaser’s **width** and **height**. 3. Adjust the size, **Save**, and preview on mobile. ## Teaser vs. Popup [Section titled “Teaser vs. Popup”](#teaser-vs-popup) The Teaser and Popup expose the same Offset and Z-Index controls in the same locations, so the steps above apply identically to both. Adjust them independently — each component has its own Styles, so changing the Teaser’s offset or Z-Index doesn’t affect the Popup. ## When to Use Z-Index vs. Hiding the Component [Section titled “When to Use Z-Index vs. Hiding the Component”](#when-to-use-z-index-vs-hiding-the-component) If you want the component gone entirely on certain pages or states rather than just layered behind something, use [visibility controls](/shopify/tutorials/visibility-controls) instead — for example, hiding a placement on the cart template. Z-Index is the right tool when the component should still be present, just not on top. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Campaign Visibility Controls](/shopify/tutorials/visibility-controls) — Show or hide placements by page, template, or product * [How to Position the Banner Component](/shopify/tutorials/position-banner) * [Show or Hide Components on Specific Products](/shopify/tutorials/product-page-targeting) # Show or Hide Components on Specific Products > Learn how to control which product pages display your Quikly components You can configure Quikly components to appear on specific product pages or be hidden from certain products. This is useful when you want to target promotions to particular products or exclude components from pages where they don’t apply. This is one of several [component-level visibility controls](/shopify/tutorials/visibility-controls#component-level-controls) available for fine-tuning where your placements appear. ## Accessing Component Settings [Section titled “Accessing Component Settings”](#accessing-component-settings) 1. Navigate to **Build > Components** in your Quikly campaign. 2. Find the component you want to configure (i.e. popup or banner). 3. Click the **pencil icon** to enter Edit mode. 4. Click the **Settings** tab.  ## Show Only on Specific Products [Section titled “Show Only on Specific Products”](#show-only-on-specific-products) Use this setting to display a component only on certain product pages. In the **“Show only on Specific Products”** field, enter a comma-separated list of product handles or patterns. > Only show this component on products matching these handles. Supports wildcards (e.g., ‘swoop-\*’). Comma separated list of product handles or patterns. **Examples:** * `blue-widget` - Show only on the “Blue Widget” product page * `swoop-*` - Show on all products with handles starting with “swoop-” * `blue-widget, red-widget, green-widget` - Show on these three specific products ## Hide on Specific Products [Section titled “Hide on Specific Products”](#hide-on-specific-products)  Use this setting to hide a component from certain product pages while showing it everywhere else. In the **“Hide on Specific Products”** field, enter a comma-separated list of product handles or patterns. > Do not show this component on products matching these handles. Supports wildcards (e.g., ‘swoop-\*’). Comma separated list of product handles or patterns. **Examples:** * `gift-card` - Hide on the gift card product page * `bundle-*` - Hide on all bundle products * `clearance-item-1, clearance-item-2` - Hide on specific clearance items ## Finding Product Handles [Section titled “Finding Product Handles”](#finding-product-handles) A product handle is the URL-friendly version of your product title. You can find it in: 1. **Shopify Admin**: Go to **Products**, click on a product, scroll down to **Search engine listing**, and look at the URL handle. 2. **Product URL**: The handle is the last part of your product URL. For example, in `yourstore.com/products/blue-widget`, the handle is `blue-widget`. ## Using Wildcards [Section titled “Using Wildcards”](#using-wildcards) Wildcards (`*`) match any characters, making it easy to target groups of products: | Pattern | Matches | | ---------- | ------------------------------------------------- | | `summer-*` | `summer-dress`, `summer-hat`, `summer-sale-item` | | `*-bundle` | `starter-bundle`, `deluxe-bundle`, `gift-bundle` | | `*sale*` | `summer-sale`, `sale-item`, `clearance-sale-2024` | ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Campaign Visibility Controls](/shopify/tutorials/visibility-controls) - All visibility options including URL rules, template filtering, and more * [Configuring Offers](/shopify/tutorials/offer-configuration) - Control which products discounts apply to * [How to Position the Banner Component](/shopify/tutorials/position-banner) # Test Offer Codes Before Launch > Activate your discount codes ahead of a scheduled campaign so you can verify they work in your store before going live. If you want to confirm your discount codes work — and see how they combine with your other offers — before a campaign goes live, you can activate the codes ahead of the launch date. ## Activate Codes Before Launch [Section titled “Activate Codes Before Launch”](#activate-codes-before-launch) 1. On the campaign overview screen, find the **Timing** card and click **Edit**. 2. Under **Timing > Starts**, check the box next to **Activate discount codes before campaign launches**.  3. Save the change. Your discount codes are now active in the store, so you can test them before the campaign’s start date. This lets you verify that a code’s configuration is correct and check how it combines with your other existing offers. Caution While this box is checked, the codes are genuinely active and valid. If anyone knows a code before the campaign’s start date, they can use it. Once your testing is complete, you may want to uncheck **Activate discount codes before campaign launches** until launch. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Configuring Offers](/shopify/tutorials/offer-configuration) — Set which products each discount applies to * [Managing a Live Campaign](/shopify/tutorials/managing-live-campaign) * [How to Duplicate a Campaign](/shopify/tutorials/duplicate-campaign) # Campaign Visibility Controls > Control where and how your campaigns appear using campaign-level and component-level visibility settings Quikly offers visibility controls at two levels: **campaign-level** controls that affect the entire campaign, and **component-level** controls that let you customize individual placements. ## Campaign-Level Controls [Section titled “Campaign-Level Controls”](#campaign-level-controls) These controls affect the entire campaign — all placements, all components. | Control | Persistence | Use Case | | ------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------- | | **URL Rules (Visitor Session)** | Cookie-based (session) | Qualify visitors based on entry page (e.g., “only show to visitors who landed on /promo”) | | **Page URL Rules** | Per page view | Control which pages the campaign appears on site-wide | | **Visibility Percentage** | Cookie-based (session) | A/B testing — show campaign to X% of visitors | | **Visitor Limit** | Server-side | Cap total participants | ### Accessing Campaign-Level Settings [Section titled “Accessing Campaign-Level Settings”](#accessing-campaign-level-settings) 1. Open your campaign in the Quikly dashboard. 2. Navigate to the **Editor > Launch** page. 3. Look for the **Visibility** section. ### URL Rules (Visitor Session) [Section titled “URL Rules (Visitor Session)”](#url-rules-visitor-session) Use this to qualify visitors based on how they arrived at your site. Once a visitor qualifies, they’ll see the campaign on every page during their session. **Example:** You’re running a sitewide promotion but only want visitors who entered through a specific landing page to see it. Set a visitor session rule for `/promo` — once qualified, they’ll see the campaign everywhere. ### Page URL Rules [Section titled “Page URL Rules”](#page-url-rules) Use this to control which pages display the campaign. Unlike visitor session rules, these are evaluated on every page view. * **Show only on pages matching** — Campaign only appears on matching pages * **Hide on pages matching** — Campaign is hidden on matching pages ## Component-Level Controls [Section titled “Component-Level Controls”](#component-level-controls) These controls affect individual placements — you can show different placements on different pages within the same campaign. | Control | Use Case | | ------------------------------ | --------------------------------------------------------- | | **Show only on Specific URLs** | Show this placement only on matching pages | | **Hide on Specific URLs** | Hide this placement on matching pages | | **Template Filtering** | Show/hide on Shopify template types (cart, product, etc.) | | **Product Handle Filtering** | Show/hide on specific product pages | ### Accessing Component-Level Settings [Section titled “Accessing Component-Level Settings”](#accessing-component-level-settings) 1. Navigate to **Build > Placements** in your campaign. 2. Click the **pencil icon** on the placement you want to configure. 3. Look for the filtering fields in the settings panel. ### URL Filtering [Section titled “URL Filtering”](#url-filtering) Control where a specific placement appears based on URL patterns: * **Show only on Specific URLs** — Only display this placement on pages where the URL contains the specified patterns * **Hide on Specific URLs** — Hide this placement on pages where the URL contains the specified patterns **Example:** You have a campaign with a banner and a popup. You want the banner on all pages, but the popup only on product pages. Use URL filtering on the popup to show only on `/products/`. ### Template Filtering [Section titled “Template Filtering”](#template-filtering) Filter by Shopify template type instead of URL pattern. Useful for targeting: * Product pages * Collection pages * Cart page * Blog posts ### Product Handle Filtering [Section titled “Product Handle Filtering”](#product-handle-filtering) Show or hide placements on specific product pages by handle. See [Show or Hide Components on Specific Products](/shopify/tutorials/product-page-targeting) for details. ## When to Use Which [Section titled “When to Use Which”](#when-to-use-which) | Scenario | Recommended Control | | ------------------------------------------------------- | ---------------------------------------------------------- | | ”Only show campaign to visitors from email links” | Campaign: Visitor Session URL Rules | | ”Show campaign on product pages only” | Campaign: Page URL Rules | | ”Show banner everywhere, popup only on /collections/\*“ | Component: URL Filtering on popup | | ”A/B test: show to 50% of visitors” | Campaign: Visibility Percentage | | ”Hide campaign on cart/checkout” | Campaign: Page URL Rules OR Component: Template Filtering | | ”Different offers on different product categories” | Multiple campaigns, or Component: Product Handle Filtering | ## Key Differences [Section titled “Key Differences”](#key-differences) | Aspect | Campaign-Level | Component-Level | | --------------------- | -------------------------- | ------------------------------- | | Affects | All placements | Single placement | | Visitor Session rules | Remembered via cookie | N/A | | Flexibility | All-or-nothing | Fine-grained per placement | | Setup complexity | Simpler for sitewide rules | More flexible for mixed layouts | ## URL Pattern Matching [Section titled “URL Pattern Matching”](#url-pattern-matching) Both campaign and component URL filters use the same pattern matching: ### Substring Matching [Section titled “Substring Matching”](#substring-matching) Patterns match if they appear anywhere in the URL. | Pattern | Matches | Doesn’t Match | | --------------------- | ------------------------------------------------- | ---------------------- | | `snowboard` | `/products/snowboard-bundle`, `/snowboard-pro` | `/products/skateboard` | | `/products/` | `/products/anything`, `/products/bundle-123` | `/collections/winter` | | `/collections/winter` | `/collections/winter`, `/collections/winter-sale` | `/collections/summer` | ### Wildcards [Section titled “Wildcards”](#wildcards) Use `*` as a wildcard to match any characters: | Pattern | Matches | | --------------------- | ------------------------------------------------------ | | `/products/*-bundle` | `/products/snowboard-bundle`, `/products/ski-bundle` | | `/collections/*/sale` | `/collections/winter/sale`, `/collections/summer/sale` | | `*.myshopify.com` | `store.myshopify.com`, `test.myshopify.com` | ### Multiple Patterns [Section titled “Multiple Patterns”](#multiple-patterns) Separate multiple patterns with commas: ```plaintext /products/*, /collections/winter, snowboard ``` This matches any URL containing `/products/`, `/collections/winter`, OR `snowboard`. ### Pattern Notes [Section titled “Pattern Notes”](#pattern-notes) * Patterns are **case-insensitive** * Patterns match against the **full URL** including protocol and domain * In the **campaign editor/preview**, URL filtering is bypassed so you can always see your placements ## Evaluation Order [Section titled “Evaluation Order”](#evaluation-order) A placement only appears if it passes all three levels: 1. **Campaign-level visitor session rules** — Is this visitor qualified? (cookie persisted) 2. **Campaign-level page rules** — Should the campaign show on this page? 3. **Component-level filters** — Should this specific placement show on this page? At each level, exclude rules are checked first. If any exclude pattern matches, the placement is hidden. Then include rules are checked — if specified, at least one must match. ## Related Tutorials [Section titled “Related Tutorials”](#related-tutorials) * [Show or Hide Components on Specific Products](/shopify/tutorials/product-page-targeting) - Filter by product handle * [Position and Layer the Teaser and Popup](/shopify/tutorials/positioning-teaser-and-popup) - Adjust vertical offset and Z-Index to position components and layer them behind theme UI * [How to Position the Banner Component](/shopify/tutorials/position-banner) # Klaviyo To configure SMS integration between your Quikly activation and [Klaviyo](https://www.klavyio.com), please provide your Client Success manager the following information: * [An api key](https://help.klaviyo.com/hc/en-us/articles/115005062267-Manage-Your-Account-s-API-Keys#generate-a-private-api-key3) * [The list id of your SMS subscriber list](https://help.klaviyo.com/hc/en-us/articles/115005078647-How-to-find-a-list-ID) It is also important that you confirm that double-opt in is turned on for this subscriber list. [More on double-opt-in.](https://help.klaviyo.com/hc/en-us/articles/115005251108-Understanding-the-double-opt-In-process) # SMS Integration > Quikly can integrate with your mobile marketing platform. Quikly activations are a great way to gain SMS subscribers. You can motivate participants to sign up for your SMS program in exchange for a heads-up about an upcoming live release in a Hype campaign, or provide an immediate incentive with Swap. For SMS acquisition, Quikly will integrate with your mobile marketing platform so that participants can fully opt-in to your SMS marketing list. At a minimum, Quikly requires the ability to add a phone number as a subscriber via an API. In addition, we also strongly recommend the ability to do a lookup on an existing phone number (so credit can be given in a campaign in realtime) and the ability to confirm the double-opt-in process for new subscribers so that we can refrain from granting time until the participant fully opts-in. ## Integrated Platforms [Section titled “Integrated Platforms”](#integrated-platforms) Quikly has integrated with the following platforms. Our team is able to integrate with additional providers not listed here. * [Klaviyo](/sms-integration/klaviyo) * [Mobivity](https://www.mobivity.com) * [Paytronix](https://www.paytronix.com/platform/crm/) * [Responsys](https://docs.oracle.com/en/cloud/saas/marketing/responsys-user/SMS_Overview.htm) * [Salesforce Marketing Cloud](https://www.salesforce.com/products/marketing-cloud/overview/) * [Vibes](/sms-integration/vibes) # Vibes To configure SMS integration between your Quikly activation and [Vibes](https://www.vibes.com), please provide your Client Success manager the following information: * [Company ID](https://developer.vibes.com/display/APIs/Vibes+Account+Manager) * [Acquisition ID](https://developer.vibes.com/display/APIs/Acquisition) * A username and password