Uploading Your Catalog
Basic Lightbox Settings
Simplified Product Linking
Creating a Lightbox Link
Creating Custom Lightbox Content
Frequently Asked Questions
Analytics
Lightbox functionality enables you to create a seamless shopping experience for the reader in a Zmags catalog without requiring a complex implementation. You can use existing product pages or create custom HTML pages that are specifically built to be viewed in a lightbox.
Uploading Your Catalog
Creating a new publication in the Zmags Publicator is easy, and requires just a couple of clicks!
1) First, you will need an appropriate PDF. Be sure to follow our Best Practices Guide when creating the document, and use our Zmags InDesign Presets when exporting from InDesign to minimize technical difficulties later on.
2) Log into the Zmags Publicator and click "All Publications" on the left side.
3) Click the green "Create Publication" button near the top. Optionally, you may wish to customize the upload settings before continuing.
4) Click the green "Browse" button and select your PDF from step 1. Click "Next" to begin uploading. (Alternately, you may wish to grab the PDF from your website, convert PDF files on your website, or upload via FTP.)
5) The green task list in the bottom-right will track upload and conversion process. You may click to expand it for a more detailed view.
6) Once the conversion has finished, you can begin adding lightbox links to your publication.
Basic Lightbox Settings
Shown above is what a light box looks like by default. It is possible to change the popup dimensions, border thickness, and corner style (round or square):
1) Log into the Zmags Publicator and click "All Publications" on the left side.
2a) If you have not done so already, create a new viewer by clicking "Create Viewer" at the top. You'll need to choose an existing viewer to start from, click "Next" at the bottom, and choose a new name for it.
2b) If you have a new viewer selected on your publication already, simply click on its name (off to the right of your publication's name in the list) to access the Viewer settings.
3) If using a Verge viewer, the light box settings can be found at the bottom of the page; otherwise, select the 'Lightbox' tab at the top.
4) Change any settings as desired. (More advanced customizations may be made via the optional CSS functionality. See Lightboxes and CSS and Lightbox Style Examples for more information.)
5) Click "Save and Exit".
Simplified Product Linking
Our built-in lightbox solution allows you to create links which pop up any external HTML content you would like to display. Zmags Product Widgets make it quicker and easier to launch products into a lightbox.
Subscribers using our Commerce or CommercePro package may enable the "Open products in Lightbox" option in their Verge viewer settings, which allows you to set a "base URL" on the light boxes. These are combined with the product IDs entered in Zmags Enriched to point to a corresponding page on your own site:
This setting may be accessed by editing your existing custom viewer, or creating a new one, as detailed in this tutorial here:
Zmags Verge Viewer
The base URL should be the part of their address all of your product windows have in common, with {productID} swapped in for the part which will change. If for example, you will be linking to "http://www.mywebsite.com/product/358.html", "http://www.mywebsite.com/product/413.html", and "http://www.mywebsite.com/product/614.html", you will want to use "http://www.mywebsite.com/product/{productID}.html" as your base URL. Once the base URL has been set, links to your dynamic product windows may be created in the following fashion:
1) Log into the Zmags Publicator and click on "All Publications" at left.
2) Find your publication in the list, and click the icon off to the right of its name in the 'Enriched' column.
3a) Using the link icon on the left side, create a product link. (For more information, see the full product links article.)
4a) In the link properties that pop up, click "Manual".
3b) Alternately, using the cog icon on the left side, create a product widget. (For more information, see the full product widgets article.)
4b) In the widget properties that pop up, click "External".
5) Enter your product ID. (Going by the example links above, this would be 358, 413, 614, etc.)
6) When finished with your link(s) and widget(s), click File > Save All.
Creating a Lightbox Link
If you are not using the Simplified Product Linking option, your lightbox links have to be created using the following method:
1) From "All Publications", open Zmags Enriched by clicking on the 
icon off to the right of your publication in the list.
2) Once Zmags Enriched opens, click on the Link icon in the toolbar (Fig 1.0) on the left hand side of the interface and choose External Link. After this, mark an area on the page on which you want to place the link. (Fig 1.1)
Fig 1.0
Fig 1.1
3) This will open the external link dialog box, which has the following properties:
Fig 1.2
URL - The URL of the content to be loaded into the light box. Be sure to include http:// at the beginning, as this is required for proper functionality.
Creating Custom Lightbox Content
If you don’t have existing product pages you can use in your lightboxes, here is how custom content can be created. The solution described below uses an example consisting of mock-up screen shots, and is intended to illustrate the reader experience when adding an item to cart.
1) First, create an HTML page to launch in a lightbox that contains your add-to-cart call. This page should have its own unique URL so that it can be linked to a specific lightbox link created in the Zmags Publicator.
For this application, it could look something like this:
2) Next, create the complete add-to-cart experience. One important thing to consider is what happens after a reader clicks “add to cart”. Good practice is to have a confirmation page show after the add-to-cart has been completed. On the confirmation page the reader should be presented with the two options, "continue browsing" or "go to checkout" in a confirmation page:
3) When clicking “continue browsing”, a call to com.zmags.api.Lightbox.close() should be made (see code example below) to close the lightbox so the reader can continue browsing the magazine.
When clicking “go to checkout”, same call should be made and the specific URL for where the client-specific checkout page is located should be loaded in a new window.
Code example to close a lightbox from within the lightbox:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lightbox API Test</title>
<script src="http://api.viewer.zmags.com/lightbox/lightbox.js" type="text/javascript"></script>
</head>
<body>
<button type="button" onClick="com.zmags.api.Lightbox.close();">Close</button>
</body>
</html>
Frequently Asked Questions
What about content that does not fit into the lightbox?
- For best possible viewing experience, all content should be created to fit within the lightbox.
- The lightbox can provide scroll bars to accommodate larger content, but ideally you want to avoid this.
Can I change the size of the lightbox?
- The size of the lightbox can be configured via the viewer settings in Publicator.
- For most use cases, 800 by 600 pixels is recommended for both desktop and tablet.
Can I have a login screen as a part of the experience?
- This is certainly possible, but if a login screen is desired, it is recommended that it show up only the first time a user add something to the cart.
- Browser cookies may then be used to remember the login information for the remainder of the session.
Can the lightbox have different sizes within the same catalog?
- A different size may be defined for each individual lightbox link when creating them in Zmags Enriched.
- In the HTML5 viewers, these link-level settings are overridden by default. It will be necessary to create a custom viewer and clear out the lightbox CSS found in the default viewer settings.
Can the lightbox have different styles within the same catalog?
- It is not currently possible to do this in a built-in fashion, but with some extra effort it can be done via an API workaround: http://community.zmags.com/articles/API/Multiple-Lightbox-Styles-in-Publication
How should I format the base URL in the viewer settings?
- The recommended format is something like this: https://www.customerdomain.com/LightboxView/{productID}
- You can then auto-link just the product ID, if it is present in the uploaded PDF.
What is the recommended approach for tablet and phones?
- Tablets usually work out-of-the-box for any desktop-optimized setup, but for phone the content should be able to scale into a smaller lightbox, defined to show only on phone.
Analytics
You will be able to track the performance of your catalog within Zmags, with the exception of reader activity taking place within in lightbox itself (adding products to cart and so on). Because that content will be hosted on your own website, it will be necessary to use your own tracking on that end.
For more information on the Publicator’s built-in analytics suite, please see the following guide. Information specific to lightbox links may be found on page 21:
http://community.zmags.com/AnalyticsGuide
