Note: if you're using ShowTime 6.0 or above, there is a setting in your collection page settings in the theme customization browser to disable this image so no code changes are necessary. This tutorial applies to all ShowTime versions prior to 6.0.
The collection featured image in the ShowTime theme is designed to be a wide, landscape image approximately 1100px x 400px. If you're not happy having this image showing on your collection pages, there are a few options to consider.
- You can hide it by following the steps below. If you're using an older version of the theme, please continue reading. Not sure what theme version you're using? Here's how to find out.
- You can bypass the featured image completely and just use the collection description field in Shopify. This is a standard editor window where you can add text and images, so you can use that instead if you'd like to try a smaller image.
If you wish to hide the image altogether, please log into your store as an administrator follow these steps:
- From your Shopify dashboard, click Online Store > Themes and look for ShowTime.
- Click the Actions button and choose Edit Code from the drop-down menu.
- Navigate to the Sections folder and locate the collection.liquid and collection-list.liquid files
- Click on it to open the files in the editor.
If you're using ShowTime 5.0.9 or earlier...
Change:
<div class="box collection-box animated rollIn" data-animation="rollIn" > {% if collection.image %} <img src="{{ collection | img_url: '1400x' }}" alt="{{ collection.title }}" /> {% endif %} {% if collection.description.size > 0 %} <div class="rte"> {{ collection.description }} </div> {% endif %} </div>
To:
<div class="box collection-box animated rollIn" data-animation="rollIn"> {% if collection.description.size > 0 %} <div class="rte"> {{ collection.description }} </div> {% endif %} </div>
If you're using ShowTime 5.1, 5.1.1, or 5.1.2...
Remove:
{% if collection.image %} <noscript> <img alt="{{ collection.title | escape }}" srcset="{{ collection | img_url: '1200x' }} 1x, {{ collection | img_url: '1200x', scale: 2 }} 2x, {{ collection | img_url: '1200x', scale: 3 }} 3x" > </noscript> {%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img src="{{ collection.image | img_url:'100x100' }}" alt="{{ collection.title | escape }}" class="lazyload blur-up collection-main-image" data-src="{{ img_url }}" style="max-width: {{ collection.image.width }}px" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ collection.image.aspect_ratio }}" data-sizes="auto" /> {% endif %}
Click Save to save your changes. That should do it!
Comments
0 comments
Article is closed for comments.