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

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

Okyns
Tourist
12 1 1

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?

Replies 9 (9)

DelightCart
Shopify Partner
1264 83 157

@Okyns Can you please send me your store url?

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.

Denishamakwana
Shopify Partner
1408 173 231

Welcome to shopify community.

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

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on [email protected] | Shopify Design Changes | Custom Modifications In to Shopify Theme
Okyns
Tourist
12 1 1

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
Excursionist
33 0 14

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
Visitor
2 0 1

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
Excursionist
33 0 14

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)

Cyclops1717_0-1658934283324.png

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

Cyclops1717_1-1658934422987.png

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

Cyclops1717_2-1658934484460.png

 

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:

Cyclops1717_3-1658934554998.png

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
Visitor
2 0 1
Thank You So much For Your Help but i need to hide the collection name and
then make the collection images clickable.
Cyclops1717
Excursionist
33 0 14

@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
New Member
9 0 0

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  -->