Skip to main content

Shopify Product Sync and Add to Cart

Updated this week

Experiences by Jebbit integration with Shopify allows you to create interactive experiences that not only recommend products but also enable customers to add them directly to their cart. This seamless connection enhances the shopping experience, potentially increasing conversion rates and average order value.


Before you begin

  • Install the Experiences by Jebbit app on Shopify.

  • Access to features like the Dynamic Product Feed and Add to Cart requires an Enterprise-level account.


Sync products from Shopify into your experience

Syncing Products between Jebbit and Shopify allows user to:

Create Outcomes

  1. Navigate to your experience.

  2. Click on Editor.

  3. Select Add Outcomes and enter your outcome content and configurations.

Add products to Outcomes

You can import Shopify products and assign them to outcomes:

  1. In the Outcomes tab, select or create the desired outcome.

  2. Use the Import from Shopify dropdown to browse your Shopify catalog.

  3. Select one or more products (only "Active" products will appear).

  4. Filter by collections if needed.

  5. To add multiple Products within each Outcome, click Add Products to this Outcome and then select Add from Shopify.

  6. Click Done to add the selected products.

Note: Products with a cart icon have variants (e.g., size or color). You can edit these variants and organize them using the Category feature.

Enable the Add to Cart feature

To let users add products directly to their Shopify cart from within the experience:

  1. Navigate to the Editor, select Add Elements.

  2. Under the Outcomes heading, select Products.

  3. Inside the Product Container, toggle Add to Cart to enable cart functionality.

  4. Customize variant display settings. It can show up to 3 variants per product (e.g., size, color).

  5. Now that your products are feeding into your quiz directly from Shopify, and your screen is set up with the correct Container, you can select which Add to Cart experience you would like to serve. By adding any of these options, the variants for each product will be pulled in automatically, so the end user can make selections within the experience. There are three options available:

    • Add to Cart: This adds one of your product recommendations to your cart.

    • Select Multiple Products: This option enables the end consumer to select multiple products and then click submit to add them to cart.

    • Add all to Cart: This option will add a button which gives the consumer the option to put all their product recommendations in their cart with one button click.

Note: You can also use the Add to Cart feature with a single Standard Outcome. In this case, you still need to ensure the Outcome is pulled through Shopify. Then, all you need to do when you set up your Product Recommendation screen is add the 'Shopify Buy Now' element.


Use the Dynamic Product Feed

For real-time personalization and product recommendations:

  1. Navigate to the Outcome Logic settings.

  2. Attach your product feed.

  3. Configure filters and logic to surface personalized product recommendations based on user responses and behavior.

  4. Add a Dynamic Product feed screen to your experience. Or, in the Editor, select Add Elements and under the heading Dynamic Product feed add the Product Feed Display container.

  5. Make sure to save all of the mapping you have done.

Tip: If you're using the Dynamic Product Feed, pull in the 'Product Feed Display' Container. If using standard Outcomes, pull in the 'Products' Container.


Next steps

  • Use preview mode to validate product sync, add to cart, variant display, and checkout flow.


FAQ

How long does it take for updates to products in Shopify to reflect in Experiences by Jebbit?

  • If you are pulling in Products through the 'Import from Shopify' tool, then it's important to note that a sync automatically happens once per day at 12AM UTC and can take up to an hour. You can manually refresh the sync from the 'Import from Shopify' tool at any time. If you are using the Dynamic Product Feed, however, the sync is in near real time.

I'm not seeing the Outcomes and products that I've set up reflected in my quiz.

  • Ensure that you are using the correct Outcome Container elements. To showcase the Products within each Outcome, you need to use the 'Products' Container. To showcase the main Outcome, you will need to use the Outcome Image, Header, and Description elements.

How do I add a 'Shop Now' button to the main Outcome?

You will notice that the Products Container comes with a button for each Product by default. However, you will need to add a regular button to your screen and then set up a redirect URL that routes to the Outcome URL to add a button like this to a single Outcome.

I don't see the Shopify Dynamic Product Feed in my account.

  • The Shopify Dynamic Product Feed is only offered to users with Enterprise level permissions. Reach out to your Customer Success Representative to enable access.

Some of my Products are not showing in the Import Tool?

  • We will only display 'Active' Products in the 'Import from Shopify' tool.

I'm seeing the error "There was a problem logging into your Shopify account" when trying to install or use the Jebbit app. What should I do?

  • This error occurs when the email address you used to sign up for Jebbit is different from the email address associated with your Shopify store. To resolve this, uninstall the app from your Shopify store and then reinstall it using the same email address that has administrator access to your Shopify account.

Add to Cart isn't working for me.

  • The Shopify Add to Cart feature will only work if you are pulling in Products from Shopify through the integration. This can be done using the Shopify Dynamic Product Feed, by pulling in Products from Shopify within the Standard Outcomes menu, or by pulling in a single Outcome from Shopify within the Standard Outcomes menu.

Why do some Products have carts next to them in the Standard Outcomes menu?

  • You will notice cart icons next to some Products which reflects whether there is more than one Variant/ Option for that Product. Keep in mind if certain Products have Variants/ Options while others do not, as this could lead to a confusing user experience with Add to Cart turned on.

Can Jebbit show more than one Variant/Option of the same Product in a quiz?

  • We recently added the ability to display each variant as an individual product! You can now map multiple variants to responses, and then enable them to display in individual slots on your Product Feed Display page. You can make this change from the Product Feed Logic menu after you've mapped your variants.

Why are out of stock Variants are displaying in my quiz?

  • Jebbit looks at the Product level when determining stock availability. If a Variant/ Option of a Product is out of stock, but other Variants of the same Product are in stock, then we will still serve an out-of-stock Variant as a match if you are using Add to Cart. This is to allow you to still serve the most relevant match, while allowing users to select a different in stock item before they reach the cart on your site.

    As a best practice, you should serve multiple product matches to users with Add to Cart turned on, especially if you know how you have several out-of-stock Variants.



Did this answer your question?