how to change collection list title position

Store Design
, , , ,
1

i want to change how the collection list gets displayed.

move the text on the images to underneath and removing the overlay from the picture

https://smokefox.com

2

HI @SmokeFox

these is default order to get the collections.

If you want to display the collections on home page.
Then create a new liquid section.

add option to choose collection in blocks.

which collection you want to show first you can choose them

If need any help from my end please let me know.

3

I already am displaying on homepage.

4

Hi @SmokeFox

This is David at SalesHunterThemes.

Thank you for your question.
You can try follow this path:

Themes => edit code => asset => theme.css

and add this code to bottom of the file theme.css

.collection-grid .grid {
	    display: flex;
    flex-wrap: wrap;
}
.collection-grid .grid__item {
	float: none;
}
.collection-grid .collection-grid-item {
    padding: 0!Important;
    --opacity-image-overlay: 0;
}

.collection-grid .collection-grid-item__link {
    position: unset;
}

.collection-grid .collection-grid-item__overlay {
    aspect-ratio: 1;
    --opacity-image-overlay: 0;
}
.collection-grid .collection-grid-item__title-wrapper::before{
	display: none;
}

.collection-grid .collection-grid-item__title.h3 {
    position: unset;
    transform: none;
    color: black;
    text-shadow: none;
    font-size: 13px;
    margin-top: 16px;
}
5

Hello @SmokeFox ,

You can try to follow these steps:

Go to Online Store → Actions → Edit code

Go to Assets folder → base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.collection-item {
  text-align: center;
}

.collection-image {
  position: relative;
}

.collection-image img {
  width: 100%;
}

.collection-item h3 {
  margin-top: 10px;
}

Save and preview

Hope this can help.

Transcy

6

i do the same thing on the collections page as well?