Image

Reference All plans 2 min read

One picture with an optional title, description and link. Use it for a seasonal banner or a picture that links to a collection; it can also swap to a second picture on hover.

Add the block

1. Pick a layout

   In the mega menu panel of the preview, click Add block. Click Add custom image, hover over Image 1 or Image 2 and click Select.

   

   (1) Click Add custom image, (2) pick Image 1 or Image 2. (3) is the Image slider layout.

   Image 1 shows the title under the picture. Image 2 shows it on a dark bar over the picture.

   The same tab also has Promo banner, Promo banner split and Brand logos. See Promo banner and Brand logos.

2. Choose the picture and texts

   In Edit Item, click Select image to upload or pick a picture. Fill in the Title, Link and Description.

   

   The Image block in the preview, with its settings in Edit Item.

3. Save and publish

   Click Save, then Publish.

Settings

TitleDefault: Image 1 / Image 2

Text shown with the image. Leave it empty to show only the picture.

LinkDefault: None

Where the image goes when clicked: a page, product, collection or URL. Tick Open in new tab if needed.

DescriptionDefault: Sample description

A second, smaller line of text under the title.

Swap image on hoverDefault: Off

Adds a Hover image that shoppers see when they move the mouse over the block.

Image / Hover imageDefault: None

The main picture and, with swap on, the picture shown on hover.

Image widthDefault: Auto

Appears after you choose an image: Auto or Custom (a number in %, px, em or rem).

WidthDefault: 25%

How much of the mega menu row the block takes: Auto or 8.33% to 100%.

No paddingDefault: Off

Removes the block’s inner spacing so the image fills the block edge to edge.

VisibilityDefault: Off

Hide on desktop, Hide on mobile, Hide when logged in, Only show when logged in, Schedule publishing. See Settings every block has.

Tips

• Use the same size (for example 800 × 800 px) for the main and hover images so the block doesn’t jump when the picture swaps.
• A large image in a narrow block makes the menu heavy on phones. If it’s only decoration, turn on Visibility > Hide on mobile.

Related pages

• Image sliderShow several images in a carousel, each with its own caption and link.
• Promo bannerAdd a banner with a heading, text and button to promote a sale or a new collection.
• Brand logosShow a grid of brand logos that link to each brand's collection.
• Blocks overviewAdd blocks such as links, images, products and countdowns to a mega menu or tab.

Was this helpful?

Report an issue