Categories on homepage

[EdHarrison]

I see most websites now show a few main categories on the homepage 2,3 or sometimes 4 boxes across - main product groups, for me it would be something like TELESCOPES | ACCESSORIES | BINOCULARS and so on...

With a fragment it is only one box full width, is there a way of showing 2 or 3 wide but retaining responsive behavior?

I also have concerns that the best sellers title is an H1 so by putting fragments above it it would be negative on SEO unless they become H1

Ideally just images with links would work fine.

thank you

[brucet]

You could set the fragment up as a carousel. Set both the maximum and minimum images in view to 3, and set 'transition carousel slides automatically' to false.

[brucet]

On reflection that may not be such a great idea because the slider controls would still be visible but they wouldn't do anything. Theoretically you could suppress them by changing settings in the bxslider js file, but I can't help with that, plus the change would apply to all carousels in the site.

Fragments in sections use the same column count as the products, so you can't vary that. However you could have a single fragment and use HTML in the Text to show several elements within it.

Alternatively you could use subsections and populate them using filtering. The first row of subsection links can have a different column count to the rest.

[EdHarrison]

Thank you - I did it the carousel way for now which at least helps customers navigate to sections that are not so easy via the mega menu.

[graphicz]

Here you go:

Add to 'Brochure Page Body RWD' after the share buttons or wherever suits.

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsBrochureHomePage%22%20%2f%3e">

<div class="section-list sectionLinkFirstThreeColumn sectionListThreeColumn">
<actinic:block type="TopLevelSectionList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowInHomePageSectionList%22%20%2f%3e%20%3d%3d%20true">
	<div class="section-link-details" style="text-align:center">
	<a href="<actinic:variable name="SectionHref" />"><h3><actinic:variable encoding="actinic" name="SectionName" /></h3></a>
	<div class="section-link-image undred">
		<a href="<actinic:variable name="SectionHref" />" target="_self"><img alt="<actinic:variable name="SectionName" encoding="strip"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a> 
<div class="vdetails"> <a href="<actinic:variable name="SectionHref" />" target="_self">More Details</a></div>              
	</div>
</div>
</actinic:block>
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%25%204%29%20%3d%3d%200" >
	<div class="clearfloat" /></div>
</actinic:block>	
</actinic:block>
</div>
</actinic:block>
<div style="height:1em;clear:left;"><img src="theme_shim.gif" height="10" alt="spacer" /></div>

And here are the bits of non standard css

.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
div.vdetails {
	background: <actinic:variable name="Palette2" />; /*or whatever*/
    color: #ffffff;
    display: block;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.7em;
    text-align:center;
}
.vdetails a, .vdetails a:link, .vdetails a:active, .vdetails a:visited {color:#ffffff!Important;}
.vdetails a:hover {color: #c0c0c0!Important;}

.undred img {
	max-width:100%;
	height:auto;
}

Enjoy!

You could also create a new variable 'ShowInHomePageSectionList' (as in the code above) so that you can choose which sections will display.

[grant]

Many thanks Jonathan!!!

[graphicz]

You are welcome!