Learn how to create custom screens within the Tapcart app to provide a seamless mobile shopping experience and integrate Rebuy's Dynamic Bundle widget for bundling products.
What are custom screens
Within the Tapcart app editor there is the ability to create a custom screen which is essentially a way of presenting a standard web page while remaining in the mobile app experience. This opens the door for merchants to be able to create a customized product page using a Rebuy Dynamic Bundle widget to give the user a type of bundled product page. Read more on Tapcart custom screens.
Getting Started with Tapcart Web Bridge SDK
You will need to install the Tapcart SDK to your site or a specific page that you would like the integration to work on. This can be accomplished by following the Tapcart, Getting Started guide. Install their SDK in the of your site or a specific page such as product.liquid or product.json.
Setting up Rebuy
If you do not already have a widget in mind that you would like to power this page, create it now. This will be best used with a Dynamic Bundle type widget to power a bundle experience. The widget should be installed on your store and configured to to your liking. The connected Data Source to this widget should have rules based off the URL that will be powering this experience such as https://try.rebuyengine.com/products/floral-cosmetics-bundle where we can create a URL based rule to say "If URL contains 'floral-cosmetics-bundle' then return the desired products for the floral cosmetics bundle". More on customizing a product and product page to be powered by a dynamic bundle widget to come.
Creating the Custom Screen in Tapcart
Now, navigate to the admin settings for your Tapcart app and add a custom screen. You will need to add the URL of the page that you have created on your Shopify store to this custom screen settings. For more information on creating a using a custom screen within the Tapcard admin please visit the Tapcart documentation.
Rebuy's Integration with Tapcart Custom Screens
With this integration, the widget being used here will now add items to the cart within the Tapcart mobile app environment, ensuring that the user never leaves their session within the app. When the user clicks 'Add to Cart,' this action will trigger the addition of the items within the mobile app and place them in the user's mobile app cart session. Furthermore, if the user decides they would like more information about a specific item and taps on a 'Learn More' action, such as clicking on the image of an item, they will be directed to the product page for that item within the Tapcart app, consequently leaving the custom screen.
Things to Consider
This integration is designed to function with Rebuy's Dynamic Bundle widget but is also compatible with a standard Product Page embedded widget.
To ensure that the user remains within the Tapcart app environment for other actions, it is essential to hide links, such as web navigation menus and other links that might enable the user to navigate your web store while on the Tapcart Custom Screen. This can be achieved using conditional CSS and JavaScript. For more information on this, please visit Tapcarts developer documentation.