How can I make homepage images clickable in the Craft theme?

[Okyns]

Hi!

I am using the Craft theme.
I want to make sure that the images (slideshow, multi-column,image banner, etc.) on my homepage are clickable. Can you help with a code edit that will work on both mobile and desktop?

[DelightCart]

@Okyns Can you please send me your store url?

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

[Okyns]

Hi!

I made the necessary changes to make the images clickable.
The only problem is:
The slideshow was clickable on mobile but not on desktop.

My store address : www.oceanhometextile.de

[Cyclops1717]

Hey @Okyns ! If you still need a solution, I might be able to help (I just ran into this problem myself and post my solution to a few other threads).

[Sawera]

Can You Please Help me out how you made your collection images clickable i am also using the same craft theme

I saw your store and need to do the same exact thing with my store

[Cyclops1717]

Hi @Sawera ! 

Collection images should be clickable without any fancy code.

I might be simplifying it too much, but hopefully that will help you:

• I assume you already have Collections created, under Product / Collections
• I also assume you have Products listed for each of these Collections

Go to Online Store / Customize, then select Home Page (it's probably selected by default)

On the left-hand side, in the Menu, click on "Add section", then select "Collection List"

You should now see this, in the left-hand side Menu:

Click on the first "Collection" in that list.

On the right-hand side, you will be able to select which collection you want to show:

Click the "Select collection" button, then select your collection.

In the middle of your screen, in the preview section, you will now see the Collection you selected and the picture associated with that Collection (assuming you added a picture for the Collection when you created it).

Repeat the process to list all the collections you want to show on your homepage.

Shopify will automatically embed a link to the Collections you are listing in the pictures. 🙂

What could go wrong:

• You don't have a picture associated with the Collection
  • Solution: Go back to Products/Collection and update your Collections so they have pictures.

Also, if you need to update how the Collections are displayed, click on "Collection List" to open up a menu on the right hand side. That will allow you to change a lot of the features (e.g. how many columns to display, your background color, the size of hte heading and image ratio...).

It might take a bit to tinker with it, but at least you know where to go.

I hope this help!

[Sawera]

Thank You So much For Your Help but i need to hide the collection name and
then make the collection images clickable.

[Cyclops1717]

@Sawera One option is to hide the Collection name using CSS. If you are comfortable with editing code, that should be simple enough (change the text color to match your background. e.g. :

color: #fff! important; 

Keep in mind this might also affect other pages, unless you limit this code to the Homepage. Downside is the container still exists and you will have a blank space under your image.

Another option is to hide the container h3.card__heading itself.

If all of this sounds like gibberish, you probably should not mess with the code and need professional help.

[paccto]

make this:

<!--on //coponent-card.css// replace absolute property with fixed  :

like above code:-->

.card__heading a::after {
bottom: 0;
content: '';
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}

<!--on //base.css// copy and paste under code at bottom file:-->

.collection-list .card__content {
height: 0
}

.collection-list a.full-unstyled-link {
opacity: 0;
}

<!--  enjoy  -->