Preparing your website to allow your clients to buy straight from the content with no need to leave the experience
- Making your website ready to sell straight from content (shoppable)
- Making articles and images sell your products (shoppable)
- Choosing where to include the Source Code Widget
- Editing your webpage source code
NOTE: If you would like to know how to make your Youtube or Vimeo videos earn money check out this article.
Stream Sage Helper - a piece of code that enables your customers to buy your products straight from the article or photos with no need to leave the current activity. On top of that, it allows you to transform videos already embedded on your website into shoppable videos by using the Stream Sage platform.
-
Make your website ready to sell straight from the content
- Enter the platform and choose the Websites tab from the left side menu.
- You can click one of the blocks in the top section to find out more about How to make your links and images shoppable or Learn how to make your videos shoppable.
- Before you apply instructions for shoppable text and images, you have to prepare your website to be able to do this by injecting a Source Code Widget.
NOTE: Making your videos shoppable doesn’t require this step, learn more here. - You can modify the look of the Source Code Widget by choosing a certain look from the options below:
- Shoppable Links - mark if you want to Show the cart icon next to the shoppable links
- Shoppable Images - mark if you want to Show the cart icon next to the shoppable images
- Tooltip Layout - choose a Vertical or a Horizontal
- Enter the platform and choose the Websites tab from the left side menu.
-
Making articles and images sell your products (shoppable)
- To allow clients to buy from your content you should prepare it so the Stream Sage Helper can activate their shoppability.
- To do this visit your CMS and edit pieces of content by adding links to products:
- If there is an article about your products make sure that all products listed in the article have products linked behind their names or phrases (for example if you’re writing about best knives, link names of top knives to products from your store),
- If there are images of products in the article, link the image to certain products from your shop.
- When content is already prepared follow the below instructions for code snippet injection to activate Stream Sage Helper on your content.
-
Choose where to include the Source Code Widget
- If you want to use Stream Sage helper across the whole webpage – the decision on choosing the place to include the code is simple – put the code in your main index.html or global template for your application.
- You can also select particular pages or types of pages to use Stream Sage helper only on them. To do so – put the code into selected source code files or specific templates for your application.
-
Edit your page source code
- The code snipped you just copied needs to be pasted right before the closing tag for </head> HTML element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world!</title>
<!-- Paste the copied code in this place -->
</head>
<body>
<h1>Hello, world!</h1>
NOTE: Besides options that you can select in “Websites” section of the Dashboard, we also provide Advanced configuration reference if you need to fine-tune how helper is working for your webpage.