Liquid, JavaScript, themes, sales channels
Hi all,
site: https://lemonsagedesigns.com
I've just spent the last two hours researching what code is needed to do this simple action and nothing is working. Before I get to the point of slinging my laptop out the window I figured I'd post a plea for help. I know there are already several posts about this exact topic but none of the code in any of those posts work for me. I want to remove the collection title from the collection image, and ideally, add it below the image but if needed I'll just change the photos to include the title. Screenshot below. I've also listed the codes I already tried. I added it to the theme.css.liquid file, collection-list.liquid file, and even tried editing the collection.liquid file. I checked my store each time I made a change and when it didn't work reverted the file to how it was previously. I have also tried the below codes with !important and with various h1, h2, etc.
.collection-grid-item__title { display: none; }
.collection-hero__title { display: none; }
.collection-collage__item-wrapper .collection-grid__item-overlay::after{background-color: transparent;} .collection-grid__item-title--wrapper{position: relative;}
Solved! Go to the solution
This is an accepted solution.
Can you try to add the following code to the end of theme.css file?
It should move the collection title under the image.
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px;
}
}
.collection-grid-item__title {
color: #000;
text-shadow: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
margin-top: 5px;
}
This is an accepted solution.
You can add a bit of spacing by increasing the margin-bottom value from 22px to 40px, for example
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 40px; /* tune this value */
}
This is an accepted solution.
Can you try to add the following code to the end of theme.css file?
It should move the collection title under the image.
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px;
}
}
.collection-grid-item__title {
color: #000;
text-shadow: none;
-ms-transform: none;
-webkit-transform: none;
transform: none;
margin-top: 5px;
}
@drakedev You're my hero!
This was so stupidly frustrating and you provided exactly what I needed. Putting it at the bottom of the file didn't work so I found where that code is within the file and edited it based on what you provided.
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px; } }
.collection-grid-item__title {
color: #000;
position: none;
text-align: center;
font-size: 18px;
width: 100%;
top: 50%;
padding: 0 5px;
-ms-transform: none;
-webkit-transform: none;
transform: none;
transition: none;
text-shadow: none;
hyphens: none; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }
Thank you so much!
@drakedev one thing I just noticed - on mobile the collection titles run into the image for the collection below it. Any advice on how to adjust this? I tried adjusting a few things but they didn't work.. screenshot below of what I'm talking about as well as my current code.
.collection-grid {
margin-bottom: -22px;
overflow: auto; }
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 60px; } }
.collection-grid-item__title {
color: #000;
position: none;
text-align: center;
font-size: 18px;
width: 100%;
top: 50%;
padding: 0 15px;
-ms-transform: none;
-webkit-transform: none;
transform: none;
transition: none;
text-shadow: none;
hyphens: auto; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }
This is an accepted solution.
You can add a bit of spacing by increasing the margin-bottom value from 22px to 40px, for example
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 40px; /* tune this value */
}
All you really have to do, I found out, is add:
"VISIBILITY: HIDDEN"
to the bottom of the code under theme.css in your Assets {/} folder.
Here's an example from my store code:
collection-grid-item__title {
color: transparent; opacity: 10%
text-shadow: transparent white;
-ms-transform: none;
-webkit-transform: none;
transform: none; opacity: 10%
margin-top: 5px;
VISIBILITY: HIDDEN
}
it worked for me with the "Debut" theme.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024