Fixing Shopify template bugs – “Rare 1″

By Joshua on August 09 2007

A couple of weeks ago, I helped my family set up a website with Shopify. (The website is www.bridgeswalkingsticks.com.) Because they wanted to get the site up and running as quickly as possible they elected to go with one of Shopify's rather nice-looking templates, "Rare 1," rather than create a new design.

Although it looked excellent, it did have some layout issues, mostly with Internet Explorer.

The rounded corners at the top did not display correctly in IE6 or IE7.
The content section of the website would always be forced below the menu section in IE6.
One additional issue is that on a page whose content section was shorter than the menu, the bottom right corner graphic would not actually be at the corner of the layout.

Fortunately, Shopify is very open in giving its users access to their site's code. With some minor modifications I was able to resolve these issues. The changes are listed below for the benefit of anyone else using "Rare 1″. Only the code directly related is included.

#header {
  /*padding: 15px;*/
  padding: 0 15px; /*Reduce header height to compensate for adding padding in IE fix*/
  margin-top: -15px; /*see above*/
}

.clipped-tr {
  padding-top: 27px; /*Make top rounded corners work in IE*/
}

contentcenter {
  width:495px;
  _width: 494px; /* Prevent content from dropping below menu in IE6 */
  padding: 0 0 50px 10px;
  _padding: 0 0 50px 0; /* Fix problem with bottom right corner introduced by fix above */
  min-height: 650px; /* Make sure height of content section is longer than menu */
}

The properties preceded with an underscore above are only visible to IE6, and though it is a bit of a hack, it is technically valid CSS.

Update: Since the time of this writing, I have begun offering design and coding for custom Shopify themes.

Looking for someone to help you design or build your next web project? Drop us a message! We'll help get your project rolling.

What our readers said

osu on February 18, 2009

Hi,

Do you know if you can use conditional comments in Shopify themes? I included an additional style sheet like this but the comments appear in IE6 and IE7…?

<!—[if lte IE6]>—>

Thanks for any advice,
osu

osu on February 18, 2009

Sorry, the conditional comments were stripped out of that last post. If they don’t come out below, just ‘imagine’ them :)

Thanks

{{ 'styles.css' | asset_url | stylesheet_tag }}<br />
<!--[if lte IE6]>--><br />
 {{ 'ie6lte.css' | asset_url | stylesheet_tag }}<br /> 

Joshua on February 18, 2009

Hi osu,

Yes, you can use conditional comments in Shopify. It looks like yours aren’t correctly formatted, though. You might look here to double check.

osu on February 18, 2009

Thanks for this Joshua, I realised that I hadn’t put a space between IE and the version number (IE6 instead of IE 6)!

What a turd mistake to make!

Thanks for the pointers

osu on March 08, 2009

Hi Joshua (me again, sorry),
Just wondering if you know how to echo out the width and height of an image using liquid? I’ve got a theme that is working almost perfectly, but in IE6 the thumbnails on the homepage are breaking the layout because the images don’t have the width=”” attribute.
i.e. the code is:
But I need it to include width=”{{ width of the thumbnail }}”
I’ve set the height using CSS, but because the thumbs are both landscape and portrait shapes, IE6 screws up.
Any idea of how I can sort it? Can’t find anything on the wiki…
Thanks

Design Pepper

Fixing Shopify template bugs – “Rare 1″

What our readers said