Make featured product image/text clickable - Dawn

Store Design
,

Topic summary

Goal: Make the Featured product image and title clickable in the Dawn theme and fix layout/icon issues.

Status and issues:

  • Image and product title were already clickable. The remaining problems came from older, outdated code.
  • Problems reported: unable to place the product image on the right side; the arrow next to “View full details” disappeared.

Solution provided:

  • Add a CSS snippet to the end of base.css (Shopify Admin → Online Store → Theme → Edit code → base.css).
  • CSS details (applies on desktop, width ≥ 750px):
    • .featured-product .product__media-wrapper { order: 2 } to move the image to the right (flex order).
    • .product__view-details { display: flex !important; }
    • a.link.product__view-details { content: “->”; margin-top: 1px; margin-left: 2px; } to approximate the missing arrow (text-based, not a true icon).

Notes:

  • Screenshots were shared to illustrate the desired layout and the arrow substitute.

Outcome:

  • User confirmed the CSS worked and accepted the text arrow as sufficient. Issue resolved; no further actions pending.
Summarized with AI on December 14. AI used: gpt-5.
1

Hey so I just opened up my shopify store and I am trying to figure out how to make the image and title clickable on Featured Products.

I understand form what I read elsewhere that you have to do some coding, which I have no clue how to navigate in.

If anyone can guide me like a 5 year old to achieve it, I would really appreciate it :grinning_face_with_smiling_eyes:

Store Link Here

2

@OliverTarsa I think you have solved your issue, because image and product title is clickable

3

I did copy some older code I found on here but it seems to made some issues as it is outdated, so still figuring stuff out

4

@OliverTarsa what issue are you facing?

5

I can no longer change the product image to be on the right side

And the arrow next to “view full details” is gone

6

@OliverTarsa you want like this?

suyash1_0-1732241749965.png
suyash1_0-1732241749965.png1366×768 117 KB

7

Yes, that would be great!

Is there anything you can do about the arrow missing on the “View full details” ?

8

@OliverTarsa we can add it like this but this is not a proper icon

suyash1_0-1732242067905.png
suyash1_0-1732242067905.png1366×768 101 KB

9

Couldve thought of that, that works good enough for me.

Thank you so much! So how can I get it to look like that?

10

@OliverTarsa please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (min-width:750px){
.featured-product .product__media-wrapper{order:2}
.product__view-details{display: flex !important;}
a.link.product__view-details{content: "->"; margin-top: 1px; margin-left: 2px;}
}
11

Worked great, thank you so much again! :folded_hands: