Dawn Theme - Homepage Images not clickable

thefourthplace
Explorer
52 0 46

I have been moving my main website thefourthplaceforgeeks.com from Squarespace 7.0 to Shopify 2.0 (Dawn). Mostly I am happy, but there are a few things that don't seem ready for prime time.

One big gripe is that very few blocks with images are clickable, which seems like ecommerce 101.

On my home page, I am using the following elements with images:

"Image with Text"
"Multicolumn"
"Image Banner"

Surprisingly, none of these make the images clickable. That's a lot of screen real estate that isn't interactive, especially for an ecommerce site.

Has anyone successfully updated the theme to make the images clickable, either configurable or matching the button in the section? Is there a way to ask the theme engineers to update this?

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
Replies 5 (5)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @thefourthplace 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

thefourthplace
Explorer
52 0 46

Sorry, I meant to include the URL! http://thefourthplaceforgeeks.com especially the home page!

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
thefourthplace
Explorer
52 0 46

I did find a post with a solution for Multicolumn elements, so those are now clickable on my site. I like that it makes the section/block configurable.

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
thefourthplace
Explorer
52 0 46

I have successfully added a configuration item to at the Section level to "Image with text" which sets a URL, and Liquid to insert the start and end tags of the link around the image.

Unfortunately, when this is active, the image doesn't scale to fit the area anymore.

 

Screen Shot Without Link:

Screen Shot 2021-11-12 at 4.39.56 PM.png

 

Screen Shot with Link:

Screen Shot 2021-11-12 at 4.41.05 PM.png

I suspect this has to do with the fact that I have the following in my component-image-with-text.css:

 

 

 

.image-with-text__media img {
    object-fit: contain;
}

 

 

 

And/or that linking the image changes the relative nesting of elements.

 

Update: I resolved this by directly including a style element in the IMG tag that forced height/width to fit the container.

Ian Struckhoff
The Fourth Place
https://thefourthplaceforgeeks.com
maxrichter
Excursionist
14 1 10

Which post? I'm having the same problem.