Add a button to your Connectif web content that allows your contacts to directly add a product to their cart without needing to visit the product page, making it easier for them to make purchases on your eCommerce.
In this article, you’ll learn how to add an “Add to cart” button in your Connectif web content.
To insert an “Add to cart” button on your website, you’ll need an expert with programming knowledge to assist you in certain steps.
Implementation time: Varies depending on the technical team.
Difficulty: High
When to use it?: When you want to insert an "Add to cart" button in your web content.
Before you start: prerequisites
- Your IT team must create a URL (calling your back office) that will be used to add the product to the cart.
- This URL should include the fragment {{idproducto}}.
The {{idproducto}} fragment, formatted as a Variable in Connectif, refers to the product that should be added to the cart, identified by its ID. This way, the URL sends a request to your back office to add a product to the cart based on its ID.
- Once created, the URL would look something like this: https://www.example.com/add-product/{{idproducto}}
STEP 1: Creating the Web Content
1. In your Connectif Store, go to “Content > Web Content” and click Create new web content.
2. Select the appropriate Web Content type for your strategy.
3. Design your content and add the elements you want.
If you need more information on how to edit your Web Content, you can find it in this article.
4. Add a Products element to your content.
5. Go to the Products element settings.
6. Select the “Product with price” template.
7. In the section Customize the template for this content, click on “{{buttonText}}”. Then click on “More options > Insert/Edit link”.
8. In the URL field, enter the created URL and click Save.
9. Once your Web Content is configured, click ✔ Save.
STEP 2: Creating the workflow that will display the Web Content
10. Go to Workflows and click Create new workflow.
11. Click on the settings of the "Start" node and under Data source selection, select existing and new contacts from your list as the audience.
12. Click Apply.
13. Search for the appropriate Trigger node for your strategy, which tells Connectif when the content should be shown.
14. Add it to your workflow and configure it.
In our example, we’ll add a “On page visit” node and configure it so the content is shown to all users who visit our website.
15. In the Limitations tab, disable the Disable after firing option.
16. Click Apply.
17. Connect the “On page visit” node to the “Get products” node.
18. In the node settings, select the Use Case to configure which products Connectif should retrieve to display in the content.
In our example, we will use the “Most viewed products” use case.
19. Connect the “Get products” node to an “Send web content” action node.
20. Go to the “Send web content” node settings and select the content you just created.
21. Within the node configuration, assign each product field (left column) to the corresponding variable (right column), as shown in the image.
22. In the Limitations tab, uncheck the default Limit per contact option, so the content with the “Add to cart” button can be shown to contacts more than once.
By associating the external product ID value to the {{idproducto}} variable, each “Add to cart” button URL will redirect to its corresponding item in the cart.
23. Click Apply.
24. Save and activate the workflow.
Success!
The “Add to cart” button in your Web Content is now ready.
Keep learning!
To make the most of your Connectif account, we recommend continuing with the following articles:
- Product recommender for undecided customers, to show products related to the ones they’ve viewed.
- Cart recovery before abandonment for anonymous users, to display a cart popup before visitors leave the site.
- Abandoned cart recovery funnel, to send a sequence of emails after a cart is abandoned.
- Create a personalized product block in web content, to show customers products they are interested in.