What are the standard template layouts for the storefront?

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

With BigCommerce, you can customize your template file(s) with HTML/CSS. This allows you to have the flexibility to have 1, 2, or 3 column layouts for different pages. Below are several sample layouts that you can use within our template system. For more information on the below layouts please see the Template Customization Guide.

You have several ways to change your layouts; please visit this article if you have questions. Sample HTML files have been provided at the bottom of this article.

1-Column Layout File
The HTML to generate a 1 column (content column) page would be as follows:

layout-1.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
%%Panel.HTMLHead%%
<body>
    <div id="Container">
    %%Panel.Header%%
    <div id="Wrapper">
        <div id="LayoutColumn1">
            %%Banner.TopBanner%%
            %%Panel.HomeFeaturedProducts%%
            %%Panel.HomeNewProducts%%
            %%Panel.HomeRecentBlogs%%
            %%Banner.BottomBanner%%
        </div>
    </div>
    %%Panel.Footer%%
</div>
</body>
</html>

2 Column (Left + Content) Layout File
The code to generate a 2 column page with a content column and a right side bar would be as follows:

layout-3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
%%Panel.HTMLHead%%
<body>
    <div id="Container">
    %%Panel.Header%%
    <div id="Wrapper">
            <div id="LayoutColumn1">
            %%Panel.SideCategoryList%%
            %%Panel.SidePopularVendors%%
            %%Panel.SideShopByBrand%%
            %%Panel.SideNewsletterBox%%
            %%Panel.SideLiveChatServices%%
            </div>
            <div id="LayoutColumn2">
            %%Banner.TopBanner%%
            %%Panel.HomeFeaturedProducts%%
            %%Panel.HomeNewProducts%%
            %%Panel.HomeRecentBlogs%%
            %%Banner.BottomBanner%%
            </div>
        </div>
    %%Panel.Footer%%
</div>
</body>
</html>

2 Column (Right + Content) Layout File
The code to generate a 2 column page with a content column and a right side bar would be as follows:

layout-5.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
%%Panel.HTMLHead%%
<body>
    <div id="Container">
        %%Panel.Header%%
    <div id="Wrapper">
            <div id="LayoutColumn1">
            %%Banner.TopBanner%%
            %%Panel.HomeFeaturedProducts%%
            %%Panel.HomeNewProducts%%
            %%Panel.HomeRecentBlogs%%
            %%Banner.BottomBanner%%
            </div>
        <div id="LayoutColumn2">
            %%Panel.SideCategoryList%%
            %%Panel.SidePopularVendors%%
            %%Panel.SideShopByBrand%%
            %%Panel.SideNewsletterBox%%
            %%Panel.SideLiveChatServices%%
            </div>
        </div>
        %%Panel.Footer%%
</div>
</body>
</html>

3 Column Layout File
The code to generate a 3 column page with both left and right side bars as well as a content column would be as follows:

layout-7.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
%%Panel.HTMLHead%%
<body>
<div id="Container">
    %%Panel.Header%%
    <div id="Wrapper">
        %%Panel.WrapperBanner%%
        <div id="LayoutColumn1">
            %%Panel.SideCategoryList%%
            %%Panel.SidePopularVendors%%
            %%Panel.SideShopByBrand%%
            %%Panel.SideNewsletterBox%%
            %%Panel.SideLiveChatServices%%
        </div>
        <div id="LayoutColumn2">
            %%Banner.TopBanner%%
            %%Panel.HomeFeaturedProducts%%
            %%Panel.HomeNewProducts%%
            %%Panel.HomeRecentBlogs%%
            %%Banner.BottomBanner%%
        </div>
        <div id="LayoutColumn3">
            %%Panel.SideCartContents%%
            %%Panel.SideTopSellers%%
            %%Panel.SideNewProducts%%
            %%Panel.SidePopularProducts%%
        </div>
        <br />
    </div>
    %%Panel.Footer%%
</div>
</body>
</html>
Photo of Drew N

Drew N, Community Manager

  • 258,538 Points 100k badge 2x thumb

Posted 5 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.