Announcement

Collapse
No announcement yet.

How do I create a page that lays out thumbnails of my product images in a table?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How do I create a page that lays out thumbnails of my product images in a table?

    v7 and earlier

    It is possible to create a page that shows a selection of product thumbnails and then allow your customers to click on the appropriate thumbnail to be shown a page of further information and an add to cart button.

    The way you do this is to create a range of new subsections within a section, with one subsection for each product within that section. The sub-section links will become the thumbnails, and you then put the actual products within the subsections.

    Once you have done this, you will need to edit the default section link template (Design | Options | Layouts | Default Section Link Layout) to lay out your section links in a thumbnail style. There is example code for this in the 'Advanced Users Guide', available from www.sellerdeck.co.uk.

    The next step is to lay out your section links within three columns on the page.

    In order to set the default number of columns throughout the site, go to 'Design Options | Sections' and within the 'Default Location and Arrangement of Section Lists' area, set the 'First Row Column Count' and 'Subsequent Row Column Count' to '3'.

    If you only want certain sections to have the section links within them laid out in three columns, then leave the default settings in 'Design Options' as they are and go into specific sections and check 'Override Default Settings' in the 'Layout' tab. You can then enter a 'First Row Column Count' and 'Subsequent Row Column Count' for the sub-section links within that section.

    If you are only having certain sections laid out as thumbnails, then you will need to create at least two section link layout templates - one for normal section links and one for thumbnail section links. The template you are using for the section link is selected in the 'Section Layout' field in the 'Layout' tab of a section.

    Finally, a little tweak is required to ensure all your thumbnail section links line up horizontally. Go into 'Design | Text' and use the 'Go To' button to locate Phase -1, ID 1189 you should see...

    <TD WIDTH="%d%%">||

    Change it to read

    <TD WIDTH="%d%%" valign="top">||
Working...
X