๐Ÿงฉ

App Block & Popup Surveys

3 articles James By James

Embed surveys in your storefront with app blocks and targeted popups.

App Block Surveys

App Block Surveys let you place a survey directly into any page of your Shopify store as an inline section โ€” not a popup or overlay. The survey sits naturally within your page content, matching your theme's look and feel, and is visible to every visitor who scrolls to that section. An app block survey embedded on a product page Because app blocks are placed directly into your page layout, they're incredibly versatile. Here are just a few ideas: - Product pages โ€” ask visitors about their product preferences, what features matter most, or what they're looking for. Place it below the product description or after the reviews section. - Home page โ€” collect "How did you hear about us?" attribution data, or gather email addresses with a discount incentive. - Collection pages โ€” understand what shoppers are browsing for, or ask about their style preferences to help guide them. - Blog posts โ€” ask readers if the content was helpful, or what topics they'd like to see covered next. - Landing pages โ€” capture leads or gather feedback on a specific campaign or new product launch. - Contact / About pages โ€” ask visitors what brought them to your store, or what they're looking for help with. The possibilities are endless โ€” anywhere you can add a Shopify app block, you can add a UserLoop survey. How App Block Surveys Work Unlike popup surveys, app blocks don't wait for a trigger. They render immediately as part of the page content wherever you place them. Visitors see the survey as a natural section of the page and can answer questions without any interruption to their browsing. App block surveys display every time the page loads โ€” they don't disappear after a visitor completes them. This means you can collect ongoing feedback from repeat visitors over time. Setting Up Your App Block Survey Step 1. Create an App Block Survey In your UserLoop dashboard, click Create Survey and select the App Block option. Create a new app block survey in the UserLoop dashboard Add your questions, configure your design and settings, then move on to activation. Step 2. Activate Your Survey Once your survey is ready, click the Activate Survey button in the top-right corner. If this is your first app block survey, it will automatically be set as your live one. If you have multiple app block surveys, use the Activate button to choose which one is currently live. Click Activate Survey to make your app block live Step 3. Add to Shopify Once your survey is active, you'll see a green Add App Block to Shopify button appear. Click this to go directly to your Shopify theme editor. Click the green Add App Block to Shopify button Step 4. Position and Style in the Theme Editor You'll be taken to the Shopify theme editor where the UserLoop Survey block has been added. From here you can: - Drag the block to position it exactly where you want it on the page โ€” for example, below the product description, after a hero banner, or at the bottom of a blog post. - Configure styling โ€” adjust the width, background style, text alignment, border radius, and padding to match your theme. App block survey settings in the Shopify theme editor Click Save to publish your changes โ€” your app block survey is now live on your store. Adding to Multiple Pages You can add the UserLoop Survey app block to as many pages as you like. Simply go to each page in the theme editor and add the block. This is one of the key advantages of app blocks โ€” you have full control over exactly where surveys appear. Styling Your App Block Survey App block surveys are designed to blend into your store's design. You have several customization options available directly in the theme editor: Max Width Set the maximum width of the survey container, from 300 to 800 pixels (default is 600px). The survey is centered on the page within this width. On mobile devices, it automatically scales to fit the screen. Background Style Choose how the survey container looks: - None โ€” fully transparent, the survey blends directly into the page background. - Card (default) โ€” a white background with a subtle shadow, giving the survey a clean, elevated appearance. - Bordered โ€” a light border around the survey with no shadow, for a more understated look. Text Alignment Control how questions and answer choices are aligned: - Left (default) โ€” questions and choices align to the left, which feels natural for longer text. - Center โ€” everything is centered, which works well for short questions and fewer answer options. Border Radius Set the corner rounding from 0 to 24 pixels (default is 12px). Use 0 for sharp corners or a higher value for a softer, more rounded look. This applies to the survey container and buttons. Padding Set the internal spacing from 12 to 48 pixels (default is 24px). This controls the space between the survey content and the edges of the container. Theme Font Inheritance App block surveys automatically inherit your theme's fonts, so the survey text matches the rest of your store without any extra configuration. Selecting Which Survey to Display The app block displays whichever survey you have set as active in your UserLoop dashboard. The active survey is the one shown on your store across all pages where you've added the app block. To change which survey is displayed, go to the survey you want to use in your UserLoop dashboard and click the Activate Survey button. This makes it the live survey โ€” only one app block survey can be active at a time. Supported Question Types App block surveys support all of UserLoop's question types: - Single select โ€” radio button choices - Multi select โ€” checkbox choices - NPS / number scale โ€” 0-10 rating buttons - Open-ended text โ€” free text input - Email โ€” email address collection - Date โ€” date picker You can also enable the "Other" option on choice questions to let visitors type in their own answer. Smart Question Targeting App block surveys support the same question targeting as other UserLoop survey types: - All customers โ€” shown to everyone. - New customers only โ€” shown only to visitors who have never placed an order. - Returning customers only โ€” shown only to visitors who have ordered before. How Customer Type Is Determined If your survey includes an email question, something special happens: after the visitor enters their email, UserLoop checks their order history in real time. This means subsequent questions in the survey can be dynamically shown or hidden based on whether that visitor is a new or returning customer. If no email question is included, customer-type-restricted questions are skipped for anonymous visitors. Follow-Up Questions Follow-up questions work the same way as in other survey types. If a visitor selects an answer that has a follow-up configured, the follow-up question appears inline immediately, keeping the flow smooth and natural. Discount Codes If you've enabled discount codes on your survey, a unique code is displayed to the visitor after they complete all the questions. The code is tied to the visitor's email address (if collected) and can be copied to the clipboard with a single click. This is a great way to incentivize survey completion โ€” offer a small discount in exchange for feedback. Progress Bar When enabled in your survey settings, a progress bar appears at the top of the survey showing visitors how far through they are. This is especially helpful for longer surveys to set expectations and encourage completion. Auto Proceed If Auto Proceed is enabled on your survey, the survey automatically advances to the next question when a visitor selects a single-choice answer. This creates a faster, more engaging experience that feels less like filling out a form. Mobile Experience App block surveys are fully responsive. On mobile devices: - The survey scales to fit the screen width. - Buttons and inputs are sized for easy tapping. - The layout adjusts to ensure readability on smaller screens. Since app blocks are inline content (not overlays), they feel completely natural on mobile โ€” just another section of the page. Best Practices Where to Place App Blocks The best placement depends on what you're trying to learn: - Home page โ€” place below the fold for general brand feedback or email collection. Great for "How did you hear about us?" type questions. - Product pages โ€” place below the product description or reviews section to ask about purchase intent or product preferences. - Blog posts โ€” place at the end of articles to ask if the content was helpful. - Landing pages โ€” place prominently to capture leads or gather feedback about a specific campaign. - About page โ€” place at the bottom to ask visitors what brought them to your store. Design Tips - Use the Card background for most themes โ€” it gives the survey a clean, defined boundary that draws attention without clashing. - Match your border radius to your theme's style. If your theme uses rounded corners on buttons and cards, use a similar radius for the survey. - Keep the width between 500-700px for the best readability on desktop. Too narrow and it feels cramped; too wide and it can look sparse. - Center alignment works best for short surveys (1-2 questions). For longer surveys, left alignment is easier to read. Content Tips - Keep it relevant to the page: Ask about products on product pages, ask about content on blog pages. - Shorter is better: 2-4 questions gets the best completion rates. - Lead with value: If you're offering a discount, mention it in the first question or in a heading above the survey. App Block Surveys vs. Popup Surveys Not sure which to use? Here's a quick comparison: | | App Block | Popup | |---|---|---| | Display | Inline on the page | Modal overlay | | Placement | You choose exactly where | Appears on all enabled pages | | Trigger | Immediate โ€” visible on page load | Timer, exit intent, or scroll | | Repeat visits | Shows every time | Shows once per visitor | | Intrusiveness | Low โ€” part of the page | Higher โ€” interrupts browsing | | Best for | Ongoing feedback, email capture, page-specific questions | Quick feedback, exit surveys, site-wide questions | You can use both at the same time. For example, run a popup survey site-wide for "How did you hear about us?" while placing app block surveys on specific product pages to ask about purchase intent. FAQs Can I place multiple app block surveys on the same page? You can add the block multiple times, but they will all display the same active survey since only one survey can be active for the app block surface at a time. Will the survey show again if a visitor already completed it? Yes. Unlike popup surveys, app block surveys display every time the page loads. This is by design โ€” it allows you to collect ongoing feedback from repeat visitors. Does it work with Shopify's section groups and templates? Yes. The UserLoop Survey app block works anywhere Shopify allows app blocks โ€” in sections, templates, and section groups. Can I hide the survey on mobile? The app block doesn't have a built-in mobile hide option, but you can use your theme's built-in CSS visibility controls or section settings if your theme supports them. Does it slow down my page? No. App block surveys use deferred loading, which means they initialize after the rest of your page has loaded. This ensures zero impact on your store's page speed. Need Help? If you have any questions about setting up app block surveys or need assistance choosing the right placement for your store, don't hesitate to reach out to our support team.

Popup Surveys

Popup surveys let you display a survey as a modal overlay on any page of your Shopify store. They're perfect for capturing feedback, collecting emails, or understanding your visitors without requiring them to navigate to a specific page. Once a visitor completes or dismisses a popup survey, it won't appear again for that visitor, so you never have to worry about annoying repeat customers. How Popup Surveys Work When a visitor lands on one of your enabled pages, UserLoop waits for a trigger event โ€” a timer, exit intent, or scroll depth โ€” and then displays the survey as a popup overlay. The visitor answers your questions directly in the popup, and their responses flow straight into your UserLoop dashboard. Setting Up Your Popup Survey Step 1. Create a Popup Survey In your UserLoop dashboard, click Create Survey and select the Popup option. Create a new popup survey in the UserLoop dashboard Add your questions, configure your design and settings, then move on to activation. Step 2. Activate Your Survey Once your survey is ready, click the Activate Survey button in the top-right corner. If this is your first popup survey, it will automatically be set as your live one. If you have multiple popup surveys, you'll need to use the Activate button to choose which one is live. Click Activate Survey to make your popup live Step 3. Add to Shopify Once your survey is active, you'll see a green Add Popup to Shopify button appear. Click this to go directly to your Shopify theme editor where you can configure the popup settings. Click the green Add Popup to Shopify button Step 4. Configure in the Shopify Theme Editor You'll be taken to the App embeds section of your theme editor. Here you can toggle the popup on, choose your trigger type, set the popup width and position, and control which pages show the popup. Popup survey settings in the Shopify theme editor Click Save to publish your changes โ€” your popup survey is now live on your store. Choosing a Trigger Type The trigger determines when the popup appears to your visitors. There are three options: Timer The popup appears after a set number of seconds. This is the default trigger. - Delay: Set anywhere from 1 to 60 seconds (default is 5 seconds). - Best for: Catching visitors who are browsing and have had a moment to engage with your page. - Tip: We recommend starting with 5-10 seconds. Too short and visitors may feel interrupted; too long and they may have already left. Exit Intent The popup appears when the visitor moves their mouse toward the top of the browser window, signaling they're about to leave. - No additional settings needed โ€” it triggers automatically based on mouse movement. - Best for: Capturing feedback or emails from visitors who are about to bounce. - Note: Exit intent only works on desktop browsers. On mobile devices, the popup will fall back to a short timer delay. Scroll Depth The popup appears after the visitor scrolls to a certain percentage of the page. - Depth: Set anywhere from 10% to 100% (default is 50%). - Best for: Engaging visitors who have shown interest by scrolling through your content โ€” especially useful on blog posts or collection pages. Choosing Where Popups Appear You have full control over which pages display the popup. In the settings panel, you can enable or disable popups for each page type independently: - Home page - Product pages - Collection pages - Cart page - Blog posts - Pages (e.g. About Us, Contact, FAQ) - Search results All page types are enabled by default. If you only want to survey visitors on product pages, for example, simply uncheck the other page types. Positioning and Sizing Position Choose where the popup appears on screen: - Center (default) โ€” appears in the middle of the screen with a dark overlay behind it. - Bottom right โ€” fixed to the bottom-right corner, less intrusive. - Bottom left โ€” fixed to the bottom-left corner. - Top right โ€” fixed to the top-right corner. - Top left โ€” fixed to the top-left corner. The center position is the most attention-grabbing and tends to get the highest response rates. The corner positions are more subtle and work well if you want to survey visitors without interrupting their browsing. Width Set the popup width between 300 and 600 pixels (default is 480px). On mobile devices, the popup automatically transforms into a full-width bottom sheet for a smooth experience regardless of the width you set. Selecting Which Survey to Display The popup displays whichever survey you have set as active in your UserLoop dashboard. If this is your first popup survey, it will automatically be set as the live one. If you create multiple popup surveys, you'll need to click Activate Survey on the one you want to use. Only one popup survey can be active at a time. Supported Question Types Popup surveys support all of UserLoop's question types: - Single select โ€” radio button choices - Multi select โ€” checkbox choices - NPS / number scale โ€” 0-10 rating buttons - Open-ended text โ€” free text input - Email โ€” email address collection - Date โ€” date picker You can also enable the "Other" option on choice questions to let visitors type in their own answer. Smart Question Targeting Popup surveys support the same question targeting as other UserLoop survey types: - All customers โ€” shown to everyone. - New customers only โ€” shown only to visitors who have never placed an order. - Returning customers only โ€” shown only to visitors who have ordered before. Customer status is determined by their email address. If a visitor hasn't provided their email, customer-type-restricted questions are automatically skipped. Follow-Up Questions If you've configured follow-up questions on any of your answers, they work seamlessly in popup surveys. When a visitor selects an answer that has a follow-up, the follow-up question appears inline without needing an extra click. Discount Codes If you've enabled discount codes on your survey, a unique code will be displayed to the visitor after they complete all the questions. Visitors can click the code to copy it to their clipboard, making it easy for them to use at checkout. Progress Bar When enabled in your survey settings, a progress bar appears at the top of the popup showing visitors how far through the survey they are (e.g. "Question 2 of 5"). This helps encourage completion by showing visitors the survey is short. Auto Proceed If you have Auto Proceed enabled on your survey, the popup will automatically advance to the next question when a visitor selects a single-choice answer โ€” no need to click a submit button. This creates a faster, smoother experience. Mobile Experience On mobile devices, popup surveys automatically adapt: - The popup transforms into a bottom sheet that slides up from the bottom of the screen. - It takes up the full width of the screen for easy tapping. - All buttons and inputs are sized for touch. Tips for Higher Response Rates - Keep it short: 2-4 questions is the sweet spot. The fewer questions, the higher your completion rate. - Start with an easy question: Lead with a simple single-select question before asking for text input or email. - Offer an incentive: Enable a discount code to reward visitors for completing the survey. - Target the right pages: If you're asking about products, show the popup only on product pages. If you want general feedback, the home page works well. - Don't trigger too early: Give visitors at least 5 seconds (or 50% scroll) before showing the popup so they've had time to engage. FAQs Can I show different surveys on different pages? Currently, one survey is active for all popup-enabled pages. If you need different surveys on different pages, consider using App Block Surveys instead, which can be placed individually on specific pages. Will the popup show again if a visitor dismisses it? No. Once a visitor completes or dismisses the popup, it won't appear again in that browser. This is tracked via the browser's local storage. Does it work with my theme's language settings? Yes. Popup surveys automatically detect your store's language and display in the appropriate locale. Can I use popups alongside checkout surveys or email surveys? Absolutely. Popup surveys operate independently from your checkout and email surveys, so you can run all three at the same time. Need Help? If you have any questions about setting up popup surveys or need assistance, don't hesitate to reach out to our support team.

Email Collection on App Block and Popup Surveys

App Block and Popup surveys can now collect email addresses from visitors โ€” without requiring one. This means visitors can respond to your survey completely anonymously, or choose to provide their email if you include an Email question. How It Works When you add an Email question to your App Block or Popup survey, visitors will see an email input field as part of the survey flow. If they enter their email, all of their responses from that session are linked to that address โ€” including answers they already gave before reaching the Email question. If a visitor skips the Email question (when Allow Skip is enabled) or you don't include one at all, they can still complete the survey anonymously. Their responses are still captured and counted in your analytics. Why Add an Email Question? There are a few key benefits to collecting emails: Link responses to customers โ€” Without an email, App Block and Popup responses are anonymous. Adding an Email question lets you connect feedback to a real customer, which makes the data more useful for follow-up and segmentation. Enable smart customer targeting โ€” If your survey has questions that target new or returning customers, the Email question makes that possible for anonymous visitors. After the visitor enters their email, UserLoop checks their order history in real time. Subsequent questions can then be shown or hidden based on whether that visitor is new or returning. Build your email list โ€” Pair the Email question with a discount code reward to capture email addresses from visitors who might not otherwise subscribe. Setting It Up 1. Go to your App Block or Popup survey in the UserLoop dashboard. 2. Click the Questions tab, then click Add Question. 3. Select Email from the question type list. 4. Type your question โ€” for example, "What's your email address?" or "Enter your email for 10% off". 5. Configure the settings: - Enable Allow Skip if you want the email to be optional. - Add a Sub Heading with context, like "We'll send your discount code to this address." Where to Place the Email Question The position of the Email question in your survey matters: - At the start โ€” Best when you need the email to enable customer targeting on later questions, or when you want to identify the visitor before they answer anything. - At the end โ€” Best for maximizing survey completions. Some visitors will drop off at an email request, so placing it last means you still get their other answers even if they skip the email. - Before a reward โ€” If you're offering a discount code, place the Email question just before the thank-you page so visitors are motivated to enter it. Without an Email Question If you don't add an Email question to your App Block or Popup survey, the survey works exactly as before โ€” visitors answer questions anonymously and their responses appear in your dashboard. You don't need to include an Email question unless you want to. Need Help? If you have any questions about email collection, reach out to us via live chat and we'll be happy to help.