Products Page Customization

I was wanting to customise my products page so that there is just a single line between each product like in the attached image. I am new to this and i am just not sure. Thanks

What do you mean by "single line" ?

If you have a look at the image i attached i am just wanting a vertical line to the right of each product to separate them.

You can add such CSS in the front end CSS file of HikaShop via the Display tab of the configuration:

div.hikashop_subcontainer_border {
border-right: 1px solid #CCC;
}

Sorry, I placed that code in the css and it did nothing.

Please make sure that the "custom" front end css is select in that option of the configuration and flush your browser's cache.

I have done that but it is still not working?

Could you give a link to your website so that we can see that ?

Thanks Nicolas its www.trendcommunications.com.au/fsa/index...egory/13-accessories

Ah yes, that's because the border option of your listing is turned off. If you turn it on that should work.

Alternatively, you can use that CSS:
div.hikashop_subcontainer {
border-right: 1px solid #CCC;
}

Can you please clarify where the border option of the listing is. I also tried that css and it gives a right border to everything even the items in my vertical scroller. The page displays in three columns so is it possible to just place a line to the left and right of the middle column?

That option is located in the hikashop options of the module with the id 101 used on that page to display the products listing. You can edit it via the menu Display->Content modules and you will have the "border" option that you can turn on.

If, you use that CSS, it will only apply to the listing of that page:

#hikashop_category_information_module_101 div.hikashop_subcontainer {
border-right: 1px solid #CCC;
}

You won't be able to apply the border on the middle column only with just CSS. You will have to edit the file "listing_div" of the view "product" via the menu Display->Views and change the line:
<div class="hikashop_product" style="width:<?php echo $width;?>%;">

to:
<div class="hikashop_product hikashop_product_column_<?php echo $current_column; ?>" style="width:<?php echo $width;?>%;">

so that you can use the CSS:
div.hikashop_subcontainer .hikashop_product_column_1 {
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}