Appearance

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 Custom cursor selector options to setup an image as your store's custom cursor. Images are scaled down to 32px x 32px (pixels). Refer to Add, replace or remove an image or video inside a section or block.
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). The slider ranges from 0px to 32px(pixels).
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). The slider ranges from 0px to 32px(pixels).