I use the Horizon theme and I’m trying to put a text (or image) overlay on my featured collection product images. How would I do that? My website is: superlure.store.
2 Likes
@super5 please go to customize settings and check if you have image with text or image banner section which allows you the overlay
1 Like
Basically like that just text that says “Click to view product page”.
I tried this but I don’t think it works with featured collection..
@super5 then it will need code editing, so need to go to featured products section, add overlay code with the required text
Do you want a section include image and text and button, in that the image is featured product and text will describer about your product and when user click to button they will redirect to your product that you want they go to, right?
If possible can you pls make clear more about your expect or has any demo here, then i will check and give you the solution.
@super5 this will need code editing, if you can provide me the collab access then I can do it for you
To do this, you need to customize in code, If you don’t familiar with code, you can let me know i will check and help you do it by collaborator member with your store.
You can add a text or image overlay in Horizon either through the theme settings or with a small CSS edit. First check Customize → Featured Collection to see if the section already supports overlays or badges. If not, you can add an HTML text/image container in the product-card file and position it with CSS. If you’re unsure where to place it, the theme developer can point you to the exact file.
2 Likes
Im quite unfamiliar with this, is it possible for you send an image or two as an example?
Ok I’m willing to, how do I?
I don’t really know which file it would be because theres many similar ones..
You can send to me an collaborator code access to your store, then i will make a request to your store as collaborator, you can check and accept the resquest after that.
Ok I’ve sent it to your email.
@super5 hello, is your task done?
This does not require code editing.
Horizon family theme gives you more options to configure your collection cards.
For example, you can do this:
Add a new text block to “Product card” block of your “Collection” section. Make it a first block in “product card”.
Type in text you want, set width to “Fill” and Alignment to “Center”, turn on and fine-tune “Background” (for better readability).
The text will be positioned before product image:
To make text overlay product image, paste this code to the “Collection” section “Custom CSS” setting:
.product-card__content > .text-block:first-child {
position: absolute;
z-index: 2;
}
You’d need to repeat these steps for search results display or for each collection template if you have several if you want the message there.
Yes, code edit will do this once and for all, but would make future theme updates more complex.
1 Like
@tim_1 thank you for the info, its really great functionality
1 Like