price-banner.png
Price Free Ebook
Have a Question
Five Minute Tour

CUSTOM LAYOUTS FAQ

What are custom layouts? Why would I need them?

Custom layouts are a unique arrangement of page elements, such as titles, images, descriptions, attributes, prices, logos, icons, lines, shading, and static text. Sometimes businesses require custom layouts in order to handle the particular characteristics of their product data. Many businesses have strict layout requirements in order to maintain a branded look for all product presentations. See below for examples of custom layouts.

Is it possible to customize just one part of a standard layout?

Yes, there are many cases where one of the standard Catalog-on-Demand layouts is mostly fine, but an adjustment is required to accommodate one or two special requirements. Examples:

  • The description needs to appear in multiple columns
  • Selected attributes require special formatting
  • Prices need to be colored
  • Text needs to be cleaned up or replaced

How are custom layouts implemented?

Almost all custom layouts are implemented via Catalog-on-Demand Plug-Ins. These Plug-Ins use a combination of JavaScript and HTMLfp (HTML-for-print, our own dialect of HTML). This is a rich design foundation that can be used to express just about any arrangement and/or transformation of content and elements that you can imagine. We are constantly enhancing the architecture to accommodate new requirements.

How can I have a custom layout implemented for our business?

A picture is always worth a thousand words. Please open a support ticket, then reply to the automatic response with a mockup of your custom layout requirements. We also encourage you to start the free trial so that we can get a good look at your product data.

Once we have the mockup and your data we will get back to you with questions and comments. After two or three rounds of this, we are usually able to quote you a one-time development fee.

What about changes to custom layouts? Can we maintain the layouts without going through Catalog-on-Demand?

Yes, you are welcome to maintain the custom layouts yourselves. Any programmer experienced in advanced JavaScript and HTML will be able to see how the layouts are assembled. However, Catalog-on-Demand cannot support custom layouts that have been modified by people other than our own staff, except on a special charge basis.

Do you have examples of custom layouts?

Yes, see below.


Examples of Custom Layouts
Automated With Catalog-on-Demand

Custom layout showing attribute cleanupCookware flyer  

Note #1 — Selected attributes appear in the product description 

To improve readability, the customer wanted two of the product attributes (Use Care and Additional Information) to be moved into the description. Each was given its own subheading.

Note #2 — Icon used to highlight warranty

In this content, any of the attributes might contain warranty text. The code searches all attributes for the appropriate text, and if found, creates an attribute on-the-fly with the icon image as its value.


digr1Heavy equipment flyer

Note #1 — Positioning of the product name and attributes 

The customer specified that the product name appear at the top of the content space, and that the attributes appear to the right of the primary image. Text formatting is customized.

Note #2 — Price enhancements

The GST reference is appended to the price at a smaller font size.  

Note #3 — Image sizing

The customer wanted the primary image to standout, and the secondary images to be smaller and left-aligned under the primary image.  

Note #4 — Product description positioning

The description is vertically centered, and left aligned next to the small images.  


evr1Home & Kitchen brochure

This is a grid-based layout with three products per page. 

Note #1 — Logo and product images are top-aligned

The images are constrained to fit in the available space.

Note #2 — Product name and description are top-aligned.

The description is truncated at a word break and followed by an ellipsis (…) if it exceeds the maximum height.

 


Custom layout showing multiple columns for numerous optionseVapor Catalog  

Note #1 — Large number of options divided into columns

The available space for the columns is determined by the width of the product image.


Custom layout showing trade show couponsCoupon book for tradeshow  

Note #1 — Background image contains static elements

The left-hand image, border, and show stopper text are the same for all coupons, and are therefore part of the background image.

Note #2 — Custom position and formatting for all attributes

Each attribute value is colored, sized, positioned, and concatenated with appropriate text per customer specifications.

Note #3 — Product image positioning

The product image is given a maximum width with a proportional height.


Price book for food ingredientsPricebook for Food Ingredients  

Note #1 — Grouping by category

Some product categories take up only a partial page; other categories run for multiple pages.

Note #2 — One row per product

Products are identified only by their name,  but the name is linked back to the website.

Note #3 — Size, packaging & price in a compact presentation

Up to 5 prices are shown per product, which also includes information about the packaging and size of that SKU.


Food products catalog to drive web trafficFood Products Brochure  

This print brochure is used to drive mobile users to their food products site.

Note #1 —Linked product name and image

For customers who are viewing the PDF from their computer or mobile device, the product name is  linked to the e-commerce site.

Note #2 — Truncated product description

If a product description exceeds a maximum height, it is truncated at a word break and followed by an ellipsis (…) to show that more information is available online.

Note #3 — QR code direct to e-commerce page

The large QR code is required because the link is directly to the customer's web page. If a link shortener is used, the QR code can be much smaller.


Custom layout for bathware and kitchen cabinetryBathware and Kitchen Cabinetry Flyer  

Note #1 —Fixed height for page title

The amount of space allocated to the page title is the same regardless of whether the title wraps to one or two lines. The title is extracted from a specified field if that field has a value, otherwise it is taken from a different field.

Note #2 — Maximum height and width for product image

The image is proportionally resized to fit the amount of available space.

Note #3 — Optional schematic image

The second image may or may not exist. If it does not exist, a placeholder image is used instead.

Note #4 — Product name, SKU & description

The description may contain bullets or other formatting. It is auto-truncated if it runs more than the maximum height. The text is also automatically cleaned up to remove content not required for print.

Note #5 — Attribute grouping, transformation & formatting

  • Attribute group headings appear if at least one attribute in that group has a value that is not null or a specified string.
  • Attributes must appear in a particular sequence within their group
  • Certain attributes require custom formatting

Note #6 — Background elements

The logo and vertical lines are handled with a background image.


Tier prices shown in horizontal layoutTwo Treatments of Tier Prices

Here are two versions of a layout to show tier prices.

Note #1 —Linked product image

For customers who are viewing the PDF from their computer or mobile device, the product image is  linked to the e-commerce site.

Tier prices shown in horizontal layoutNote #2 — Product name gets fixed height

The product name is allowed to wrap and given a fixed height to maintain vertical alignment across the page.

Note #3 — Tier prices shown in horizontal arrangement

The tier prices are shown side-by-side.

Note #4 — Tier prices shown in vertical arrangement

In this alternate layout, the tier prices are shown stacked on one another, separated by a thin line.