Tapcart For You Feed Implementation

Configuration within Tolstoy

Go to Onsite → Create Tolstoy → Select Tapcart “For You feed”
Select videos you want to include in the feed through selecting playlists, and adjust any settings through the design tab
- Most customers include the “Product tagged” playlist and “Trending videos” playlist, but you can include whatever playlists you prefer
- If your Tapcart app uses multi-currency, hide the product price by going to Design → Product card → product price.

Configuration within Tapcart:

The Feed Can be implemented either from the Homefeed Top Bar or via Navigation Item.

📝: Please note, only Tapcart users on an Enterprise plan can use the Navigation item implementation

Tutorial video for Navigation Item implementation here.
Tutorial video for Home feed Top Bar implementation here.

Code you will use for the installations:

Code for Tapcart Block Editor:

The feed code is slightly different for Tapcart apps that use side vs. bottom navigation. Please use the code based on your app’s implementation

Code for Navigation Item Implementation

For apps that use bottom navigation:

HTML code:
<tolstoy-block data-publish-id="PROJECT_PUBLISH_ID" data-block-type="video-page" data-nav-type="custom-screen-and-bottom-navbar" ></tolstoy-block>

CSS code:
* { box-sizing: border-box; padding: 0; margin: 0; }

JS code:
function createTolstoyBlock() { const script = document.createElement('script'); script.setAttribute('type', 'module'); script.setAttribute('defer', ''); script.setAttribute('src', 'https://widget.gotolstoy.com/we/widget.js'); script.setAttribute('data-app-key', 'TOLSTOY_APP_KEY'); document.head.appendChild(script); } createTolstoyBlock();

For apps that use side navigation

HTML code:
<tolstoy-block data-publish-id="PROJECT_PUBLISH_ID" data-block-type="video-page" data-nav-type="custom-screen" ></tolstoy-block>

CSS code:
* { box-sizing: border-box; padding: 0; margin: 0; }

JS code:
function createTolstoyBlock() { const script = document.createElement('script'); script.setAttribute('type', 'module'); script.setAttribute('defer', ''); script.setAttribute('src', 'https://widget.gotolstoy.com/we/widget.js'); script.setAttribute('data-app-key', 'TOLSTOY_APP_KEY'); document.head.appendChild(script); } createTolstoyBlock();

Code for Homefeed top bar implementation

For apps that use bottom navigation

HTML code:
<tolstoy-block data-publish-id="PROJECT_PUBLISH_ID" data-block-type="video-page" data-nav-type="header-and-bottom-navbar" ></tolstoy-block>
CSS code:
* { box-sizing: border-box; padding: 0; margin: 0; }

JS code:
function createTolstoyBlock() { const script = document.createElement('script'); script.setAttribute('type', 'module'); script.setAttribute('defer', ''); script.setAttribute('src', 'https://widget.gotolstoy.com/we/widget.js'); script.setAttribute('data-app-key', 'TOLSTOY_APP_KEY'); document.head.appendChild(script); } createTolstoyBlock();
For apps that use side navigation

HTML code:
<tolstoy-block data-publish-id="PROJECT_PUBLISH_ID" data-block-type="video-page" data-nav-type="header" ></tolstoy-block>

CSS code:
* { box-sizing: border-box; padding: 0; margin: 0; }

JS code:
function createTolstoyBlock() { const script = document.createElement('script'); script.setAttribute('type', 'module'); script.setAttribute('defer', ''); script.setAttribute('src', 'https://widget.gotolstoy.com/we/widget.js'); script.setAttribute('data-app-key', 'TOLSTOY_APP_KEY'); document.head.appendChild(script); } createTolstoyBlock();

To publish:

Replace the PROJECT_PUBLISH_ID in the HTML code with the Publish ID from the Tolstoy Tapcart project, which you can find in the Tolstoy app under the projects settings.

Replace the TOLSTOY_APP_KEY in the JS code with your Tolstoy App Key.

🤔 Troubleshooting Tips

Is the Tapcart project live? (Published = green button)
Is the APP KEY copied to the code?
Is the app in the latest version?

That's it. 🚀

Need help?

You can reach out to our friendly support team in two ways:

Via email at support@gotolstoy.com.
Using our live chat option, which can be found by clicking on the pink chat icon on any Tolstoy page in the lower right corner.