BigCommerce Mod : Show brand logo image on Product Page

Showing brand logos on product pages in BigCommerce sites is harder than it should be. Here is a quick mod that will let us do that without need of using the API.
Here is the desired result

Code

This works by parsing you /brands page and then comparing current brand name to the one from parsed page.

Lets edit Panels/ProductPanels.html and change the current brand code into this

<div class="DetailRow" style="display: %%GLOBAL_HideBrandLink%%">
					<div class="Label">%%LNG_Brand%%:</div>
					<div class="Value">
						 <a href="%%GLOBAL_BrandLink%%"><img src="/templates/__custom/images/BrandDefault.gif" border="0" id="brand-logo"> <br/>%%GLOBAL_BrandName%%</a>
 
						<script type="text/javascript">	
                                          $(document).ready(function() {
 
						$.ajax({
						  url: "/brands" 
 
						}).done(function ( data ) {
							var html = $(data);
							var items = $('.SubBrandListGrid li', html);
 
							items.each(function() {
							    var link = $('a', this);
								if(link){
								var txt = $(link).text();								
									if('%%GLOBAL_BrandName%%' == txt){
										var img = $('img', this).attr('src');
										$('#brand-logo').attr('src', img);
									}		
								}								
							});							 
						});
                                             });
						</script>
					</div>
				</div>

14 thoughts on “BigCommerce Mod : Show brand logo image on Product Page”

  1. I’m just getting /templates/__custom/images/BrandDefault.gif this image displayed… is there a placeholder for the actual image?

  2. I’d just like to say thanks for this code – I figured out I needed to enter it in Panels.ProductDetails.html (we must be using an older template?) and it works great. Also managed to make a variant of this work, displaying the image on the brand page (brands/brandnamehere.html) itself; thought I’d share. Open Panels/BrandContent.html and replace the heading line with this:

    %%GLOBAL_TrailBrandName%%

    $(document).ready(function() {

    $.ajax({
    url: "/brands"

    }).done(function ( data ) {
    var html = $(data);
    var items = $('.SubBrandListGrid li', html);

    items.each(function() {
    var link = $('a', this);
    if(link){
    var txt = $(link).text();
    if('%%GLOBAL_TrailBrandName%%' == txt){
    var img = $('img', this).attr('src');
    $('#brand-logo').attr('src', img);
    }
    }
    });
    });
    });

  3. Since my comments are awaiting moderation, perhaps you can just delete the above ones and use this:

    I’d just like to say thanks for this code – I figured out I needed to enter it in Panels.ProductDetails.html (we must be using an older template?) and it works great. Also managed to make a variant of this work, displaying the image on the brand page (brands/brandnamehere.html) itself; thought I’d share. Open Panels/BrandContent.html and replace the heading line with this:

    <h1><img src="/templates/__custom/images/BrandDefault.gif" border="0" id="brand-logo">  %%GLOBAL_TrailBrandName%%                         <script type="text/javascript">                                              $(document).ready(function() {                         $.ajax({                          url: "/brands"                          }).done(function ( data ) {                            var html = $(data);                            var items = $('.SubBrandListGrid li', html);                             items.each(function() {                                var link = $('a', this);                                if(link){                                var txt = $(link).text();                                                                    if('%%GLOBAL_TrailBrandName%%' == txt){                                        var img = $('img', this).attr('src');                                        $('#brand-logo').attr('src', img);                                    }                                        }                                                            });                                                     });                                             });                        </script></h1>

  4. Works a treat in Panels.ProductDetails.html

    Thanks Toby!

    Is there a way to reduce the size of the brand image – they look a little large on my product pages.

  5. Hi

    I have used your script , its working but its showing only one brand without image ,
    i need to show each products with there brands logo .

    so please suggest me what i did wrong .

    Thanks

Leave a Comment

Your email address will not be published. Required fields are marked *