Supportlogo-header

02:20AM, May 22, 2006

tobi Shopify

Reflections

Great javascript to make product pictures really stand out:

http://cow.neondragon.net/stuff/reflection/

Tobias Lütke - Shopify CEO // http://twitter.com/tobi

04:32AM, May 22, 2006

TBKy Member

Great ! Thanks.

Bento&co The bento boxes shop http://bentoandco.com/

09:13PM, May 30, 2006

joe7 Member

OMG that is awesome. very web 2.0!

any chance this could be implemented?

joe7

12:40AM, May 31, 2006

tobi Shopify

You can use this already. Just upload the JS, link it up with

{{ 'reflection.js' | asset_url | script_tag }}

in your <head> area and add the class to the images in the products screen and browse screen like they describe.

Tobias Lütke - Shopify CEO // http://twitter.com/tobi

05:36AM, Jun 23, 2006

Vip Member

Where do I add the class in the dropify theme – which page and exactly where? (sorry, im a newb at this)

Vip

11:32PM, Jun 24, 2006

danW Shopify Advisor

It’s in your theme.liquid file in between the tags.

11:34PM, Jun 24, 2006

danW Shopify Advisor

Sorry, in between the

 <head></head> 
tags

05:43AM, Oct 23, 2006

Juan Member

Hi Tobi,

Sorry if it is very simple doubt, but I can’t seem to understand how to do this

“add the class to the images in the products screen”

In normal html, I see I have to just add

<img src="....." class="reflect" />

But, how can I integrate this with my product images?

Thanks in advance…

Le Mot Polos Online http://www.lemot.es

04:52AM, Jan 12, 2007

mtotten Member

Anyone figure this out yet? I’m still having issues with this, any help would be greatly appreciated.

mtotten

07:49AM, Jan 12, 2007

Richard Quick Shopify Advisor

In your admin:

go to “look and feel”

1)
choose “theme.liquid”

Just before the

</head>
tag add the following code:

<script type="text/javascript" src="http://cow.neondragon.net/stuff/reflection/reflection.js"></script>

Then save

2)
choose “product.liquid”

Find the image tag. Eg.

<img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title}}"/>

Add the reflect class, eg.

<img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title}}" class="reflect" />

Then save

That should be it.

Note: Ideally you’ll download the reflect.js file and upload it to your own server, rather than just piggy-backing off the author’s site.

HTH

Richard Quick Finalist: SxSW Web Awards 2009 (CSS Category) SEO and Web design http://www.successfulsites.co.uk http://www.richardquickdesign.com

Last edited 06:02AM, Jan 13, 2007

Leo in Victoria Member

I tried to implement a round corner javascript but it needed to be passed some parameters. Is there any way to pass parameters to a script?

Leo in Victoria www.barbsart.ca--Beautiful art for a wonderful planet

login or Sign up for an account to reply.