Re: Removing image placeholders/spaces from collection pages

Solved

Removing image placeholders/spaces from collection pages

Jackie94
Explorer
46 1 14

Hi 

I am using the Simple Theme for my store but my products do not have photos. How can I remove the placeholders/space saved for product images on the collection pages and how can I view them as a list rather than a grid format of rows of 4 products. 

This is how it looks:

collection.png

I ideally would just have all these product names in a single vertical list with no photo spaces.

Thanks!

Jackie

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12366 2558 3743

This is an accepted solution.

@Jackie94 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-collection .grid-link__image--loading { 
display: none;
}

 

Hope this works.

 

Cheers!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 15 (15)

dmwwebartisan
Shopify Partner
12366 2558 3743

@Jackie94 

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jackie94
Explorer
46 1 14
dmwwebartisan
Shopify Partner
12366 2558 3743

This is an accepted solution.

@Jackie94 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-collection .grid-link__image--loading { 
display: none;
}

 

Hope this works.

 

Cheers!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12366 2558 3743

@Jackie94 

For the list on the collection page. Add the following code.

@media only screen and (min-width: 769px){
.template-collection .large--one-quarter {  width: 100% !important; }
}
@media only screen and (max-width: 768px){
.template-collection .medium-down--one-half {  width: 100% !important; }
}

 

Hope this helps.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jackie94
Explorer
46 1 14

Both of those worked perfectly thank you so much! I wish I could code 😄

Jackie94
Explorer
46 1 14

Actually one more thing - can you also remove the photo space from the product page?

dmwwebartisan
Shopify Partner
12366 2558 3743

@Jackie94 

Please add the following code for product page.

@media only screen and (min-width: 769px){
.template-product .post-large--one-half { width: 100% !important;}
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Jackie94
Explorer
46 1 14

Perfect

Jackie94
Explorer
46 1 14

Hi!

I think this really is the last thing that I didn't spot earlier! How can I remove the photo spaces/placeholders from the dynamic recommendations?

Thanks!

dmwwebartisan
Shopify Partner
12366 2558 3743

@Jackie94 

You can add the following code.

.product-recommendations .grid-link__image-centered{
display: none;
}

 

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12366 2558 3743

@Jackie94 

When I tried to open your URL. It shows your shop is not available. Please provide your shop URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
shopcami
Explorer
49 0 18
dmwwebartisan
Shopify Partner
12366 2558 3743

@shopcami 

Can you provide a screenshot?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
shopcami
Explorer
49 0 18

shopcami_2-1620793375303.png

 

shopcami_3-1620793378662.png

 

Here you go!

 

 

shopcami
Explorer
49 0 18

Hello, thank you for those! Do you know how I can do the same thing on the home page?

www.printmylabel.ca password camishop