How can I adjust the size of product cards on a specific collections page?

sweetstash · ‎01-30-2024

I made a special collections page for a specific product that has very small images (112 px x 112 px). After much playing around, I finally was able to get the images to stay their original pixel size by changing the CSS code (not in the actual code, but at the bottom of the customize page where you can enter CSS code changes. Now I want to change the product cards to make them smaller only for that collection page. Does anyone know how to do this? Here is the page in reference: https://www.crossstitchboutique.com/collections/mill-hill-beads

Would love to get the images centered too... but if I can't, I will take this over the HUGE blown up completely blurry images before.

ThePrimeWeb · ‎01-31-2024

Hey @sweetstash,

You are full of brain teasers haha.

I think I managed to fix it. You'd have to test and see. 😊

Please delete all the code added previously, refer to the screenshots if you are unaware of where it starts and ends.

Replace them with this.

I need you to go to the theme.liquid file again, this time scroll all the way down and look for the tag "</body>" (It should be the 2nd last line)

Once you find it, add the following code directly ABOVE the </body> tag

<script>
var breadcrumbElements = document.querySelectorAll('.breadcrumbs a');

breadcrumbElements.forEach(function(element) {
    if (element.textContent.includes('Mill Hill')) {
        document.body.classList.add('beads-category');
    }
});
</script>

Screenshot for reference

Then, scroll back to the top and add the following code BELOW the '<head>' tag.

<style>
body.beads-category .card__inner.ratio {
    max-height: 22vh;
}

body.beads-category .card__badge {
    justify-self: center !important;
}

body.beads-category .product.product--small.product--left.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet media-gallery slider-component {
    min-height: 50vh;
    width: 100%;
}

body.beads-category .product.product--small.product--left.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet media-gallery slider-component ul {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 115px;
}

body.beads-category product-recommendations.related-products.page-width.section-template--16545556430999__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded ul li {
    width: 115px;
    min-width: 0;
    max-width: 115px;
}

body.beads-category .card__media img.motion-reduce {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.beads-category .card:hover .media.media--hover-effect>img:first-child:only-child, 
body.beads-category .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: translateX(-50%) scale(1.03) !important;
}

body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
    width: 20rem !important;
    min-width: 20px !important;
    max-width: 22rem !important;
    max-height: 32rem !important;
}

body.beads-category ul#product-grid {
    gap: 10px !important; 
}

@media only screen and (max-width: 768px) {
    body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
        width: 15rem !important;
    }
}
</style>

Screenshot for reference

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-30-2024

Hey @sweetstash,

Can you check if you like this? 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card__media img.motion-reduce {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.card:hover .media.media--hover-effect>img:first-child:only-child, 
.card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: translateX(-50%) scale(1.03) !important;
}

li.grid__item.scroll-trigger.animate--slide-in {
    width: 20rem !important;
    min-width: 20px !important;
    max-width: 22rem !important;
    max-height: 32rem !important;
}

ul#product-grid {
    gap: 10px !important; 
}

@media only screen and (max-width: 768px) {
    li.grid__item.scroll-trigger.animate--slide-in {
        width: 15rem !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sweetstash · ‎01-31-2024

@ThePrimeWeb That works wonderful! Thank you. But... it does it to all of my pages. The rest of my products have nice large images. It's just this one manufacturer that has crap images. So... I need all of my other pages to stay the way they were. I made a separate collection page just for these small images. Is there a way to just apply it to certain collection pages instead. I know the collection page itself has its own code file.

ThePrimeWeb · ‎01-31-2024

Hey @sweetstash,

"I know the collection page itself has its own code file" <- This wouldn't work because that file is also shared by all the collections.

But you're in luck. After thinking hard and nearly giving myself a headache, I have the answer. It's a little complicated, so do it carefully and it'll work. Please delete any of the previous code before proceeding.

I need you to go to the theme.liquid file again, this time scroll all the way down and look for the tag "</body>" (It should be the 2nd last line)

Once you find it, add the following code directly ABOVE the </body> tag

<script>
var breadcrumbElements = document.querySelectorAll('.breadcrumbs a');

breadcrumbElements.forEach(function(element) {
    if (element.textContent.includes('Mill Hill Bead Packets')) {
        document.body.classList.add('beads-category');
    }
});
</script>

Screenshot for reference

Then, scroll back to the top and add the following code BELOW the '<head>' tag. (This is what you did earlier)

<style>
body.beads-category .card__media img.motion-reduce {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.beads-category .card:hover .media.media--hover-effect>img:first-child:only-child, 
body.beads-category .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: translateX(-50%) scale(1.03) !important;
}

body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
    width: 20rem !important;
    min-width: 20px !important;
    max-width: 22rem !important;
    max-height: 32rem !important;
}

body.beads-category ul#product-grid {
    gap: 10px !important; 
}

@media only screen and (max-width: 768px) {
    body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
        width: 15rem !important;
    }
}
</style>

Screenshot for reference

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sweetstash · ‎01-31-2024

@ThePrimeWeb you are spectacular, wonderful, awesome! I have been struggling for many, many months trying to get this fixed. I am forever grateful to you. This worked beautifully! Thank you! You don't know how much I appreciate the time you put out to help me.

I am so sorry to do this... but I have two other collection pages under the Beads menu that are the same. (mill-hill-collection is the template page) They use the same page template... and I don't understand code at all... but they didn't change. I don't understand what you did, so I don't know how to apply to those collection pages (even though they use the same page template).

Since I have you... I have one more problem associated with these products. If you click on one of the beads and open the product page... look at the image. It's scaled way up to fit the image space and terrible looking. I don't want to change all my product pages, but I need the product page template I made for these to just display the image at original size. Is this impossible? (mill-hill is the product page template).

Again, thank you so much.

ThePrimeWeb · ‎01-31-2024

Hey @sweetstash,

You are full of brain teasers haha.

I think I managed to fix it. You'd have to test and see. 😊

Please delete all the code added previously, refer to the screenshots if you are unaware of where it starts and ends.

Replace them with this.

I need you to go to the theme.liquid file again, this time scroll all the way down and look for the tag "</body>" (It should be the 2nd last line)

Once you find it, add the following code directly ABOVE the </body> tag

<script>
var breadcrumbElements = document.querySelectorAll('.breadcrumbs a');

breadcrumbElements.forEach(function(element) {
    if (element.textContent.includes('Mill Hill')) {
        document.body.classList.add('beads-category');
    }
});
</script>

Screenshot for reference

Then, scroll back to the top and add the following code BELOW the '<head>' tag.

<style>
body.beads-category .card__inner.ratio {
    max-height: 22vh;
}

body.beads-category .card__badge {
    justify-self: center !important;
}

body.beads-category .product.product--small.product--left.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet media-gallery slider-component {
    min-height: 50vh;
    width: 100%;
}

body.beads-category .product.product--small.product--left.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet media-gallery slider-component ul {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 115px;
}

body.beads-category product-recommendations.related-products.page-width.section-template--16545556430999__related-products-padding.isolate.scroll-trigger.animate--slide-in.product-recommendations--loaded ul li {
    width: 115px;
    min-width: 0;
    max-width: 115px;
}

body.beads-category .card__media img.motion-reduce {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

body.beads-category .card:hover .media.media--hover-effect>img:first-child:only-child, 
body.beads-category .card-wrapper:hover .media.media--hover-effect>img:first-child:only-child {
    transform: translateX(-50%) scale(1.03) !important;
}

body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
    width: 20rem !important;
    min-width: 20px !important;
    max-width: 22rem !important;
    max-height: 32rem !important;
}

body.beads-category ul#product-grid {
    gap: 10px !important; 
}

@media only screen and (max-width: 768px) {
    body.beads-category li.grid__item.scroll-trigger.animate--slide-in {
        width: 15rem !important;
    }
}
</style>

Screenshot for reference

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sweetstash · ‎01-31-2024

@ThePrimeWeb It worked! Thank you so very, very much. Like I said, I have been struggling with this for months, asked so many times for help... I really, really appreciate you and you taking the time to fix my issue. I cannot thank you enough.