Shopify themes, liquid, logos, and UX
Hi guys,
I have added a new page with some collections that I am wanting to use as PPC landing page. I got the instructions here https://help.shopify.com/en/themes/customization/collections/featuring-collections-using-link-lists
This worked really well. I just want to know how I can add text overlay to the images for the collection titles and remove the collection titles that appear below the collection images so the collection images look the same as my home page that has in-bedded text overlay on the collection images.
Thanks very much.
Bolsta
Hello bolsta,
Can you share your site url so that i can check and let you know?
h3.collection-grid-item__title { display: none; }
Thanks mate. I think I didn't explain myself very well.
here is the link of the page in mention https://detectorsdirect.com.au/pages/waterproof-gold-metal-detectors-1
I'm hoping to remove the text below the collection images and then replace that text with a text overlay on the images so it looks the same as the collection images on the home page. Sorry for the confusion
Hello bolsta,
Ok now Add this css at bottom of Online Store-> Themes -> Edit code->Assets->theme.scss.liquid
#MainContent .collection-grid__item-title { position: absolute; top: 50%; left: 0; right: 0; } #MainContent .text-center { position: relative; } .collection-grid__item-title .collection-item__title { color: #fff; font-size: 24px; font-weight: 600; }
THANK YOU!! mate, you are such a legend. it worked beautifully. thanks again. Bolsta
Sorry man, one more thing, its not working on mobile. the text is not staying within the picture frame. Anything I can do? Thanks heaps mate
the home page collection images are responsive but not on the other page.
@bolsta wrote:Sorry man, one more thing, its not working on mobile. the text is not staying within the picture frame. Anything I can do? Thanks heaps mate
Text size for mobile add this css in bottom
@media only screen and (max-width: 767px) {
.collection-grid__item-title .collection-item__title { font-size: 14px;
}}
THANK YOU!!
@oscprofessional wrote:Hello bolsta,
Add this css at bottom of Online Store-> Themes -> Edit code->Assets->theme.scss.liquid
This will remove collection title.h3.collection-grid-item__title { display: none; }
Hi -- I have the same question and do not see the theme.scss.liquid in the assets folder. Do I need to add it?
path for theme.css
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
share the screenshot
Hi, I have the same question. Underneath assets I have: theme-editor.js
Any help would be very much appreciated, thank you 🙂
Share your issue URl with us...
Hi! Were you ever able to get an answer? I am having the same issue and am looking for a solution.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024