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.
- Select Layouts from the Web Site tab.
- 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.
- 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.
- 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.
- 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.
- After making changes, click Update Layouts to save your layout changes.
- [%%BLOCKS%%] Shows pop up pages
- [%%BRAND%%] Shows item brand
- [%%CATALOGNUM%%] Shows catalog number
- [%%DESCRIPTION%%] Item description
- [%%DISCMSG%%] Wholesale or coupon message
- [%%DISCOUNTS%%] Displays discount percent
- [%%EMAILFRIEND%%] Displays email a friend link
- [%%FORMEND%%] Ends the product form
- [%%FORMSTART%%] Starts the product form
- [%%GTIN%%] Shows the ISBN or UPC
- [%%IMAGE%%] Item images (default to layout)
- [%%IMGLABEL%%] Click for detail message under an image
- [%%ITEM%%] Displays the item name (if used in detail layout, site page title will not show on item page)
- [%%ITEMLINK%%] Link to the detail item page
- [%%LIMITED%%] Shows limited quantities
- [%%MORECATS%%] Links to related categories
- [%%MPN%%] Shows the manufacturer price number
- [%%OPTIONS%%] Displays options and attributes
- [%%OUTOFSTOCK%%] Shows out of stock message
- [%%PRICERANGE%%] Show price range
- [%%QTYORDER%%] Qty box and order/registry button
- [%%REFERRER%%] Link to the referring category (detail only)
- [%%RELATED%%] Shows related items
- [%%REVIEWS%%] Shows five star ratings for a product
- [%%SOCIALMEDIA%%] Shows social media links