How to Center Product Thumbnails? (Canopy) ...and I thought it would be easy!

[McWebbyface]

THEME: Canopy

Hey there... I really hope someone reading this can help me out - I am looking to tweak the Product page layout to work better for my needs. My product images are rectangle/portrait shape, with just 2 images per product. So having the product thumbnails aligned to the left below the main product image in empty space looks a bit odd. Therefore I would love some help in figuring out how to center the thumbnails to the main product image please?

Example Canopy theme page showing thumbnails aligned to the left...

https://canopy-theme-fresh.myshopify.com/products/crinkle-fries

Example mock-up of what I am trying to achieve...

So far I have tried each variation of the following code in styles.css.liquid with no luck - Was I close?

.slick-list.draggable {
justify-content: center !important;
}

.thumbnails.slick-slider--indented-side-icons.slick-slider--all-visible.slick-initialized.slick-slider {
justify-content: center !important;
}

.product-gallery.thumbnail {
justify-content: center !important;
}

.slick-slider {
justify-content: center !important;
}

.slick-slider--indented-side-icons.slick-slider--all-visible.slick-list {
justify-content: center !important;
}

[AvadaCommerce · Accepted solution]

Hi @McWebbyface ,

To change you follow the instruction:

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css->paste below code at the bottom of the file:

.product-gallery .slick-track {
    margin: 0 auto !important;
}

I hope it would help you.

[McWebbyface]

Awesome! Thank you so much 🙂 Easy when you know how eh?

[Denishamakwana]

Please add below code in bottom of assets/styles.css file

.slick-slider--indented-side-icons.slick-slider--all-visible .slick-list {

                      display: flex;

                      justify-content: center;

}

Thank you.

[Zworthkey]

@McWebbyface 

.product-gallery .slick-track {
    margin: auto !important;
}

Add this code in the bottom of the style.css