Atlantic Theme - Move text below collection image

Store Design
,
1

Hi there,

I need help to move the text of the collection below the collection image. I also do not want the grey shadow over the images. So I basically need the image with the collection name below it.

Store url: https://www.carlohayesdesigns.com/

2

Hi @yodendaal ,

You can follow these steps to make the effect

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

.featured-collections .collection-wrap {
	overflow: visible;
}

.featured-collections .collection-wrap .collection {
	overflow: visible;
}

.featured-collections .collection-wrap .collection .label {
	color: #000;
    position: relative;
    top: 400px;
}

.featured-collections .collection-wrap .collection a {
	position: static;
}

.featured-collections .collection-wrap .collection .collection-overlay .browse {
	display: none;
}

#shopify-section-cf1d99c5-eda0-4877-b77c-64eef5eb9c14 .featured-collections .collection-wrap .collection .label {
    top: 1020px;
}

Here is the result

BSSTekLabs_0-1720971603869.png
BSSTekLabs_0-1720971603869.png2874×1614 496 KB

BSSTekLabs_1-1720971623080.png
BSSTekLabs_1-1720971623080.png2878×1616 562 KB

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

1 Like
3

Hi there,

I pasted the code in the theme.css.liquid file but nothing is changing on my end. The image that you shared is exactly what I want it to look like.

Thanks!

4

Hi @yodendaal ,

You can open theme.liquid file and paste into this code snippet right before the closing head tag

BSSTekLabs_0-1721019439535.png
BSSTekLabs_0-1721019439535.png1919×950 131 KB

Hope this will help you resolve your issue!

1 Like
5

Hi there, this solution works for desktop view but now the mobile view is totally mixed up. Please assist with the code for mobile to move text below images. Thanks

6

HI @yodendaal ,

You can use this code to make the above effect work on mobile

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

1 Like
7

Thank you! It works!!