Appearance

Custom links with image ​

This guide describes setting your store's Custom links with image section to display a link and an image, side-by-side, on a store page.

The following video shows a custom links with image section on a store's homepage. The image changes whenever the cursor is placed over the link text.

For general guidance with modifying sections, refer to Sections overview.

Note

Use this section to add images for content like pages or blogs. To add product, collection, or article images, consider using a Navigation with image section.

To set up a custom links with image section on a store page:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the custom links with image section. For example, select the Home page template.

    Note

    The custom links with image section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

  2. Select Add section > Custom links with image.

    A default custom links with image section does not contain a link (block). To configure, add or remove a link, refer to Configure a link within a custom links section.

    The add custom links with image section option in theme editor

  3. From the side menu, select Custom links with image.

  4. Select a setting described in the following table.

Section setting nameDescription
Text size - mobileSelect the Text size - mobile dropdown to set a size for the text inside the custom links with image section. The size applies to smaller displays and the dropdown options are: S = small, M = medium, L = large, XL = extra large, and 2XL = 2 x extra large.
Text size - desktopSelect the Text size - desktop dropdown to set a size for the text inside the custom links with image section. The size applies to desktop displays and the dropdown options are Same as mobile, and 2, 3, 4, 5, 6 or 7 x XL (extra large).
Text alignmentSelect the Text alignment dropdown to align text inside the custom links with image section to the Left, Center or Right.
Text positionSelect the Text position dropdown to position the text inside the custom links with image section to the Top, Middle or Bottom.
SuperscriptSet the Superscript dropdown to Index to show a number, to the left of the link text, inside the custom links with image section. Index numbers are styled as superscript, and each link has as unique index number. The first link has the index number 1, the 2nd link has the index number 2, etc. To hide index numbers, set the Superscript dropdown to None.
Image > Select imageUse the Image > Select image menu options to set up an image in the custom links with image section.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
Image position on desktopSelect the dropdown Image position on desktop to position the image to the Left or Right, inside the custom links with image section. This setting applies to desktop displays.
Image size on desktopSelect the dropdown Image size on desktop to set a width for the image inside the custom links with image section. The options are One third, One half, and Two thirds. This setting applies to desktop displays.
Fit image to textSelect the checkbox Fit image to text to turn on/ off resizing the image to match the size of the text inside the custom links with image section. This setting crops the image on desktop displays.
Indent imageSelect the Indent image checkbox to add/ remove a border around the image inside the custom links with image section.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the custom links with image section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Theme settingsSelect Theme settings to access additional settings. Refer to Section theme settings menu.
Remove sectionSelect Remove section to remove the custom links with image section from the current page template.

To configure a link block inside a custom links with image section:

  1. Go to Customize theme, and then use the dropdown at the top of the page to select a template that contains a custom links with image section.

  2. In the side menu, expand the Custom links with image section section menu.

  3. To configure an existing link block, select Link.

    To add a new link block, choose Add link, and then select the Link block.

    A link block inside a custom links with image section in theme editor

    Note

    Inside a custom links with image section, you can add, remove, show/ hide, or move link blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.

  4. Select a setting described in the following table.

Block setting nameDescription
LinkUse the Link text box to enter a URL or select a store page to link to. The link is displayed inside the text area of the custom links with image section. To remove a link, select the X icon inside the Link text box.
Link textUse the Link text box to provide a label for the link inside the link block.
Image > Select imageUse the Image > Select image menu options to set up a secondary image in the custom links with image section. The image is displayed whenever the cursor is placed over the link text.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
Remove blockSelect Remove block to remove the link block from the custom links with image section.