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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024