541 201 9965 Email Website
Contents
:
IndexPrintBookmark 
Search:  
Home > Getting Started > Choose a Skin > Dean - Skin 1 > Dean - Product Layouts

Dean - Product Layouts

One of the great strengths of AspDotNetStorefront is its flexibility. You might have set up your products very simply, or with a complex structure of multiple variants with differing attributes.

The Push Button Upgrade (PBU) is going to assign a single page layout to all of your products, so it is a good idea to choose a layout that will work for the majority of your products.

We suggest that you begin with the 'Responsive Variants in Dropdown' (top of the list below). The variant dropdown will be hidden for simple products, but will show up otherwise. Later, of course, you will be able to change the assigned page layout on a product by product basis.

If you do use multiple variants and prefer to have their details showing up on the page (instead of being hidden by the dropdown) then a good choice is 'Variants in A Right Table'.

Responsive Variants In A Dropdown

product.tabbed-responsive.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • Supports tabbed product information display near the bottom of the page.
  • The image is to the left, with product name directly above.
  • The variants are represented by a dropdown box. When the variant is selected, the price will change.
  • The description that is shown will be the PRODUCT description, not the variant description.
  • The 'in-stock/out-of-stock' message will be for the default variant.
  • The 'Advanced Product Image Display' (optional add-on) will switch images to match the variant that is chosen.
  • The price and the 'add to cart' button are dominant and positioned high up on the page.
  • The optional details (SKU and product weight) are not displayed.
  • Related products are positioned at the bottom of the page.
  • Note: The pages layouts that are designed for multiple variants also work very well for products with just a single variant. Most store-owners choose a multi-variant page layout as their default.

Variants In Dropdown

product.variantsindropdown.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product name directly above.
  • The variants are represented by a dropdown box. When the variant is selected, the price will change.
  • The description that is shown will be the PRODUCT description, not the variant description.
  • The 'in-stock/out-of-stock' message will be for the default variant.
  • The 'Advanced Product Image Display' (optional add-on) will switch images to match the variant that is chosen.
  • The price and the 'add to cart' button are dominant and positioned high up on the page.
  • The optional details (SKU and product weight) are not displayed.
  • Related products are positioned at the bottom of the page.
  • Note: The pages layouts that are designed for multiple variants also work very well for products with just a single variant. Most store-owners choose a multi-variant page layout as their default.

Simple Product

product.simpleproduct.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product details to the right.
  • The price and the 'add to cart' button are dominant and positioned above the description.
  • Weight is not displayed.
  • SKU display can be toggled on/off in Settings.
  • Related products show up at the bottom of the page.

Simple Product With A Large Image

product.SimpleProductLargeImage.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product name directly above.
  • The price and the 'add to cart' button are dominant and positioned high up on the page.
  • The description is beneath the image.
  • Weight is not displayed.
  • SKU display can be toggled on/off in Settings.
  • Related products do not show up.

Variants In A Grid

product.VariantsInGrid.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product name and product description to the right.
  • Each variant is represented individually on the page, complete with image.
  • Each variant displays its own description.
  • The 'in-stock/out-of-stock' message will be accurate for each variant.
  • The price and the 'add to cart' button are present once for each variant.
  • The optional details (SKU and product weight) are displayed.
  • Related products show up at the bottom of the page.
  • Note: The pages layouts that are designed for multiple variants also work very well for products with just a single variant. Most store-owners choose a multi-variant page layout as their default.

Variants In A Right Column

product.VariantsInRightBar.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product name and product description to the right.
  • Each variant is represented individually on the page, but the only image is of the main product.
  • Each variant displays its own description.
  • The 'in-stock/out-of-stock' message will be accurate for each variant.
  • The price and the 'add to cart' button are present once for each variant.
  • The optional details (SKU and product weight) are displayed.
  • Related products show up at the bottom of the page.
  • Note: The pages layouts that are designed for multiple variants also work very well for products with just a single variant. Most store-owners choose a multi-variant page layout as their default.

Responsive Variants in a List

product.variants-in-list.xml.config

View Full Size

Key Features

  • The page has breadcrumbs.
  • The image is to the left, with product details to the right.
  • The price and the 'add to cart' button are dominant and positioned alongside each variant row.
  • Variant Description displays in each variant row.
  • Weight is displayed.
  • SKU display can be toggled on/off in Settings.
  • Related products show up at the bottom of the page.
  • Does not support 'wishlist' buttons.


Was this information helpful?YesNo