Shopify slideshow button

Store Design
,

Topic summary

Goal: Make a flattened slideshow image (with a “Shop now” button baked into the graphic) link to a destination in the Spotlight theme, ideally only over the button area (similar to an image map).

What’s been proposed:

  • A developer confirms it’s possible with customization. Suggests wrapping the slideshow image in an anchor tag and using the existing button’s link value. (This would make the whole image clickable, not a specific region.)

Additional issue raised:

  • The built-in slideshow button’s position differs by device: fine on desktop, but on mobile it overlaps text. The requester asks if there’s a simple fix and which file/code to edit, noting they couldn’t find desktop/mobile-specific settings.

Context:

  • Store link shared (iowaapparelco.com). First slide contains the integrated button. An image attachment illustrates the layout.

Status/next steps:

  • No code or file paths provided yet; no resolution. Needs theme customization guidance: identify the slideshow/hero section file, add an anchor overlay or hotspot (for partial-area click), and adjust responsive CSS to fix mobile button overlap. Discussion remains open.
Summarized with AI on December 11. AI used: gpt-5.
1

I have a flattened image that I’d like to use as a slideshow image. As well as 2 more. I designed the shop now button in the image, instead of using the default button. Is there a way to link part of my image to use? I know on a basic website I can use a map link, but not sure on Shopify. Spotlight theme. Anyone help?

www.iowaapparelco.com is my store link

(first slide image only has my button integrated)

IMG_5209.jpeg
IMG_5209.jpeg1170×611 68.8 KB

2 Likes
2

Hello @One9apparelco ,

Yes it’s possible but needs customization.
What you have to do is:

  1. Wrap the image with an anchor tag.
  2. Use the existing button value with the anchor tag.

if you need help to implement it you can drop me an email to discuss further.

Regards
Guleria

3

My only problem with the built in button, is the location looks completely different from a desktop to mobile. On desktop the location is fine and not covering any of my words on the banner. On mobile, the button covers half the lettering. Is there a simple fix to that?

4

Happen to know which code I adjust? In what file? I’ve searched and could not find a thing for desktop or mobile. Thx for your help

1 Like