Image (Above): A customised product rollover showing the product code, product name, stock level and additional information
Product Rollovers are an extension of the YUDU SmartCat system. They grant you the opportunity to add additional product information - such as an extended product description, alternate product image, prices and even stock levels - within a pop-up that appears when you rollover (or click/tap) the product code/SKU number.
Step 1: Before you begin...
Ensure that a price list csv is already uploaded containing the product information - see Preparing & Upload Your CSV on how to do this.
With YUDU's SmartCat system, a product code/SKU within your digital catalogue can be linked directly to the product on your website or the product can be added to an interactive shopping basket (or the shopping basket on your website). This is achieved by uploading a price list csv file that contains your catalogue's product codes/SKUs and their accompanying URLs (or pricing information, etc., for the shopping basket feature). The CSV file is processed by YUDU Publisher and the product codes within the catalogue are linked automatically.
The rollovers extension requires a second CSV to be uploaded in addition to the first that contains the supplementary information alongside the product codes from the original price list upload. An example of the information is shown in the image at the top of this page, and can include the product code, product title, price (not shown), description (not shown), stock levels and a secondary image. As you can see, some of these fields can be hidden, as desired.
There are two parts to this effect - data and design. The data comes directly from the CSV that you upload. Please note: secondary images need to be in the form of a URL. That data will automatically be injected into the design file for your rollovers, which are customisable.
Step 2: Design
The design of your rollovers can be customised. You can change the colours, fonts, spacing, layout, size of the images, and what information is visible or hidden. For instance, you could restrict the rollover to show only a secondary description and nothing else.
The design of the rollover is handled for each platform as follows:
For Web and Android, there is a HTML template that can be modified. This is part of the HTML Branding Pack that can be uploaded to the Files section on YUDU Publisher and selected under your Branding Settings. You can download the HTML Branding Pack for Web and Android below. Please contact YUDU Support for more information and assistance:
The relevant folder within the HTML Branding Pack that you need is called the "rollovers" folder and the relevant html file with the styling that can be modified is called the productDetailsTemplate.html file.
Once you have modified this file, you must zip up the rollovers folder and upload it to Publisher in the Files section with the special usage "HTML Reader Branding Pack".
You could upload at the level of your digital publication or at the publication group level; do the latter if you wish to select the same branding pack for multiple catalogues.
Once uploaded, navigate to Settings > Branding and scroll down to the "HTML Reader" subsection in order to select the customised branding pack that you have just uploaded.
Please Note: You do not need to upload the entire Branding Pack; only the folder containing the file(s) you have modified.
For iOS, the rollover template is packaged in the app build, so please discuss modifying it with your designated app technician.
Step 3: Create and upload your Rollovers CSV File
Creating the CSV for your Product Rollovers is very much like the guide on preparing & uploading your CSV for Smartcat, but with different column names in the original file.
Enter the data underneath each field, ensuring the headings are EXACTLY the same as above and the data is correct (ie the URL is valid, the price is numerical, etc).
Once the spreadsheet has been completed with all entries required, click File -> Save as... and ensure that Windows Comma Separated CSV is selected:
The file is now prepared and ready for upload to YUDU Publishers eCommerce section.
Uploading to YUDU Publisher
Now that the file is in the correct format we can upload it to YUDU Publisher.
Navigate to your digital catalogue in the system, click Settings and then select eCommerce:
Navigate to the Smart Catalog section and ensure Enable smart catalog is ticked. Next, click Upload a rollover list file:
Choose your CSV file by clicking Select File and then click Upload File.
Once complete, the data will automatically associate with the CSV price list that your originally uploaded and your rollovers are automatically applied.
|
|
|
