Skip to content
GloboGlobo Docs
Install app
English

Hover image links

Show a list of links next to a large image that changes as shoppers hover over each link.

Reference All plans 2 min read

A list of links next to a large image that changes to each link’s picture on hover. Use it to preview categories visually (“New arrivals”, “Best sellers”, “Sale”) without the space of a full image grid.

Add the block

  1. Pick the layout

    In the mega menu panel of the preview, click Add block. Click Link list, hover over Hover image links and click Select. It starts with the heading “Collections” and 3 sample links.

    (1) Click Link list, (2) pick Hover image links.

  2. Set the heading and default image

    In Edit Item, under General, enter the Heading, pick a Default image and enter the Button label on image.

    The Hover image links block in the preview, with its settings in Edit Item.

  3. Enter the Title, choose the Link and pick the Image on hover. Click Add to add a link, or Remove to delete one.

  4. Save and publish

    Adjust the image under Style, then click Save and Publish.

Settings

General

HeadingDefault: Collections
Text above the links.
Default imageDefault: None
Shown for links without their own Image on hover.
Button label on imageDefault: Shop now
Text shown on the image, under the link title. Leave it empty to show only the title.
WidthDefault: 66.66%
How much of the mega menu row the block takes: Auto or 8.33% to 100%.

Style

Image positionDefault: Right
Right or Left of the links.
Image ratioDefault: 4:3
1:1, 4:3, 3:4, 16:9 or 9:16.
TitleDefault: New arrivals, Best sellers, Sale
The link text.
LinkDefault: None
Where the link goes.
Image on hoverDefault: None
The picture shown while a shopper hovers over this link.

Up to 10 links per block. Each link also appears under the block in the Elements list, with an Add link button: drag links to reorder them, or click one (in the list or the preview) to edit only that link, including its own Visibility. Visibility for the whole block works as on every block; see Settings every block has.

Tips

  • Use images of the same shape and set Image ratio to match, so the image area doesn’t jump between links.
  • Keep link titles short. The title also appears on the image.

Was this helpful?

Report an issue