Search code examples
htmle-commercecode-snippetsbigcommerce

How can one create a custom listing page displaying products for a specific brand in BigCommerce?


We are trying to set up a custom brand landing page at https://www.brace-mart.com/test-drive-medical to meet that brand's requirements. We would like the products from that brand listed below the brand description, so we created a custom page with a custom template:

%%Panel.HTMLHead%%

<body>
  %%Panel.DrawerMenu%%
  <div class="page two-col">
    %%Panel.Header%%
    <div class="main">
      <div class="inner">

        <div class="Left fleft mobile-hide" id="LayoutColumn1">
          %%Panel.SideSubPageList%% %%Panel.SideCategoryList%% %%Panel.SideShopByBrand%% %%Panel.SideNewsletterBox%% 
                        %%Panel.SocialLinks%% %%Panel.SideLiveChatServices%%
                        <div id="SideLinks" class="clearfix">
                           
                            <div id="cards">
                                <img src="https://www.brace-mart.com/template/cards.png" alt="Accepting all major credit cards" />
                            </div>
                            <style>
                                
                                #cards {
                                    text-align: center;
                                    margin-top: 15px;
                                }
                            </style>
                       
                            
                           
            
                            <!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=roger%40surecareortho%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" width="60px" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal -->
             
                            <!-- GeoTrust QuickSSL [tm] Smart  Icon tag. Do not edit. -->
                            <script language="javascript" type="text/javascript" src="//smarticon.geotrust.com/si.js"></script>
                            <!-- end  GeoTrust Smart Icon tag -->
          </div>
        </div>

        <div class="Content Wide" id="LayoutColumn2">
          %%Panel.WrapperBanner%% %%Panel.PageBreadcrumb%%
          <h1 class="TitleHeading">%%GLOBAL_PageTitle%%</h1> %%GLOBAL_PageContent%% %%Panel.PageComments%% %%Banner.BottomBanner%%





<div class="BlockContent CategoryContent">                
    <script type="text/javascript">
    lang.CompareSelectMessage = '%%LNG_CompareSelectMessage%%';
    </script>

    <form name="frmCompare" id="frmCompare" action="%%GLOBAL_CompareLink%%" method="get" onsubmit="return compareProducts('%%GLOBAL_CompareLink%%')">
        %%Panel.BrandProductListing%%

        <div class="product-nav btm">
            <div class="PagingBottom">
                %%SNIPPET_BrandPaging%%
            </div>
            <div class="clear"></div>
        </div>
        <div class="CompareButton" style="display:%%GLOBAL_HideCompareItems%%">
            <input value="%%LNG_CompareSelected%%"  type="submit" class="btn alt" />
        </div>
    </form>
</div>



        </div>

        <div class="Left fleft" id="LayoutColumn4">
          %%Panel.SideSubPageList%% %%Panel.SideCategoryList%% %%Panel.SideShopByBrand%% %%Panel.SideNewsletterBox%% 
                        %%Panel.SocialLinks%% %%Panel.SideLiveChatServices%%
                        <div id="SideLinks" class="clearfix">
                           
                            <div id="cards">
                                <img src="https://www.brace-mart.com/template/cards.png" alt="Accepting all major credit cards" />
                            </div>
                            <style>
                                
                                #cards {
                                    text-align: center;
                                    margin-top: 15px;
                                }
                            </style>
                       
                            

                           
            
                            <!-- Begin Official PayPal Seal --><a href="https://www.paypal.com/us/verified/pal=roger%40surecareortho%2ecom" target="_blank"><img src="https://www.paypal.com/en_US/i/icon/verification_seal.gif" width="60px" border="0" alt="Official PayPal Seal"></A><!-- End Official PayPal Seal -->
             
                            <!-- GeoTrust QuickSSL [tm] Smart  Icon tag. Do not edit. -->
                            <script language="javascript" type="text/javascript" src="//smarticon.geotrust.com/si.js"></script>
                            <!-- end  GeoTrust Smart Icon tag -->
          </div>
        </div>

        <div class="clear"></div>
      </div>
    </div>
    %%Panel.Footer%%
  </div>
</body>

</html>

However, the products are not showing up. I am assuming because this is a custom page, the template (the code snippet %%Panel.BrandProductListing%%, I'm guessing) does not realize that it is a brand. Is there some way to specify what brand to display products for? Or is there a better way to set up a custom page? It sounds like this sort of requirement is pretty common in the ecommerce world.

Thank you!!!


Solution

  • According to Danielle Mead, "You'd have to make the brand a category and then you could apply a custom page template to it. You can't apply custom templates to brands." David Inman also contributed, "We do this all the time. Just redirect the Brand URL to your Category and apply the custom template to that."

    Since BigCommerce doesn't allow custom templates to be added to the brands, a new category with the desired products must be added. Categories do allow custom templates, so applying the custom template to the category will allow both custom category content and the desired products to be displayed. A redirect can then be applied to send users to the category page rather than the brand page.