Adding unique header images to Shopify pages

Adding unique header images to Shopify pages
July 18, 2012 Steph

Ever want to have different header images for different pages in Shopify? Problem is you only get one field to input data for your pages, so here’s a little workaround.

Thanks to this old thread, made a slight change.

Let’s say you have a page named About, you’ll want to head over to your assets in the theme editor and upload an image named about.jpg.

Next open your page.liquid (or other template) and add the following code to call the image.

[code lang=”rails”]

{% assign: customimage = page.handle | append: ‘.jpg’ %}
<img src="{{ customimage | asset_url }}" alt="{{ page.title }}" />

[/code]

What this does is get the current page’s handle, add .jpg and then call the image from your assets.

Spits out something like this

<img alt=”” src=”http://cdn.shopify.com/s/files/1/0039/69372/t/2/assets/about.jpg?100881″>

Remember, if you have spaces in your page title, you’ll need to replace spaces with dashes in your image title.

For example a page named About our company would be

about-our-company.jpg

0 Comments

Leave a reply

Sign up for Shopify and receive 10% off my services

Get Started!