Single Variant Selector Widget - Post Purchase

Creating a Single Variant Selector Widget

This section will guide you through creating a Single Variant Selector Widget, a powerful tool for offering a quick, post-purchase upsell to your customers.

Widget Overview

Widget Name: Single Variant Selector
Purpose: This widget allows customers to quickly choose and purchase a specific product variant—such as a size or color—directly on the post-purchase page. It simplifies the selection process and increases the likelihood of an instant conversion.
Where It Works: Post-purchase page

Main Features:

Displays a single product with its available variants.
Offers a dropdown or button for variant selection.
Includes a “Pay Now” button to instantly add the upsell item.
Ideal for personalized, time-sensitive offers after a customer has completed their checkout.

Configuration Options:

Select the product and its default variant.
Customize the heading and call-to-action text.
Set the display layout (vertical or horizontal).

Limitations:

Works only on the post-purchase page.
Limited to one product at a time.

Step-by-Step Creation

Click Create Widgets: From your dashboard, click Create Widgets. A new page titled "Add New Widgets" will appear.
Fill in the Details: Fill in the Widget Title and a Short Description for your widget.
Select a Template: If there are any existing widgets that align with your title, they will appear at the bottom of the page. Select the one you wish to use.

Single Variant Selector Widget: Content Configuration

After selecting your template and clicking Next, you will be taken to the widget's main configuration page. Here, you will customize its content and define its behavior.

The first step is to set your Trigger Products. These are the products a customer must purchase for the Single Variant Selector widget to appear on the post-purchase page. To do this, you will need to:

Select the Manual option to add your products.
Search for and select the specific products you want to act as triggers.

Once you have added your trigger products, you can then proceed to customize the general settings for your widget, such as its heading and appearance.

After making your desired changes, click Save Changes.

Advanced Settings

Once you have configured the content and style of your widget, you can use the Advanced section for further customization. Here, you have two primary options:

Device Targeting: This lets you control which devices your widget is visible on (e.g., desktop, mobile, tablet), ensuring an optimal user experience.
Custom CSS: This allows you to write custom CSS to apply specific styles that go beyond the standard configuration options.

After making any adjustments, click Save Changes. Your widget is now fully built and ready to be used.

Shopify Configuration

The last step is to configure your Shopify checkout to enable the post-purchase page. This is where your widget will be displayed.

Go to your Shopify dashboard.
Click on Settings.

From your Shopify dashboard, click on Settings in the bottom-left corner, and then select Checkout from the menu.

This will take you to the Checkout settings page, where you can enable the post-purchase feature required for your widget to be displayed.

Enabling the Dynamatic App for Post-Purchase

Once you are on the Shopify Checkout settings page, scroll down to the Post-purchase page section. Click the Add a post-purchase app button.

This will open a list of your installed apps. Select the Dynamatic app from the list to enable it on your post-purchase page. This is the final and crucial step that will allow your Single Variant Selector widget to be displayed after a customer's purchase.

Navigating to the Post-Purchase Page Editor

To access the editor for your post-purchase page, follow these steps:

Head to your Shopify theme editor.
At the top of the editor, find the page dropdown menu and select Checkout from the list.
Once you're on the Checkout page, click on the Checkout dropdown bar again.
From the options that appear, select Post-purchase.

This will take you to the post-purchase editor, where you can add and customize content that appears after a customer completes their order.

Publishing Your Configured Widget Live

This following documentation section provides the final, detailed steps required to publish your fully configured widget and make it visible to customers on your live storefront.

01. How to successfully setup a widget

02. Understanding and Creating Audiences

03. Creating Placements and Zones

04. Campaigns

05. Displaying Your Widgets on the Storefront

Adding a Dynamatic Zone to the Post-Purchase Page

Now that you are on the post-purchase page editor, you will add a Dynamatic zone to your desired location. This will create a designated space for your widget on the page.

Navigate to the section where you would like your widget to appear.
Click on the Add block button or the + icon in that section.
From the list of available blocks, choose the Dynamatic App Zone.

This action will place the zone on your page, and you will be able to select the specific zone you created in your Dynamatic dashboard.

Linking and Saving Your Zone

After adding the Dynamatic App block, a form will appear where you can link the zone you created earlier.

From the dropdown menu, paste the specific zone ID you want to display on this page. Once you have pasted your zone, click Save Changes in the top-right corner of the editor.

This final step connects your Dynamatic zone to your Shopify post-purchase page, ensuring your widget appears correctly on your storefront.

Congratulations! Viewing Your Widget on the Storefront

You have successfully completed all the steps to create and publish a Single Variant Selector widget. Your campaign is now live and ready to display on your storefront.

To see the final result, go to your store and place an order for one of the trigger products you selected during the setup.

After you complete the checkout process, you will be taken to the post-purchase page, where your customized Single Variant Selector Widget will appear, allowing customers to add the upsell product to their order.