Minimal Theme - Collection Page Image Size

Highlighted
New Member
2 0 0

Hello,

 

I am using Minimal Theme for around 2 weeks. I would like to be able to change the size of product images on the Collection Page however there isn't any option to customise this and I can't see within the code anything obvious to change. (I'm not experienced with code, just capable of following instructions).

 

The current theme seems to be set to show 5 products per line, I would like to experiment with 3 or 4 products per line so images are larger. I found one previous topic on this which recommended a change in the product-grid-item-liquid file however this seems to have been a different version of the theme so doesn't work.

 

Example

https://prints.danscape.co/collections/peak-district-prints-landscapes-photography

 

thanks

 

0 Likes

Hello 

Search this code at:
Theme -> edit code -> Template -> collection.liquid

<div class="grid__item small--one-half medium-up--one-fifth">
{% include 'product-card', product: product %}
</div>

Replace it with:

<div class="grid__item small--one-half medium-up--one-quarter">
{% include 'product-card', product: product %}
</div>
Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes
New Member
2 0 0

Hi,

 

Thanks, but the Collection.liquid only points to collection-template:

 

This is the code from that file which doesn't have the line you mention.

 

 

{% paginate collection.products by 20 %}

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-sort-enabled="{{ section.settings.sort_enable }}" data-tags-enabled="{{ section.settings.tags_enable }}">
<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>

<header class="section-header section-header--large">
<h1 class="section-header__title{% if section.settings.tags_enable or section.settings.sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
{% if section.settings.tags_enable or section.settings.sort_enable %}
<div class="section-header__link--right">
{% if section.settings.tags_enable %}
{% include 'collection-tags' %}
{% endif %}
{% if section.settings.sort_enable %}
{% include 'collection-sorting' %}
{% endif %}
</div>
{% endif %}
</header>

{% if collection.description != blank %}
<div class="rte rte--header">
{{ collection.description }}
</div>
<hr class="hr--clear hr--small">
{% endif %}

<div class="grid-uniform grid-link__container">
{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}
{%- assign product_width = 335 -%}

{% for product in collection.products %}
{% assign featured = product %}
<div class="grid__item {{grid_item_width}}">
{% include 'product-grid-item' %}
</div>
{% else %}

{% if shop.products_count == 0 %}
<div class="grid__item">
<div class="helper-section">
<div class="grid-uniform helper-content{% if section.settings.center_grid_link %} text-center{% endif %}">
{% for i in (1..8) %}
<div class="grid__item one-half post-large--one-quarter">
<a href="/admin/products" class="grid-link">
<span class="grid-link__image grid-link__image--product">
<span class="grid-link__image-centered">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</span>
<p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
<p class="grid-link__meta">
<strong>$19.99</strong>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div class="grid__item">
<p><em>{{ 'collections.general.no_matches' | t }}</em></p>
</div>
{% endif %}

{% endfor %}

</div>

{% if paginate.pages > 1 %}
<hr class="hr--clear">

<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}
</div>
{% endpaginate %}

0 Likes
Shopify Partner
236 59 70

Hi @danscape,

 

Welcome to the Shopify Community!

 

I understand that instead of showing 5 products per line, you want to show 3 or 4 products per line, so images are larger.

 

The key is to change this line of code:

{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}

For 3 columns, change to:

{% assign grid_item_width = 'wide--one-third large--one-third medium-down--one-half' %}

For 4 columns, change to:

{% assign grid_item_width = 'wide--one-fourth large--one-fourth medium-down--one-half' %}

Here is your entire code, for 3 columns, since that's probably best for photography:

{% paginate collection.products by 20 %}

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-sort-enabled="{{ section.settings.sort_enable }}" data-tags-enabled="{{ section.settings.tags_enable }}">
<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>

<header class="section-header section-header--large">
<h1 class="section-header__title{% if section.settings.tags_enable or section.settings.sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
{% if section.settings.tags_enable or section.settings.sort_enable %}
<div class="section-header__link--right">
{% if section.settings.tags_enable %}
{% include 'collection-tags' %}
{% endif %}
{% if section.settings.sort_enable %}
{% include 'collection-sorting' %}
{% endif %}
</div>
{% endif %}
</header>

{% if collection.description != blank %}
<div class="rte rte--header">
{{ collection.description }}
</div>
<hr class="hr--clear hr--small">
{% endif %}

<div class="grid-uniform grid-link__container">
{% assign grid_item_width = 'wide--one-third large--one-third medium-down--one-half' %}
{%- assign product_width = 335 -%}

{% for product in collection.products %}
{% assign featured = product %}
<div class="grid__item {{grid_item_width}}">
{% include 'product-grid-item' %}
</div>
{% else %}

{% if shop.products_count == 0 %}
<div class="grid__item">
<div class="helper-section">
<div class="grid-uniform helper-content{% if section.settings.center_grid_link %} text-center{% endif %}">
{% for i in (1..8) %}
<div class="grid__item one-half post-large--one-quarter">
<a href="/admin/products" class="grid-link">
<span class="grid-link__image grid-link__image--product">
<span class="grid-link__image-centered">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</span>
<p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
<p class="grid-link__meta">
<strong>$19.99</strong>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div class="grid__item">
<p><em>{{ 'collections.general.no_matches' | t }}</em></p>
</div>
{% endif %}

{% endfor %}

</div>

{% if paginate.pages > 1 %}
<hr class="hr--clear">

<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}
</div>
{% endpaginate %}

Let me know if this solves your problem or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
New Member
2 0 0

I went to where you said and I don't have the code in minimal theme.  I have this.

 

{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section 'collection-template' %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
//
theme.productStrings = {
sortBy: '{{ collection.sort_by | default: collection.default_sort_by }}'
}
</script>

0 Likes
New Member
2 0 0

@BrianAtWork  - Sir I can't figure mine out either.  When I go my subcategory of a subcategory, it is going horizontal and not vertical.  Can you help me out.  I was trying to get the pictures smaller but then have 4-5 per line.  I was doing years, 2019, 2018, 2017 etc.  This is the page I am talking about, but need to do it for each sport.  https://extremecardbreaks.com/pages/football-cards

 

{% paginate collection.products by 20 %}

<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-sort-enabled="{{ section.settings.sort_enable }}" data-tags-enabled="{{ section.settings.tags_enable }}">
<div class="section-header section-header--breadcrumb">
{% include 'breadcrumb' %}
</div>

<header class="section-header section-header--large">
<h1 class="section-header__title{% if section.settings.tags_enable or section.settings.sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
{% if section.settings.tags_enable or section.settings.sort_enable %}
<div class="section-header__link--right">
{% if section.settings.tags_enable %}
{% include 'collection-tags' %}
{% endif %}
{% if section.settings.sort_enable %}
{% include 'collection-sorting' %}
{% endif %}
</div>
{% endif %}
</header>

{% if collection.description != blank %}
<div class="rte rte--header">
{{ collection.description }}
</div>
<hr class="hr--clear hr--small">
{% endif %}

<div id="gf-products" class="grid-uniform grid-link__container">
{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}

{% for product in collection.products %}
{% assign featured = product %}
<div class="grid__item {{grid_item_width}}">
{% include 'product-grid-item' %}
</div>
{% else %}

{% if shop.products_count == 0 %}
<div class="grid__item">
<div class="helper-section">
<div class="grid-uniform helper-content{% if section.settings.center_grid_link %} text-center{% endif %}">
{% for i in (1..8) %}
<div class="grid__item one-half post-large--one-quarter">
<a href="/admin/products" class="grid-link">
<span class="grid-link__image grid-link__image--product">
<span class="grid-link__image-centered">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</span>
<p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
<p class="grid-link__meta">
<strong>$19.99</strong>
</p>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div class="grid__item">
<p><em>{{ 'collections.general.no_matches' | t }}</em></p>
</div>
{% endif %}

{% endfor %}

</div>

{% if paginate.pages > 1 %}
<hr class="hr--clear">

<div class="text-center">
{% include 'pagination-custom' %}
</div>
{% endif %}
</div>
{% endpaginate %}

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "checkbox",
"id": "vendor_enable",
"label": "Show product vendor"
},
{
"type": "checkbox",
"id": "show_sale_circle",
"label": "Show product sale circle"
},
{
"type": "checkbox",
"id": "show_sold_out_circle",
"label": "Show product sold out circle"
},
{
"type": "checkbox",
"id": "sort_enable",
"label": "Enable collection sorting"
},
{
"type": "checkbox",
"id": "tags_enable",
"label": "Enable filtering by product tag"
},
{
"type": "checkbox",
"id": "center_grid_link",
"label": "Center text below product images"
}
]
}
{% endschema %}

0 Likes