Solved

Minimal Theme Gallery Optimisation

freedivebird
Tourist
8 0 14

Hi everyone! New shopkeeper here! First of all would like to say thanks to everyone here who have been contributing to all the guides! It has made my life much easier while figuring out the intricacies of the liquid language! 

Would just like to chip in today and return my favor to the community. For those of you who have used the default Minimal theme I am sure you will be very frustrated on how inefficient the layout is on mobile and also the gallery part of the product page. My complaint list actually goes on and on...but those are for another day as some of the deficiencies aren’t even theme specific.

Anyway, back to the original topic: how to fix the gallery! (Especially if you have lots of pics for a single product)

So. The problem with the original Minimal theme. Let's go and have a look on how it looks like on a Desktop if you have a really large product gallery:

Well, it's not perfect, the UI sort of sucks but still sort of bearable right?

Now have a look at the original Minimal Mobile interface:

Well. So that how it looks. It's all very colorful right? The only problem is its take about a day and a half for someone to scroll all the way to the bottom if you got a really large gallery or many variants.

So wouldn't it be nice if we can somehow mange to display all the thumbnails in a container that you can scroll sideways? 

To do it, you will need to:

  1. know some css and html basics
  2. happy to custom edit code for the theme

Let's get started.

References:

Creating horizontal scrolling containers the right way [CSS Grid] https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
 
The reference website here basically talks about how to create a SIDEWAYS scrolling interface using purely <ul>, <li> elements inside a <div> container, which thankfully is pretty close to what we got even with the default code in the product page! I must stress that I did NOT create the above UX guide (which is a really impressive use of CSS) and what we are doing here is only implementing the above work into the Minimal theme product gallery. Mind you, the set up is not pixel perfect, but it works! Appreciate guidance from the community on how to make it pixel perfect too so that everyone can benefit from it!

Before we go edit any code, as always let's duplicate your current theme so if there's any f___ up we can always roll back.

Now go to the the theme customise page, select "Product Pages" from the top bar, and click on "Product pages" on the left side bar, under settings, for "Product thumbnail position" > select "Below main image"

Now we'll dig into the code. In the code editor, look for Assets, and in it look for theme.scss.liquid, at the bottom of it, add the following code:

 

 

//product gallery horizontal scroll by Alan
//based on https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585

{% assign product_gallery_gutter = "4px" %}
{% assign product_gallery_number_of_columns = "4" %} //<<change this to the desired number of columns of thumbs

.product_gallery_app {
  unset: all;
  padding: {{product_gallery_gutter}} 0;
  display: grid;
  grid-gap: {{product_gallery_gutter}} 0;
  grid-template-columns: {{product_gallery_gutter}} 1fr {{product_gallery_gutter}};
  align-content: start;
  
}
.product_gallery_app > * {
  grid-column: 2 / -2;
}
.product_gallery_app > .full {
  grid-column: 1 / -1;
}
.product_gallery_hs{
  padding-left:15px;
  display: grid;
  grid-gap: calc({{product_gallery_gutter}} / 2);
  grid-template-columns: 10px;
  grid-template-rows: minmax(100px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc(calc(100% / {{product_gallery_number_of_columns}}) - {{product_gallery_gutter}} * 2);
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * {{product_gallery_gutter}});
  margin-bottom: calc(-.25 * {{product_gallery_gutter}});
}
.product_gallery_hs::before, .product_gallery_hs::after {
  content: '';
  width:10px;
}
.product_gallery_hs > li, .product_gallery_item {
  width: 100%;
  scroll-snap-align: start;
  padding: calc({{product_gallery_gutter}} / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 0px;
}
.product_gallery_app ul {
  list-style: none;
  padding: 0;
}

 

 

You can edit this file later to change the product_gallery_number_of_columns to your desired number. But 4 is good to me.

Remember to hit save once your are done!

 

Next, look for product-template.liquid under Sections. In an unmodified product-template page, we should be looking at about line 72. Look for 

 

 

          {% if product.images.size > 1 %}

            <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                  <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>

          {% endif %}

 

 

 

We just gonna modify some code here, we are not changing the top line and the bottom line, just the code in between. We will be adding a <div> container, and add some classes to the <ul> and <li> elements:

 

          {% if product.images.size > 1 %}
{% comment %} sideway scroll mod begins {%endcomment%}
          	<div class="product_gallery_app">
               <ul class="product_gallery_hs product_gallery_full product-single__thumbnails grid-uniform" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="product_gallery_item grid__item wide--one-quarter large--one-third medium-down--one-third">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </div>
{% comment %} end sideway scroll mod {%endcomment%}
          {% endif %}

 

Hit save.

And voila! Now have a look. This is how it looks on Desktop.

And this is how it looks on Mobile. See how much better the interface is now. Takes about a day and a half less now to scroll to the bottom now I believe!

I hope you have all found this helpful!! Happy modding!!

Accepted Solution (1)

Sekaja
Visitor
2 1 0

This is an accepted solution.

Thank you so much for this man! Been pulling my hair out for ages trying to find a solution for this! really easy and simple to follow as well

View solution in original post

Replies 18 (18)

michii
Visitor
1 0 0

Thanks so much for this!! Been looking how to do this for quite some time now.

emad_assadi
Tourist
9 0 4

Wow this was incredibly helpful and easy to follow.

Is there a way to add a slider function to the main image, especially for mobile? So that people won't have to click/tap on each individual picture.

Thank you and best wishes,

 

Emad

freedivebird
Tourist
8 0 14

Hi Emad. Glad you liked it!

For the main page...are you referring to the product page? You mean instead of the current setup, just to have a giant slider with the pic in it? 

emad_assadi
Tourist
9 0 4

Yes I'm referring to the product page. And yes basically a giant slider. The current setup cleaned up the thumbnails underneath the product image, but you have to click each thumbnail individually to get a better look.

I'm happy with the result so far, but a slider could be quite convenient for mobile users since there is no lightbox in mobile view.

freedivebird
Tourist
8 0 14

Yeah I see your point. It would make a lot of sense for the UX. Not sure if I could manage to pull this off by myself. Actually I am trying to implement Slick gallery into my theme now...if I succeed at that then it would be possible. Keep you posted. 🙂

emad_assadi
Tourist
9 0 4

Thank you. Good luck!

yumiandkora
Visitor
2 0 2

Thanks so much for this! I've been searching for forever how to clean up my product gallery without lots of coding knowledge - this is PERFECT! 

If you have different product image sizes, like me, here's a tip to make the product thumbnails square and uniform in size:

Under product-template.liquid, I changed this:

<img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">

to this:

<img src="{{ image.src | img_url: '140x140', crop: 'center' }}" alt="{{ image.alt | escape }}">

The 140x140 could be adjusted to whatever size you'd like. The 'center' crop takes the center of each image for your thumbnail. Hope this helps others with different image sizes!

8ttomarket
Tourist
6 0 1

Hi there

i have pictures in different sizes, used your code and it worked!! 

I'd like to have all pictures in the thumbnails to be scaled down proportionally, do you know what can i change to achieve that?

thank you

Alice

 

freedivebird
Tourist
8 0 14

Scaled down proportionally - mind being more specific? Do you mean scaling the pictures further down for data conservation or otherwise? A few pictures would help.

KADOO
Visitor
2 0 0

@freedivebird thank you so much for this code info!  Really helpful. Although I have 2 more questions:

1. Is there a way to align the main photo above with the slider on the bottom ? I wonder where to add the align code in this? see attached photo below.

Our main photo is not aligned with the bottom slider thumbnails. 

Screen Shot 2021-01-07 at 5.22.45 PM.png

 

2. Is there any ways to add arrows outside of the slider box? these two arrows : < and > outside the slider thumbnail box - just for our customers who don't know how to use the slider. Any thoughts on adding the arrow in the code? 

Thank you,

KADOO

 

poutacreative
Excursionist
18 0 11

Is this something that could be implemented to Narrative theme also?

freedivebird
Tourist
8 0 14

The feature you are asking for would involve implementing one of the sliders scripts. I had a look earlier at those but haven’t got the time around to fully implement those - let you know when I have any luck! 

Sekaja
Visitor
2 1 0

This is an accepted solution.

Thank you so much for this man! Been pulling my hair out for ages trying to find a solution for this! really easy and simple to follow as well

Jonidag
Visitor
1 0 0

I tried this coding and although it works fine now the main image is so large that it doesn'y fit on the screen(mobile and desktop as well). How can I fix this?

diego_ezfy
Shopify Partner
2935 562 883

for @Jonidag and everyone else who come across this issue:

I wrote a tutorial about how to fully optimize the Minimal theme gallery. It teaches you how to add a slideshow to the product page which includes swiping feature, arrows, lazyload (makes the page loads faster), and much more - actually 20+ customizable features are included.

You can click here to read the tutorial and download the code. I'll be happy to answer any questions!

Kind regards,

Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

19nyte
Tourist
6 0 2

Tried to do it but the code in the minimal theme has changed. How am I able to do it now?

koze
Excursionist
19 2 5

Sorry for boosting an old post back but I'm also looking for answers to this.

 

Since minimal had a new update can't seem to get past the last part as I'm met with a syntax error.

 

Any help is appreciated.

Purgatory
Visitor
1 0 0

Anyone successfully add arrows to this? Or any other navigation element to make it obvious it's a slider?