Solved

How can I remove images from a collection list without changing the text?

CabinetOfCards
Tourist
4 0 3

Hello! I am trying to remove the photos from the Collection List page without removing the text from the boxes. I found this solution, https://community.shopify.com/c/shopify-design/hide-the-image-on-my-collections-page/m-p/1568357 , however it appears to only hide the image, so it still makes the cards formatted incorrectly (with the text not centered and the boxes not square).

Changing between the styles "Standard" and "Card" seems to either put the text below, or stretch out the card, as the image is still there just not displayed. Is there a way to remove the image entirely without affecting the text?


Link to collections page (password: preubu)
https://cabinetofcards.com/collections

new snap.PNG

 

For reference, here is what it looks like with the custom code added and the Theme Setting style set to "Card" (Note the collections "ADV Expansion Pack", "Miracle of the Desert", and "Rulers of the Heavens" are the only ones with products in them and thus affected). I want to make them all look like the boxes on the top (like the collections "VS Series", "Web Series", etc.) so they are uniformly square with the text centered. 

Another note: It seems the code only takes away the photo on the Collections List. Is there a way to remove it for all Collection List sections on pages as well? For example: https://cabinetofcards.com/pages/japanese-ex-era (this still shows photos)

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 739

This is an accepted solution.

Hi @CabinetOfCards,

Please add code:

.collection-list__item .card {
    display: flex;
    position: relative;
    align-items: stretch;
	flex-direction: inherit !important;
}
.collection-list__item .card:before {
    content: "";
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 9 (9)

KetanKumar
Shopify Partner
36854 3637 11976

@CabinetOfCards 

yes, please try this code

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

.collection-list-wrapper .card__inner {display: none;}
.card__content{align-items: center;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
CabinetOfCards
Tourist
4 0 3

Thank you for the reply! After adding the code (and taking out the other code from the other solution), it still seems to be showing the photos:
Doesnt seem to work.PNG
Capture.PNG

(Note, I also tried it with the other code from the other solution, but it still appeared the same as the photo from my first post)

LitCommerce
Astronaut
2860 684 739

Hi @CabinetOfCards,

Go to Assets > base.css and paste this at the bottom of the file:

.collection-list__item .card__inner {
    display: none !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
CabinetOfCards
Tourist
4 0 3

Thank you for the response and code! It seems to get rid of the images and doesn't have the same issue as the first image I showed. However, it seems like if all the collections in the row have products, it reduces the size of the card (see photo below -- this can be seen on mobile view). Not sure, but is there a way keep them all uniform (like all as square tiles of the same size) even if the other collections in the row have products in them?
reduced size.PNG

Here is a link to a page where you can see it: https://cabinetofcards.com/pages/japanese-ex-era
(the top row of this page has products, the bottom row does not)

LitCommerce
Astronaut
2860 684 739

This is an accepted solution.

Hi @CabinetOfCards,

Please add code:

.collection-list__item .card {
    display: flex;
    position: relative;
    align-items: stretch;
	flex-direction: inherit !important;
}
.collection-list__item .card:before {
    content: "";
    width: 0;
    height: 0;
    padding-bottom: var(--ratio-percent);
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
CabinetOfCards
Tourist
4 0 3

Thank you so much this worked!

1RSRV
Visitor
1 0 0

Hi, this works great, however my description text doesn't show now. Is there any way I can remove the image but keep the description text like it is in 'Accessories'

 

See below 

 

ThanksCapture.PNG

KetanKumar
Shopify Partner
36854 3637 11976

@CabinetOfCards 

yes, please add this code

.collection-list__item .card__inner {
    display: none;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
BaselSayed
Visitor
1 0 0

How i can do the same for specific collection not all of the collections?