Dawn Theme - Homepage Images not clickable

thefourthplace
Excursionist
25 0 2

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?

Replies 4 (4)
Zworthkey
Shopify Partner
2571 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
thefourthplace
Excursionist
25 0 2

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

thefourthplace
Excursionist
25 0 2

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.

thefourthplace
Excursionist
25 0 2

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.