Layouts control the layout of each product in your catalog. Use the layouts to customize the HTML code that surrounds your products. Note: If you adjust the HTML in the layouts, you may also need to add customized CSS to your site templates.
Single Product Layout
- Single Column The Single Product Layout displays one product per row with all product details, including descriptions, options and order buttons. Customers can order directly from the product in this layout.
- Single Image Choose the style of image that you wish to display in the layout. This style of image will appear in all products using the Single Product Layout.
Double Product Layout
- Double Column The Double Product Layout displays two products per row with all product details, including descriptions, options and order buttons. Customers can order directly from the product in this layout.
- Double Image Choose the style of image that you wish to display in the layout. This style of image will appear in all products using the Double Product Layout.
Triple Product Layout
- Triple Column The Triple Product Layout displays three productsper row with all product details, including descriptions, options and order buttons. Customers can order directly from the product in this layout.
- Triple Image Choose the style of image that you wish to display in the layout. This style of image will appear in all products using the Triple Product Layout.
Multi Product Layout
- Multi Column The Multi Product Layout displays multiple products per row with just core details - item name, price and image. Customers cannot order from this layout; instead, they will click a link to view a detail item view to order. Columns are determined by the image and column sizing.
- Multi Image Choose the style of image that you wish to display in the layout. This style of image will appear in all products using the Multi Product Layout.
Detail Product Layout
- Detail Column The Detail Product Layout is the main item page, which displays only one product. Customers can order directly from the product in this layout.
- Detail Image Choose the style of image that you wish to display in the layout. This style of image will appear in all products using the Detail Product Layout.
Image Types
Important notes: A mouseover zoom is replaced with a regular pinch zoom in iOS devices. Zoom and Lightbox options are only available with plugins. Using slideshow, gallery, lightbox or zoom options add some load time to the site, especially if they are utilized on a single, double, triple or multi layout; use in detail product layout only is recommended.
- Default General product image, default for that layout. Detail item layout displays all large images, multi item layout displays first small image that links to the detail item layout, and others display all small images which pop up to a larger image.
- First Image Detail item layout displays first large image, and others display first small image which pops up to a larger image.
- All Images Detail item layout displays all large images, and others display all thumbnail images which each pop up to a larger image.
- Gallery Detail item layout displays first large image, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click.
- Slidedisplay Detail item layout displays first large image, and others display first small image. A left and right arrow scrolls to the next image.
- Slidedisplay Gallery Detail item layout displays first large image, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click. Initial image includes a left and right arrow that scrolls to the next image.
- Zoom Detail item layout displays all large images, multi item layout displays all small images which link to the detail item layout, and others display all small images. All images contain an inner zoom on mouseover (replaced with a pinch zoom in iOS). Requires Elevate Image Zoom plugin.
- Zoom First Detail item layout displays first large image, multi item layout displays first small image which links to the detail item layout, and others display first small image. Image contains an inner zoom on mouseover (replaced with a pinch zoom in iOS). Requires Elevate Image Zoom plugin.
- Zoom Gallery Detail item layout displays first large image, multi item layout displays first small image which links to the detail item layout, and others display first small image. Smaller thumbnails for all images show underneath, creating a gallery. Main image contains an inner zoom on mouseover (replaced with a pinch zoom in iOS). Requires Elevate Image Zoom plugin.
- Lightbox Detail item layout displays first large image, and all others display first small image. When clicked, a pop up displays a slideshow. Requires Lightbox 2.
- Lightbox Gallery Detail item layout displays first large image, and all others display first small image. When clicked, a pop up displays a slideshow. Smaller thumbnails for all images show underneath, creating a gallery that changes the main image on click. Requires Lightbox 2.
Layout Includes
The layout includes will only work if you have HTML code in a layout box, and your cursor is inside the box. Select an include from the drop down box and click 'Insert' to add that layout to your HTML code. Click the Layouts link to view all layout codes and a short description.
