While we all love and respect the regular embedded Tolstoys - we are all for adding a bit of ✨spice✨ to our embedded Tolstoys. After you have experimented with our feed, you can now add them to your site as a rotating, scrollable carousel (gallery, if you will).
Want to learn how to set this up? Keep reading!
Adding the Carousel to a Native Site
Create your feed. Choose Carousel.
Click on Launch to Site in the upper right corner.
Copy the code and paste it into your site's head if you haven’t done this already.
Example of code:
<script>tolstoyAppKey="1d69cc24-24f2-4c4b-8134-6fb39aab24f2"</script> <script src="https://widget.gotolstoy.com/widget/widget.js" defer></script>
You can choose to publish your carousel on the Product page or Other page.
Product page
Copy the code and paste it on your product page template. Then, select product pages to publish on.
Example of code:<div data-publish-id='3t8eufpbft45j' class='tolstoy-carousel'></div>
Other page
Copy the code and paste it on your template.
Example of code:
<div data-publish-id='3t8eufpbft45j' class='tolstoy-carousel'></div>
Adding the Carousel to a Shopify Store
In the Shopify Admin mode, click on Customize.
For Shopify v.2 - Under the blocks on the left menu, click on Add section. Scroll down, and under Apps, click on Tolstoy Carousel.
You will be asked to insert your publish ID.
To access it, go back to the Tolstoy app, click on Settings and copy the Feed ID. Paste in it Shopify.
Click on Save.
For Shopify v.1 - Copy the code and go to add section, then choose or click custom HTML and paste the code.
Carousel's Title Font
This is how to make the title go with the site's font.
Add this code to the carousel's code in the custom liquid. Change the <your own font> to the font's code.
.tolstoy-carousel-title
{
font-family:<your own font> !important;
}
And you are done! You are welcome to see my carousel in action here.
If you have any questions about embedding the feed into your site, don't hesitate to reach out at support@gotolstoy.com.