Shopify: How do I ensure my application proxy content will work for all Templates?

3
votes

I am building an application proxy for Shopify.

the documentation (http://api.shopify.com/app_proxy.html) says...

If the HTTP response from the Proxy URL has Content-Type: application/liquid set in its headers, Shopify will evaluate and render any Liquid code in the request’s body in the context of the shop using the shop's theme. This is awesome. When used the right way, it can automagically make your app look like it belongs as part of the shop without any manual intervention. Shopify merchants love that sort of thing.

This is my best attempt so far, it looks ok for the default template ( http://plnkr.co/edit/iXbWWiMlEsi6NsA6uPtG?p=preview.) but I don't think it will work for all templates.

How do I ensure my content will work for all templates? are there certain classes I need to put in my content? conventions I should follow? an example would be awesome.

Michael

1
shopifyliquidliquid-layout

1 Answers

5
votes

Ultimately, you won't be able to predict what you'll be dealing with so here are some suggestions to make it as seamless as possible:

  1. Keep your markup nice and simple.
  2. Inject you own stylesheet to control layout and width etc, but don't specify fonts or colors so it stays consistent with the theme.
  3. Try to use a fluid layout so you can cope with different widths of your content area.

The other thing I'd suggest is setting up a few test stores (using your partner account) and load them up with different themes so you can eyeball a few different ones.