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

Store Design
1

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/post/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
new snap.PNG1724×836 27.5 KB

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)

2

@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;}
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
Doesnt seem to work.PNG1670×814 228 KB

Capture.PNG
Capture.PNG771×546 55.9 KB

(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)

4

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!

5

@CabinetOfCards

yes, please add this code

.collection-list__item .card__inner {
    display: none;
}
6

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
reduced size.PNG1302×775 12.9 KB

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)

7

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!

8

Thank you so much this worked!

9

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

Thanks

Capture.PNG
Capture.PNG912×553 21.5 KB

10

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