Configuration of the Connectif Checkout Extension app in Shopify (apps to customize checkout)

The Connectif Checkout Extension application is an app to customize the payment screen in Shopify, used to display a custom component with product recommendations sent from Connectif on the checkout page.

This article explains how to configure the Connectif Checkout Extension in your eCommerce so you can add the product recommendation component. 

1. Properties

• In Shopify integrations, there is a user interface extension compatible with Shopify Plus that allows you to add custom product blocks on your Shopify store’s checkout page. 

• This block will display the custom products and will allow products to be added directly to the cart, as long as your integration with Shopify is set up to register products in Connectif by ID.
• If the integration is set up to register products by SKU, the block will show a “View” button for the product, but not allow it to be added to the cart.

• To display the product block, you must configure the workflow responsible for it in Connectif, using the “Share Data” node (see section 2.2.).
• If you don’t configure the workflow, you will see a preview of the block in your Shopify store, but it will not be shown to your contacts.
• Additionally, even if this information is not displayed, the “Share Data” node will generate activity in the contact’s profile and in your Connectif Store.

2. How it is used in Connectif

2.1. Configure the Checkout Extension in Shopify

1. Go to your Shopify account, navigate to Checkout, and click Customize. You can also access it via “Online Store > Themes > Customize theme” and selecting the checkout page.

2. In the side menu, go to Apps.

3. Search for “Connectif Checkout Extension” and add it.

4. Once the installation is complete, you can add the custom component element. To do this, in the side menu, go to Sections.

5. Click on Add app block where you want to add the block and select Connectif Checkout Extension from the dropdown.

5. Set the component parameters. Changes will be shown in real time in the preview.

• Identifier: to specify the ID of the “Share Data” node from which the information to display products will be extracted. This must be the same as configured in that node; otherwise, it will not work.
• Number of products: to set the number of products the block will display.
• Image aspect ratio: to select the ratio of the image to be shown in the block.
• Image fit: to select how the image will be displayed within the container.
• Show product description: to choose whether to show or hide it.
• Button style: to choose the button style, according to what you have set up for your Shopify checkout. 

2.1.1. Disable the WebPixel Option

If you have the Shopify Checkout extension active, you can disable the page visit event of the Web Pixel to avoid duplicate Page Visit events in Connectif. 

1. In your Shopify account, go to "Apps and Sales Channels" and access the Settings of your Connectif integration.

2. In the Web Pixel section, check the box Disable page visit event in checkout. 

This option will only be available if you have a Shopify Plus account, so you can disable it if you activate the checkout extension.

3. Click on Save Settings.

2.2. How to display the custom component to your contacts

In order for the component to be shown to your contacts with personalized products, in addition to adding the app block in your Shopify checkout page settings, you must also have a workflow responsible for this task. 

1. In your Connectif Store, go to Workflows and create a new Custom Workflow.

2. In the interface of the “Start” node, define the audience you want to display this content to when they visit the checkout page. In our example, we have set the strategy to activate for All my list and for All existing and new contacts.

3. Add a “On page visit” node to your workflow and connect it to the “Start” node. 

4. In its interface, choose the option Any page that begins with and enter your checkout page URL. In Limitations, deactivate the option Deactivate after trigger. This way, any contact who visits the checkout page will enter the workflow as many times as they visit the checkout page.

5. Add a “Get products” node and connect it to the “On page visit” node.

6. In its interface, select from the available use cases the one(s) that best suit your strategy and configure it accordingly.

7. Add a “Share Data” node and connect it to the “Get products” node.

8. In the node interface, assign an Identifier that you can use later to retrieve the node’s data and save it so you can link it in Shopify. Also configure the Source Node and select the data you want to share with Shopify.

9. Save and activate your workflow.

10. Go back to your Shopify account, to the settings of the component you have added to your checkout page. In the Identifier section, enter the ID you assigned to the “Share Data” node. In this way, that block will obtain information from the “Share Data” node and use it to personalize the product block in the checkout.

Keep learning!

To get the most out of your Connectif account, we recommend continuing with the following articles:

• Guide to integrate with Shopify, to learn step by step how to integrate your Connectif Store with this CMS.
• “Share Data” node, to understand how this node works.
• “Get Products” node, to learn how to configure it and retrieve the desired products in each case.
• Automatically related products, to understand how Connectif's automatic product relation mechanism works.