Minimal Theme Gallery Optimisation

Solved
freedivebird
Tourist
7 0 7

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!!

michii
New Member
1 0 0

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

0 Likes
emad_assadi
Tourist
4 0 0

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

0 Likes
freedivebird
Tourist
7 0 7

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? 

0 Likes
emad_assadi
Tourist
4 0 0

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.

0 Likes
freedivebird
Tourist
7 0 7

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
4 0 0

Thank you. Good luck!

0 Likes
yumiandkora
New Member
2 0 0

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!

0 Likes
KADOO
New Member
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

 

0 Likes
poutacreative
Excursionist
18 0 7

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

0 Likes