Header images & Fixed width shops

if you look at some of the most popular websites say the BBC or JohnLewis they have a fixed size to them. This is in part due to the massive number of screen resolutions that are now common on the net and means that in general no matter what screen or browser your shop is viewed on it will appear the same to all your visitors.

If you have a look at http://shop.more-tea.co.uk I have duplicated your issue I think, my pretty banner is exactly 940 x 174 pixels wide same as yours, now if you have a look at http://shop.more-coffee.com/ you will see I have fixed the size of the site so that it will look the same on the majority of devices on the net.

  1. Log into the shop back office the normal way
  2. Move your mouse over the Design tab and click on the “Advanced Design” option
  3. Click your header image first then click the outside of your template, so the black space that surrounds your shop page, you will see a red highlight that almost completely fills the editing screen

    (Tip, if you don’t see a red box, turn on the editing help, this can be done in the top left of the screen on the editing ribbon)
  4. in the Editing Ribbon you will see a section called “Width and padding” the top option presently will show “90%”
  5. Change this to “940px” (with out the speech marks)and press enter.

    The PX is important as it tell the shop system that the measurement is now in pixels and not a percentage of the screen.
  6. Save your changes and update the page cache.
  7. Hopefully that has fixed your problem.

Print pagePDF pageEmail page

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.