Customize Blogger Store Header Image Logo for BlogrCart Butik Template

Update 26 July 2016 - Now BlogrCart BUTIK Blogger shopping cart theme/template in version 2.0, more powerful & less setups to quickly build your online store without any CODE EDITS. View the new Blogger theme/template collection with shopping cart here http://blog.irsah.com/gallery.

Original Article 6 November 2014
We received many request by PRO version users on customizing the header image logo for their BlogrCart Butik PRO powered e-commerce blogger store (or blogshop)  template. By default, the Blogger template will render the image to expand to the container width (without distorting), behind the built-in search product bar & above the responsive drop down menus.

View BlogrCart Butik E-commerce FREE & PRO versions featured blogger template here.

The blogger " Header " widget used for BlogrCart Butik blogger store template was slightly modified to accommodate the responsive design template engine pre-installed & developed by us. It was optimised to keep with web page best practices for responsive designs in making sure the blogger store itself render quicker on any screen sizes.

Tutorial to Reduce the Header Image Logo Size

The modifications is very straight forward. Go to your template editor > back-up your template (if required) > find your </head> tag.

Now copy and paste below codes before/above the </head> tag in your template editor:-

<!-- add on codes for the smaller blog header image -->
<style>
#Header1_headerimg,
#header-inner {
background-size: cover;
min-width: 50%!important; /* SET HEADER IMAGE WIDTH HERE ACCORDINGLY */
min-height:auto!important;
width:50% !important; /* SET HEADER IMAGE WIDTH HERE ACCORDINGLY */
height:auto !important;
display:block;
}
</style>

</head> <!-- THIS IS YOUR REFERENCE -->

Click " Save Template ".

Here is the tutorial on uploading an image using the pre-installed Blogger Header widget in BlogrCart Butik blogger store template http://blogrcart-butik.blogspot.com/2014/07/using-image-as-header-banner-use.html

If you have not uploaded a Header image, then you can go to any page in your blogger e-commerce store, find the "Pencil" icon located below the " Search Bar " (refer screenshot below) & upload an image preferably below 100Kb in image file size.

You can adjust the Header image logo width at the newly added codes above where the comments is located later.

Make sure before saving your uploaded image, select  (or click the radio button) for " Instead of header title and description ".

Click save and VOILA, your header image is reduced in size located at the top left corner of the template header container. It also fits nicely in any screen sizes too!

Hope it helps BlogrCart template users. More powerful shopping cart ready e-commerce inspired/featured Blogger template for FREE downloads slightly below. Do check it out!