slscart logo

Product Layouts

In slscart you can edit the product layouts, changing the HTML surrounding the product name, price, description, options, order button, etc. This allows web designers the ability to greatly customize the look of the product layouts. Changing layouts requires knowledge of HTML and CSS.

  1. Select Layouts from the Web Site tab.
  2. Select the layout you wish to change:
    • Single Column This layout displays all products in a particular category, displayed one product per row. All item details, including product description, options and discounts are included, and the customer can order from this screen.
    • Double Column This layout is the same as the Single Column layout, except there are two products diplayed per row. The product image is shown above the item details, not next to it as in the Single Column layout.
    • Triple Column This layout is the same as the Single Column layout, except there are three products diplayed per row. The product image is shown above the item details, not next to it as in the Single Column layout.
    • Multi Column This layout displays all products in a particular category, showing only the product name, price, and main thumbnail image. The item cannot be ordered from this screen. When the item name is clicked, the site visitor is taken to the detail product layout, which shows all item information. (See below.)
    • Detail Product This layout displays only one single item, with all descriptions, options and discounts, and the customer can order from this screen.
  3. Change the HTML surrounding any layout components. Please note: you may need to add your own custom CSS code as needed, to style the layouts.
  4. If the code does not exist in the text box, click show default code under the layout box to add the default system code. You can also do this to wipe out changes and revert back to the default setup.
  5. To insert include codes, click in the code, wherever you want to add an include, then select the include from the Layouts drop down box and click Insert.
  6. After making changes, click Update Layouts to save your layout changes.

Available Includes

***