How to set up and use automation for photo slideshow

Learn how to automate the photo slideshow process by connecting your data to Flipsnack.

Table of contents:

     How to create the CSV for your photo slideshow

     How to import your Photo slideshow CSV file

     FAQ section

Automation allows you to easily add multiple photo slideshows if you need them in your publication, and if you already have a data spreadsheet  of images with organized links, you can easily automate the creation of photo slideshows in your publication with just a few simple steps, eliminating the need to upload photos to Flipsnack.

Note: The photo slideshow automation feature is available with the Enterprise subscription only. If you want an update, check more of the benefits here.

In the catalog below, you can see an example of photo slideshow, the last product on the second page:

How to create the CSV for your photo slideshow

Creating your photo slideshow will get easier! By setting up a simple CSV file in a Google Spreadsheet, Microsoft Excel, Pages or in a similar program you can automate the entire process in just a few steps. 

We recommend to create or import the data sheet for the image slideshow, directly in Google Spreadsheet, because it will be easier to update.

Now you can look in the image below, and see that the only column headers you should include are the product name, the SKU(which serves as a unique identifier for the data sync feature), and image URLs, since they’re the only information you can include in a photo slideshow interaction.

photo-slideshow-data-sheet-for-automation-feature

Make sure to add each image in a different column. Your file can have up to 10 images / slideshow. 

Important: To include images in your content, you can first upload the image files to a web server, FTP, or hosting service that allows you to store and retrieve images. Then, you can copy the image's direct URL and paste it into the designated image column.

We're also working on a solution that will allow you to host images directly on Flipsnack, making the process even easier.

How to import your Photo slideshow CSV file

1. On the main dashboard, go to Automation, located on the left side panel. Click on Import, and then on Import basic data set

automation-feed-page-with-import-basic-data-set-highlighted

Now you can either click on Upload file to import your CSV file or on Sync Google Sheets to connect a Google spreadsheet.

import-data-set-modal-with-upload-file-and-sync-google-sheets-buttons-highlighted

Note: As we mentioned before, if your use case requires frequent updates, especially regarding pictures, we recommend using Google Sheets for the sync feature. For example, if you manage an inventory of seasonal items where the pictures need to change regularly, using Google Sheets simplifies the update process.

2. After you import your data spreadsheet, you can click the Mapping button to identify four types of information from the spreadsheet. Once done, click on Save changes

mapping-the-photo-slideshow-data-for-automation-feature-in-flipsnack-1

This step lets you see a preview in the Automation list, that you will find in Design Studio on the left panel, when designing your publication. Make sure that each product is titled appropriately, similar to the provided example from above. 

3. After that, go to Design Studio, click on Interact tab on the left aside panel, and drag and drop  Slideshow element or a Pop-up slideshow in your flipbook, depending on your needs.

steps-to-create-a-slideshow-element-or-a-pop-up-slideshow-area-in-design-studio-1

4. Select the Slideshow element and then click on the Connect with feed button, located on the top right corner. Here, you can link the selected element(slideshow in our case) with the information from the CSV file or Google Sheets(image URLs).

connect-with-feed-option-for-slideshow-element-in-design-studio

Warning: The option for the second image will be available only after you select the first picture.

slideshow-images-mapping-in-design-studio

5. Drag and drop the related element from the Automation section over the slideshow. The order of the images will coincide with how you mapped them in the previous step.

Once you have updated the information on the page, you can modify the order of the images in the slideshow from the left side panel (the slideshow edit panel).

Click on the Preview button in the upper right corner, to see if it worked properly:

drag-and-drop-element-from-the-automation-tab-in-the-flipbook-page

Important: To streamline the process, you can map only one slideshow element, and duplicate it (Ctrl+D on Windows or Cmd+D on Mac). Alternatively, from the Layers tab on the bottom right side, you can select the photo slideshow and click on the duplicate icon, and then drag and drop the related element from the automation tab over each photo slideshow on the canvas.

FAQ

  1. Why some images does not appear in the catalog? Check spreadsheet to see image format, it need to end with a png or jpg.
  2. What types of data sources can I connect to Flipsnack for automation purposes? You can connect CSV files, Google Sheets, and image URLs to Flipsnack for automation purposes. CSV files, created in programs like Excel or Google Sheets, allow you to automate tasks by importing data with properly formatted headers. Google Sheets can be synced directly to import dynamic, frequently updated data. For image, you can use direct URLs from images hosted online within your CSV or Google Sheets. 
  3. I added an extra column and it doesn’t sync, what do I do? You can add new columns to your spreadsheet, but make sure to do the mapping again for the added column, and then you can simply drag and drop it on the catalog pages.

Please contact us via live chat if you have any other questions or suggestions.