Appearance

Cursor ​

This guide describes the Theme settings > Cursor menu options.

Use the menu options to set up a custom cursor for your store. A cursor is a movable indicator that shows the user their current input location on a display screen, like a mouse pointer.

The previous video shows a store's home page. In the upper right, part of Theme editor's Theme settings > Cursor menu is displayed. Inside the menu's Custom cursor picker, an uploaded image is selected. The selected image depicts one of the store's Serum products. This option specifies an image to use as the store's custom cursor. In the upper left, the image is applied as the store's custom cursor. The custom cursor moves across the header menu, and indicates the user's input location on screen.

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

Configure Cursor ​

To configure your Cursor settings:

  1. In Theme editor, go to Theme settings > Cursor.

    Theme editor's Cursor Theme settings menu.

  2. Select a setting described in the following table.

Setting nameDescription
Custom cursorUse the Custom cursor picker to select an image. Your selected image will be scaled down to 32 x 32 pixels. Use this option to specify an image for your store's custom cursor.
Custom cursor > Connect dynamic sourceTo display a cursor image from a dynamic source, if available, select the Connect dynamic source icon, beside the Custom cursor picker, and then choose a dynamic source to add. You must define sources of dynamic content. Refer to Shopify help: Metafields.
Enable as default cursorSet the Enable as default cursor checkbox to on or off. With this option enabled, your store's custom cursor is displayed as the default cursor.
Enable for linksSet the Enable for links checkbox to on or off. With this option enabled, your store's custom cursor is displayed when the user places the cursor over a hyperlink on a store page.
Cursor hotspot > X positionAdjust the X position slider between 0 and 32 px (pixels). Your specified x coordinates indicate the horizontal position for the cursor's hotspot. The cursor hotspot refers to the specific area inside the cursor that interact's with elements on the screen.
Cursor hotspot > Y positionAdjust the Y position slider between 0 and 32 (pixels). Your specified y coordinates indicate the vertical position for the cursor's hotspot. The cursor hotspot refers to the specific area inside the cursor that interact's with elements on the screen.