Shopify Question posted in
The Shopify help center can be found here.

Adding an Image Banner to Each Shopify Collection Page

I need some help. I have a site I’m working on for a client using Shopify.

The site needs a banner for each collection page, based off of the collection image uploaded when creating the collection.

I was told I could use this code to do this…

{% if collection.image %}{{ collection.image | img_url: 'medium' }}{% endif %}

I’ve looked around the Shopify code edit section, and I checked the collection.liquid code in the template section, but didn’t see a place to add this code. Then I checked the collection-template.liquid part in the section part, but I still don’t see a place that would make sense to add it.

Where should I add this code?

I’m not familiar with the Shopify Liquid code system. I only know how to code HTML and CSS.

If it helps, I’m using the Everything Main Theme.

Tags:

2

Answers


  1. 0

    I couldn’t find a theme called “Everything Main”, but I can show you how to it with one of the free ones. In this example, I’m using “Supply”.

    So, first of all you open the /sections/collection-template.liquid file and look for this code:

            <header class="section-header">
          <h1 class="section-header--title h1">{{ collection.title }}</h1>
          <div class="rte rte--header">
            {{ collection.description }}
          </div>
       </header>

    This shows the collection description in case it isn’t blank. Now if you wanted to show the collection image, this snippet would look something like this:

            <header class="section-header">
          <h1 class="section-header--title h1">{{ collection.title }}</h1>
          <div class="rte rte--header">
            {{ collection.description }}
          </div>
          {% if collection.image %}<div><img src="{{ collection.image | img_url: 'medium' }}" /></div>{% endif %}
       </header>

    So in case the image isn’t blank, a container is inserted which includes your image.

    Roman

    Login or Signup to reply.
  2. 0 
    {% if collection.image %}

<imgsrc="{{ collection.image | img_url: 'medium' }}">

{% endif %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search