Solved

Change Layout of Collection List

Sauravb
Tourist
6 0 2

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

Accepted Solution (1)

EBOOST
Shopify Partner
835 229 256

This is an 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;
}

Collections.jpg

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Reply 1 (1)

EBOOST
Shopify Partner
835 229 256

This is an 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;
}

Collections.jpg

 

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤