Appearance

Return to top
On this page

Cursor

This guide describes the Theme settings > Cursor menu options. Use the settings to define a custom cursor for your store.

The previous video shows a custom cursor on a store's Contact page. When the cursor is placed over the Menu link, the default pointer is displayed instead of the custom cursor. To change this behavior, to always use the custom cursor for links, in Theme settings > Cursor, the checkbox option Enable for links is set to on. With this setting enabled, when the cursor is placed over the Menu link, the custom cursor is displayed instead of the default pointer.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings

Configure a custom cursor

To set up a custom cursor:

  1. Go to Theme settings > Cursor.

    The Cursor menu in Theme settings.

  2. Select a setting described in the following table.

Setting nameDescription
Custom cursorUse the following Custom cursor selector options to setup an image as your store's custom cursor.
  • To add an image, choose Select image, and then upload an image or select an image file from your store's file library.
  • To edit an uploaded image, select Edit in the image selector’s thumbnail preview area. Refer to Edit an image inside a section or block.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
  • Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. Refer to Shopify help: Adding alt text to media
  • To display an image from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields
Images are scaled down to 32px x 32px (pixels).
Custom cursor > Connect dynamic sourceTo display an image from a dynamic source, select the Connect dynamic source icon beside the Custom cursor selector, and then choose a metafield to add. Refer to Shopify help: Metafields
Enable as default cursorSelect the checkbox Enable as default cursor to set/unset the custom cursor as your store's default cursor.
Enable for linksSelect the checkbox Enable for links to show/hide the custom cursor when a store vistor places the cursor over a hyperlink on a store page.
Cursor hotspot > X positionAdjust the X position slider to set x-coordinates (horizontal axis) for the cursor's pointing position (hotspot). Cursor x- and y-coordinates define the cursor's hotspot, relative to the top left corner of the cursor image (0 x, 0 y).
Cursor hotspot > Y positionAdjust the Y position slider to set y-coordinates (vertical axis) for the cursor's pointing position (hotspot). Cursor x- and y-coordinates define the cursor's hotspot, relative to the top left corner of the cursor image (0 x, 0 y).