Edit Homepage Sidebars
Last Updated -
Display Sidebars on the Homepage
If you're using a responsive store template that includes the large homepage banner (a.k.a. hero image), by default the sidebar widgets will not display. This is simply because of how the homepage banner is coded. You do have the option to display a sidebar; however, displaying both a sidebar and the banner at its full size will require custom coding.
If you would like to display a sidebar (and its corresponding widgets) on the homepage, simply follow these instructions:
- In your CoreCommerce admin, Go to Design > Sidebar Widgets
- Hover over Sidebar and click on Page Display
- Select the widgets you want to display on the homepage, then save.
The banner code is actually part of the main content area (#content-middle), which displays to the right of the left sidebar (#content-left). Normally, when you enable the sidebar, #content-middle will shrink in width and the left sidebar and main content area will sit side-by-side. However, due to the width of the banner, #content-middle is too wide and therefore there is not enough room for both #content-left and #content-middle to fit inside #content. Here is an image that illustrates how the containers (DIVs) work:
Let's say #content (which contains both #content-left and #content-middle) is 950px wide. This means that the widths of #content-left and #content-middle combined must be less than 950px (including any padding or margins). Assuming there isn't any padding or margins, if #content-left is 200px, then that leaves only 750px for #content-middle. If the banner is 900px, then it will increase the width of #content-middle and therefore #content-left and #content-middle have a combined width of 1100px which is too wide for #content (at 950px wide). As such, #content-middle will get pushed down below #content-leftto accomodate for the lack of space.
- Remove the banner completely.
- Resize the width of the banner , so it will fit into the resized #content-middle when the sidebar is enabled
- Use custom code to place the banner
- In your admin panel, hover over the Design tab and click on Advanced Options
- Under Edit HTML/CSS, open up "header.html"
- Inside #content, above #content-left, you'll need to input something like this (code may vary):
<a href="#"><img alt="" src="/00218-1/design/images/banner.png" /></a>
Option 3 requires HTML/CSS knowledge. These steps are meant as a guide, but additional or different coding may be necessary. If you are interested in initiating a custom design project please submit a ticket via Account > My Tickets > Create a Ticket or email firstname.lastname@example.org.