Smart Flows provides a comprehensive set of settings to allow merchants to build highly personalized, behavior-driven experiences on their Shopify storefront. The following is a detailed breakdown of all available settings, including how to configure and enable them within both Link and Global Flows. This guide will help you understand each setting’s purpose and functionality, ensuring optimal configuration for your specific business needs.
If you're Interested in how to set up a Smart Flow please refer to our configuration guide for step by step instructions.
Messaging Steps Settings
When building Smart Flows, you can configure different types of messages to engage users. These include Pop-Up Messages and Website Banner Messages. Each type serves a distinct purpose:
Pop-Up Messages:
Purpose: Pop-ups are used to grab immediate attention by displaying messages directly on the screen.
Example: A pop-up could show a discount code to customers visiting the website during a limited-time promotion.
Settings:
Title & Description: Add message content to communicate with customers. Customize with text formatting options (bold, italic, underlined) and set text size using heading levels (H1, H2, etc.).
Display Settings:
Full-Width Option: Expand the pop-up to span the entire width of the website.
Modal Border Radius: Adjust the corners of the pop-up (square or rounded).
Button Border Radius: Customize the button’s shape (sharp corners or fully rounded).
Image Border Radius: Adjust the corners of any images within the pop-up for a clean, modern look.
Call to Action (CTA) Buttons:
Primary Button: Default “Close” label, customizable text, and alignment (left, center, or right). Closes the pop-up and triggers follow-up actions.
Secondary Button: Default “Keep Shopping” label, customizable text. This button closes the modal and can trigger additional steps.
Custom CSS: Optional for advanced styling and design customizations (not required for basic functionality).
Website Banners:
Purpose: Display persistent messaging at the top or bottom of the website without interrupting the user experience.
Example: Use banners to notify users about free shipping offers or sales.
Settings:
Title & Description: Add custom text with options for clickable hyperlinks and text formatting (bold, italics, underlined). Set text size using heading levels (H1, H2, etc.).
Display Settings:
Text Alignment: Align text in the banner as desired.
Dismissible Option: Enable a dismiss button (X) in the top-right corner to let users close the banner.
Color Customization:
Default colors will inherit the website's theme, but you can adjust them with the color picker or HEX codes.
Reset to Theme: Easily revert to the default theme colors if needed.
Custom CSS: Add advanced design customizations (optional for basic functionality).
Segmentation Options
Smart Flows allows you to deliver personalized experiences by segmenting users based on behaviors, locations, and integrated data sources like Klaviyo Segments.
User-Based Segmentation:
New Users: A user is identified as new if they have had less than 30 minutes of inactivity on the site.
Returning Users: A user is considered returning after 30 minutes or more of inactivity.
Location-Based Segmentation:
Country: Segment users by country.
State/Province: Narrow the segmentation to specific states or provinces within the selected country.
Klaviyo Segments:
Klaviyo integration allows you to target specific customer segments pulled directly from your Klaviyo account.
Klaviyo Segments: This allows merchants to import their customer segments from Klaviyo, offering precise targeting based on behavior, engagement, or demographic data. For example, you can create flows for high-value customers, first-time buyers, or specific groups such as those who abandoned carts or clicked on specific email links.
Update Frequency: Klaviyo segments are pulled into Smart Flows on an hourly basis, and you can manually refresh them if needed. This ensures that your flows are always targeting the most up-to-date customer segments.
Actions & Conditionals
Triggers are the conditions that activate specific actions within your Smart Flows. Below are some common triggers you can configure.
Add Items to Cart:
What is Add to Cart?
Purpose: This trigger allows you to set up and automatically add products to the customer's cart. You can choose products or product variants that should be added under certain conditions.
Settings:
Product Selection: Choose the product or products you want to add to the cart. This is where you will select the specific products that will be added automatically.
Product Quantity: You can also define the quantity of the product to be added to the cart.
Discount Options: Select the type of discount to apply. Options include:
None: No discount applied.
Free: The product is added for free.
Percentage Off: Apply a percentage discount to the product.
Fixed Amount: Apply a fixed monetary discount to the product.
Discount Message: Customize the discount message that appears to users to let them know about the promotion or offer.
Skip Add to Cart Modal: Enable this option to skip the add-to-cart modal. This means that, if variant selection is not needed, the item will be automatically added to the shopper's cart without showing a pop-up modal.
Variant Display:
First Variant by Default: Choose to display the first variant of the product automatically in the modal.
Override Modal Text: Customize the modal's text to better fit your campaign or offer.
Option Display: You can customize how product variants are displayed in the modal. Options include:
Drop-Downs: Display product variants in a dropdown list.
Swatches: Show product variants as swatches (color options, for example).
Images: Display product variants as images for a more visual selection.
Buttons: Use buttons for variant selection.
Modal Settings: Customize how the modal behaves, including:
Title & Description: Set the title and description for the modal.
Call to Action Text: Customize the text on the primary and secondary buttons, such as “Add to Cart” or “Skip”.
Modal Display Options:
Backdrop: Enable or disable a backdrop behind the modal to focus the user's attention.
Full-Width: Choose whether the modal should be full-width for better visibility.
Padding & Border Radius: Adjust the padding and border radius to style the modal.
Button Radius & Image Radius: Customize the border radius for buttons and images inside the modal.
Image Settings:
Aspect Ratio: Control the aspect ratio of product images in the modal (1:1, 2:1, etc.).
Image Layout:
Fit: The image will resize to fit within the given dimensions, maintaining its aspect ratio.
Fill: The image will resize and fill the given dimensions, potentially cropping the image.
Image Height & Width: You can set a maximum height and width for the images in the modal to ensure they fit the design.
Image Customizations:
Max Height & Width: Control the maximum dimensions for images in the modal.
Aspect Ratio: Adjust how images scale within the modal, either keeping the original aspect ratio or filling the space.
Buy X Get Y (BXGY):
What is Buy X Get Y?
Buy X Get Y is a bundled promotion that rewards customers with additional items when they meet certain criteria.
Example: "Buy one shirt, get one free" or "Buy two items, get a 10% discount on your next purchase."
Settings:
Buy X: Define the required products or quantity that needs to be purchased to trigger the promotion.
Get Y: Define the free or discounted item(s) or offer(s) the customer will receive when the conditions are met.
Discount Type: Choose between None, Free, Percentage Off, or Fixed Amount for the reward:
None: No discount applied.
Free: The item is given for free.
Percentage Off: A percentage discount is applied to the qualifying items.
Fixed Amount: A fixed monetary discount is applied to the reward.
Fallback Behavior: Specify what should happen if the customer doesn’t meet the conditions for the promotion:
Remove the offer from the cart completely.
Leave the offer in the cart at full price, so the customer can still see the promotion but not receive the discount.
Customizing the Discount Message: You can personalize the discount message for the promotion. For instance, “Congratulations! You qualify for a free gift with your purchase.”
Skipping the Add-to-Cart Modal: You can choose to skip the add-to-cart modal for scenarios where variant selection is not needed. This will automatically add the item to the customer’s cart without showing a pop-up.
Product Display in Modal: In the modal settings, you can adjust how products are displayed:
Product Variant Display: You can show product variants by default or override the modal text and display options (dropdowns, swatches, buttons, or images).
Modal Design: Customize the modal with options like:
Backdrop: Enable or disable the backdrop for focusing on the modal.
Full-Width: Set the modal to be full-width for maximum visibility.
Padding and Border Radius: Adjust padding within the modal and round the corners for a smooth design.
Button Customization: Adjust the border radius of buttons within the modal for a modern, clean look.
Image Customization: You can adjust the border radius, spacing, aspect ratio, and max height for product images in the modal.
Cart Subtotal:
Set conditions based on the cart subtotal (total price of the cart) to trigger discounts or special offers.
Conditions like "If subtotal is greater than or equal to a specific amount" or "If subtotal is less than a certain value" can activate promotions.
Specific Date vs. Date Range:
Specific Date: Triggers actions on a fixed date. Ideal for flash sales, product launches, or one-time promotions.
Date Range: Covers a span of time, using both a start and end date. Best suited for time-sensitive offers or seasonal campaigns.
Additional Components
Discount:
This component allows you to apply Shopify discount codes automatically based on specific flow conditions, such as adding products to the cart or meeting a subtotal threshold.
Redirect:
Redirect users to specific pages after they trigger an action within the flow. Possible destinations include:
Homepage
Cart
Checkout
Custom URL (where you can define the destination URL)
Custom CSS and JavaScript:
Custom JavaScript: Add custom code to modify how actions are triggered or the behavior of the page.
Example: After a customer adds items to their cart, you can execute JavaScript to trigger additional events or call Rebuy APIs.
Custom CSS: Apply custom styles to elements of the flow (pop-ups, banners, buttons) to align with your branding.
Example: Design campaign-specific elements with conditional styling, ensuring the flow matches your marketing context.
