Announcement

Collapse
No announcement yet.

Categories on homepage

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

    Categories on homepage

    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
    https://www.harrisontelescopes.co.uk/

    Ed Harrison - Menmuir Scotland

    #2
    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.
    Bruce Townsend
    Ecommerce Product Manager
    Sellerdeck Ecommerce Solutions

    Comment


      #3
      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.
      Bruce Townsend
      Ecommerce Product Manager
      Sellerdeck Ecommerce Solutions

      Comment


        #4
        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.
        https://www.harrisontelescopes.co.uk/

        Ed Harrison - Menmuir Scotland

        Comment


          #5
          Here you go:

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

          Code:
          <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
          Code:
          .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.
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            Many thanks Jonathan!!!

            Comment


              #7
              You are welcome!
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment

              Working...
              X