A product story 2.0 is a below-the-fold content page with a custom layout of multimedia and messaging assets that give the best product experience to an online shopper. In addition, Product Story 2.0 enables the seamless insert of a full version of the story and the seamless insert of individual content blocks without using frames or iframes like in Product Story 1.0. In other words, you can embed the code (HTML/CSS/JS) on your page with your own fonts and styles, switching off some of the blocks if you don’t want them. Hence customization becomes possible.
For Product Stories, a 2.0 unique lightweight pet framework has been created, including all the necessary plugins. The init script has a size of 5.4kb (gzip). It analyzes blocks used for a particular story page and pulls only the necessary .CSS and JS, which eventually reduces the overall size of the story. Again it’s a significant advantage for SEO. Additionally, the product story 2.0 code will not crash the customer’s site since now we use our own CSS and JS scripts instead of commonly used ones.
Explore some of the benefits of the Icecat Product Story 2.0 solution:
You can integrate Product Story as one of the Icecat Live containers using the Icecat Live Granular Call method. This method delivers content to your web page in real-time. Furthermore, it will only require a couple of lines of Javascript code in your HTML template.
You can request Product Story 2.0 using three types of product identifiers:
See examples of all three Product Story request codes below:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { Brand: 'LG', PartCode: 'GBB92MCBAP', UserName: 'openicecat-live' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { GTIN: '8806091079190', UserName: 'openicecat-live' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { IcecatProductId: '87053244', UserName: 'openicecat-live' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
To apply custom style guides, simply add respective settings:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <style> body { --pet-font-family: 'Roboto', Arial, Helvetica, sans-serif; --pet-font-size: 13px; --pet-font-weight: 500; --pet-color: #000000; --pet-theme-color: #475be9; --pet-headding-font-family: 'Georgia', serif; --pet-h1-font-family: 'Georgia', serif; --pet-h2-font-family: 'Trebuchet MS', sans-serif; --pet-h3-font-family: 'Arial Black', Gadget, sans-serif; --pet-h4-font-family: 'Tahoma', Geneva, sans-serif; --pet-h5-font-family: 'Verdana', Geneva, sans-serif; --pet-h6-font-family: 'Courier New', Courier, monospace; } </style> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { Brand: 'LG', PartCode: 'GBB92MCBAP', UserName: 'openicecat-live' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
h1
h6
--pet-h1-font-family
<h1>
<h6>
There is a possibility to switch on/off additional modules in product stories (if they are available). By default, they are switched on. To activate them, change respective settings with “true” values.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <script> window.petOptions = { modules: { ugc: true, reviews: true } } </script> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { Brand: 'LG', PartCode: 'GBB92MCBAP', UserName: 'openicecat-live' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
Product story version 2.0 will have priority over version 1.0. The backup logic while doing granular calls is the following:
Firstly, by default, the system will send product story version 2.0. If it’s not available, product story version 1.0 will be used instead.
Secondly, by specifying the product story version keys (v1 or v2), a partner can use a particular story version:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Product story example</title> </head> <body> <div id="container1"></div> <script> window.addEventListener('liveload', function () { IcecatLive.getDatasheet({ productstory: '#container1' }, { Brand: 'LG', PartCode: 'GBB92MCBAP', UserName: 'openicecat-live', productStoryVersion: 'v1' }, 'en') }) </script> <script src="https://live.icecat.biz/js/live-current-2.js"></script> </body> </html>
XML/JSON: we publish .txt files with HTML product story 2.0 code:
Please, contact us in case of questions or comments via your Icecat account manager or contact us via the website.
Read further: Icecat, Manuals, html5, product story, Product Story 2.0, seo
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Δ
