How can I reduce the Collection Image(s) size on Supply theme?

Diego2
New Member
4 0 0

Someone please help!

I can only find threads on how to increase the size of the images but not how to reduce theme. Now, common sense is to just do the opposite but unfortunately nothing works. Have I missed something? Any help is grrreeaat! Please break it down step by step.

My store: www.goldcraneimex.com

Any feedback is welcomed. Thank you!

-Diego 

0 Likes
tim
Shopify Expert
2926 143 1021

Hi D!

Do you want to have more products per row? This can be changed in Theme -> Customize. To see the collection display options you have to actually navigate to a collection in the right pane, then you will have Collection  in the left pane where you will be able to change the number of products per row.

Unfortunately, if you want to have more than 5 products per row, you'll have to modify your theme's files.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Jason
Shopify Expert
10360 158 2010

Hey Diego,

If you want to reduce the image size you will need to make theme edits to opt for a smaller image dimension. Generally you'd want the image to be as large as it can be within the space, but I am sure there's merchants that need to show smaller.

For your theme there'll be a section called collection-template.liquid. Within that will be some code that looks like this (though yours might differ slightly):

{% when '2' %}
  {%- assign image_size = '540x600' -%}
{% when '3' %}
  {%- assign image_size = '345x550' -%}
{% when '4' %}
  {%- assign image_size = '250x' -%}
{% when '5' %}
  {%- assign image_size = '195x' -%}

That is where the image size is being defined. So 540x600 is 540px x 600px. 195x is 195px x auto height. Adjust the values to find the fit you're looking for. So right now you'd be using 250x. You could change that to 200x and expect to see a smaller image in use.

Don't make edits to the live theme. Make a copy and do the edits in there. That way if you break something the live storefront is effected.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
Diego2
New Member
4 0 0

Hi Jason,

Thank you for your reply! I have tried the above modifications and unfortunately I could not get it to work. Could prior modifications cause this not to work? 

 

Here's my code; 

{% assign limit = section.settings.grid | times: section.settings.rows %}

{% paginate collection.products by limit %}

{% include 'breadcrumb' %}

{% assign has_sidebar = false %}
{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}

<div class="grid grid-border">

  {% if has_sidebar %}
  <aside class="sidebar grid-item large--one-fifth collection-filters" id="collectionFilters">
    {% include 'collection-sidebar' %}
  </aside>
  {% endif %}

  <div class="grid-item{% if has_sidebar %} large--four-fifths grid-border--left{% endif %}">

    {% comment %}
      Different markup if description is set
    {% endcomment %}
    {% if collection.description != blank %}
      <header class="section-header">
        <h1 class="section-header--title h1">{{ collection.title }}</h1>
        <div class="rte rte--header">
          {{ collection.description }}
        </div>
      </header>
      <hr{% if has_sidebar %} class="hr--offset-left"{% endif %}>
      <div class="section-header">
        <div class="section-header--right">
          {% include 'collection-sorting' %}
          {% include 'collection-views' %}
          {% include 'toggle-filters' %}
        </div>
      </div>
    {% else %}
    <header class="section-header">
      <h1 class="section-header--title section-header--left h1">{{ collection.title }}</h1>
      <div class="section-header--right">
        {% include 'collection-sorting' %}
        {% include 'collection-views' %}
        {% include 'toggle-filters' %}
      </div>
    </header>
    {% endif %}

    <div class="grid-uniform">
    {% case section.settings.grid %}
      {% when '2' %}
        {%- assign grid_item_width = 'medium--one-half large--one-half' -%}
        {%- assign image_size = '100x100' -%}
      {% when '3' %}
        {%- assign grid_item_width = 'small--one-half medium--one-third large--one-third' -%}
         {%- assign image_size = '100x100' -%}
      {% when '4' %}
        {%- assign grid_item_width = 'small--one-half medium--one-quarter large--one-quarter' -%}
        {%- assign image_size = '100x100' -%}
      {% when '5' %}
        {%- assign grid_item_width = 'small--one-half medium--one-fifth large--one-fifth' -%}
        {%- assign image_size = '100x100' -%}
      {% endcase %}

      {% for product in collection.products %}
        {% comment %}
        {% if has_sidebar %}
          {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
        {% else %}
          {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
        {% endif %}
        {% endcomment %}
        {% include 'product-grid-item' with grid_item_width %}

      {% else %}

        <div class="grid-item">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>

      {% endfor %}

    </div>

  </div>

  {% if paginate.pages > 1 %}
  <div class="grid-item pagination-border-top">
    <div class="grid">
      <div class="grid-item{% if has_sidebar %} large--four-fifths push--large--one-fifth{% endif %}">
          <div class="text-center">
            {% include 'pagination-custom' %}
          </div>
      </div>
    </div>
  </div>
  {% endif %}

</div>

{% endpaginate %}

{% schema %}
  {
    "name": "Collection",
    "class": "collection-template-section",
    "settings": [
      {
        "type": "select",
        "id": "grid",
        "label": "Products per row",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          }
        ]
      },
      {
        "type": "select",
        "id": "rows",
        "label": "Rows per page",
        "default": "6",
        "options": [
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          },
          {
            "value": "7",
            "label": "7"
          },
          {
            "value": "8",
            "label": "8"
          }
        ]
      },
      {
        "type": "radio",
        "id": "collection_sidebar_filters",
        "label": "Sidebar product filters",
        "options": [
          {
            "value": "tags",
            "label": "By tag"
          },
          {
            "value": "groups",
            "label": "By group"
          }
        ],
        "info": "[Learn how to set up filter groups](https:\/\/\/docs.shopify.com\/manual\/more\/official-shopify-themes\/supply#enable-group-filtering)."
      },
      {
        "type": "checkbox",
        "id": "product_show_compare_at_price",
        "label": "Show compare at price",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "product_show_saved_amount",
        "label": "Show saved amount",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "product_reviews_enable",
        "label": "Enable product reviews",
        "info": "Install the free Shopify [Product Reviews](https:\/\/apps.shopify.com\/product-reviews) app to add product reviews."
      }
    ]
  }
{% endschema %}

 

0 Likes
Diego2
New Member
4 0 0

Hi Tim,

More than 5 products per row would be ideal. Would you be able to walk me through step-by-step on how to accomplish this? Thank you in advance! 

-Diego

0 Likes
tim
Shopify Expert
2926 143 1021

Ok, let's add 6?

First, you find this part

{% when '5' %}
        {%- assign grid_item_width = 'small--one-half medium--one-fifth large--one-fifth' -%}
        {%- assign image_size = '100x100' -%}
      {% endcase %}

And add another option right above the {% endcase %} (just don't duplicate the {%endcase %} itself:

{% when '6' %}
        {%- assign grid_item_width = 'small--one-half medium--one-third large--one-sixth' -%}
        {%- assign image_size = '110x110' -%}
      {% endcase %}

Note that image_size does not really affect how much space the image will take on the screen, it affects the quality of the image and file size. 

Now we need to add new option under (% schema %} so we can choose it in the Theme->Customize->Collection. Locate the following piece of code there:

        "label": "Products per row",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          }
        ]

and add a new choice, so it looks like:

        "label": "Products per row",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          },
          {
            "value": "6",
            "label": "6"
          }
        ]

Save, then go to Customize for the opportunity to select 6 products per row.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
btmar
Tourist
11 0 1

Hey Tim, you sent me here from another thread.

Question about your last line if you don't mind...

"Save, then go to Customize for the opportunity to select 6 products per row."

I don't see where I have the ability to make those changes under "Customize Theme," any suggestions? 

0 Likes
tim
Shopify Expert
2926 143 1021

From my first post in this thread:

To see the collection display options you have to actually navigate to a collection in the right pane, then you will have Collection  in the left pane where you will be able to change the number of products per row.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
AsiaSell1
New Member
4 0 0

Hi. I have the same question for Pop theme, but I don't know how to start a new topic. Could I please have help with both reducing the collection size to about 6 per row and about how to start a topic. I currently have 28 collections. Thank you.

Website is https://asiasell.com.au/

0 Likes
freshair
Tourist
3 0 2

I was recently chatting with Shopify and they sent me this thread chain! I am trying to make my collection list images smaller as they currently take up the whole screen. Ive inclued the section in the themes (BOOST) code where i copy and pasted the code you had provided but i did not see any changes. I am hoping you can possibly shed some insight?

 Screen Shot 2021-07-07 at 9.22.23 AM.pngScreen Shot 2021-07-07 at 9.23.03 AM.png

0 Likes