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:
Go to Theme settings > Cursor.
Select a setting described in the following table.
Setting name | Description |
---|---|
Custom cursor | Use 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 source | To 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 cursor | Select the checkbox Enable as default cursor to set/unset the custom cursor as your store's default cursor. |
Enable for links | Select 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 position | Adjust 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 position | Adjust 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). |