Carousel Configure

[kevin]

Thank you for adding the Carousel Configuration to Shopsite. For best results, is there a recommended slideshow graphic size you would suggest? I'm hoping to use the new Ever Short Nav Theme and would like the left side navigation to appear at the top of the left side like it shows in the picture linked below. My current slideshow pictures (775 x 300 pixels) are too big and push the left side menu down the page.


http://www.shopsite.com/templates/cookbook/builtintemplates-bb-evershortnav.html

[Jim]

The carousel is designed to be used on a main page so it may be that it isn't designed to be used with a left column of menu items. I haven't contacted the designer to see if the carousel can actually be used on pages that have side navigation so can't say for sure.

When I view the page source It looks like the main page body of that theme has a max-width of 1000 px. The div for the left navigation is set to 18% so it would have a width of around 180 px. It is also possible to have a right navigation on that theme and that would use another 18% which would bring the main body of the page to 600 px. So I would try using 600 px wide images and see if that works.

[ShopSite Lauren]

The carousel in new themes is located just below the navigation, and is as wide as the navigation. So it spans the main content and any side navigation menus that are enabled. If you would like to have the carousel moved into the main body, you will need to use a new template. There is a page template that has already been created that puts the carousel into the main body instead of above the main body. You can download this page template, then upload it into your ShopSite store under Merchandising > Custom Templates > Pages. Then go to your list of pages > select your home page > Edit Page Layout, and change your home page template to the BB-InnerPageCarousel.sst, and publish changes.
Download Template Here: http://shopsite.com/templates/cookbook/builtintemplates-bb.shtml

The width of the main content area is 82%, minus the side padding (which is 16 pixels on either side in most new themes). So if you main page width (Preferences > Layout Settings, see what your page width is set to) is 1000px, and you have 1 side menu enabled (just the left or just the right), then the side menu will be 18% of the page, and the main content will be 82% of the page, meaning the white area in the middle of the page is 820px wide. However, you then have to minus the padding, 32px (16 + 16), so the main content area where you can actually have text or images would be 786px wide (assuming I just did my math right ). So for best results (best load times and best image quality), you will want to have your banner images be 786px wide, and whatever height you want (but make the banner heights uniform).

If you upload banner images that are larger than 786 pixels wide, they will be forced smaller, which looks fine to the customer, but will take a little longer to load because they are larger images (unnecessarily large). If your banner images are smaller than 786 pixels wide, your images will be stretched to the width of the area available. In many cases, if your banner images don't have text on them, the images will still probably look ok, especially if you have a title or description specified under Preferences > Carousel, because the text will be the focus.