Change Layout of Collection List

[Sauravb]

Hi, I want to redesign how the collection list is looking on the website, I want to make it such that the image is shown of the collection and under the image the collection name is there and not on top of the image itself, however this is not possible to do without editing the code. Can anyone help me with a code for this please

Website: tabeerhomes.com

Theme: Impact

Collection List Link: https://tabeerhomes.com/collections

[EBOOST · Accepted solution]

Hi @Sauravb ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.css
3. Add code below to end of file

.collection-list .collection-card .content-over-media{
	display: flex;
	flex-flow: column;
}
.collection-list .collection-card .collection-card__content-wrapper .h2 {
	color: #000;
}
.collection-list .collection-card .collection-card__content:first-child {
	margin: 0;
}
.collection-list .collection-card .content-over-media::before,
.collection-list .collection-card .collection-card__content-wrapper svg {
	display: none!important;
}