How can I display Brands in the centre part of the page

FAQ: How can I display Brands in the centre part of the page

As standard, brands lists can only be displayed in the middle part left and right hand columns.  It is possible to display Brands in the center column of the middle part using the instructions below.

Example Standard layout of the Brands Menu section is as follows:

Display Brands in the Center Column - Option 1


In this case the next steps should be followed: 

1. Go to Website > Edit Website

2. Select required site page in the Website Map tree on the left and go to the Edit Page tab

3. Make sure the Brands Menu page section is present in the left page container

4. Click on Page Sections to expand the list of all sections, find a HTML page section and drag it to the center page container

5. Open the HTML section in the edit mode and add the following code:

<div class="brandsList"></div>
<script type="text/javascript">
$(document).ready(function(){
    var brandContent = $(".brandsMenu .cont").html();
    $(".leftContainer .brandsMenu").css("display", "none");
    $(".brandsList").html(brandContent);
});
</script>

6. Save changes and publish the site for the changes to be applied online

Display Brands in the Center Column - Option 2


In this case the next steps should be followed: 

1. Go to Website > Edit Website

2. Select required site page in the Website Map tree and switch to the Edit Page tab

3. Make sure the Brands Menu page section is present in the left page container

4. Drag a HTML page section to the center page container

5. Open the HTML section in the edit mode and add the following code:

<div class="leftContainer">
<div class="block floatLeft">
    <div class="corner1">
        <div class="corner2">
            <div class="lineTop"><h3></h3></div>
        </div>
    </div>
    <div class="cont">
    </div>
    <div class="corner4">
        <div class="corner3">
            <div class="lineBtm"></div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var title = $(".leftContainer .brandsMenu .lineTop h3").html();
    var brandContent = $(".leftContainer .brandsMenu .cont").html();
    $(".leftContainer .brandsMenu").css("display", "none");
    $(".centerContainer  .leftContainer .lineTop h3").html(title);
    $(".centerContainer  .leftContainer .cont").html(brandContent);
});
</script>

6. Save changes and publish the site for the changes to be applied online

Display Brands in the Center Column - Option 3



 

In this case the next steps should be followed: 

1. Go to Website > Edit Website

2. Select required site page in the Website Map tree and switch to the Edit Page tab

3. Make sure the Brands Menu page section is present in the left page container

4. Drag a HTML page section (*) to the center page container

5. Open the HTML section in the edit mode and add the following code:

<div class="categoryLinkListSection">
<div class="block floatLeft">
 <div class="corner1">
  <div class="corner2">
   <div class="lineTop"><h3></h3></div>
  </div>
 </div>
 <div class="cont">
 <div class="nofloat"></div>
 </div>
 <div class="corner4">
  <div class="corner3">
   <div class="lineBtm"></div>
  </div>
 </div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {  
   $.ajax({  
    type: "GET",  
    url: "/template/resource/%TemplateID%/config.xml",
    dataType: "xml",  
    success: createBrandList  
   });  
});  

function createBrandList(xml) {  
    var n = $(xml).find("sub-category-link-list").attr("category-per-row");
    var brandContent = "";
    for(i=0;i<$(".leftContainer .brandsMenu .cont ul li").length;i++){
        if( (i+1)%n == 0) brandContent += "<h4 class='last'>" + $($(".leftContainer .brandsMenu .cont ul li")[i]).html()  + "</h4>";
        else brandContent += "<h4>" + $($(".leftContainer .brandsMenu .cont ul li")[i]).html()  + "</h4>";
    }
brandContent += "<div class='nofloat'></div>";
    $(".leftContainer .brandsMenu").css("display", "none");
    $(".categoryLinkListSection .cont").html(brandContent);
}
</script>

Where %TemplateID% should be replaced with your site's template id, e.g. for the Artistic template corresponding line will be: url: "/template/resource/13/config.xml". 

Templates' ids are specified along with their names in the following KB article : Standard Templates
(*) If your template is Funky or Amethyst, you would need to insert the code snippet to the Text And Image page section instead of the HTML page section. Please see the second option in the following article for the instructions on how to do this: Adding HTML to a website page

6. Save changes and publish the site for the changes to be applied online

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.