Image menus
Create drop-down menus completely built by images
Last updated
Create drop-down menus completely built by images
Last updated
Beautiful image based menus are simple to create in Story. Easily convert any top-level menus that have no nested items into an image-based drop-down:
Begin first by building your main header navigation with the Shopify Navigation editor. Next, choose a top-level menu that does not have any nested menu items.
Example:
Next, in the Theme Editor under Heading, choose add block. Add as many image blocks as disired for your menu. We will add three image blocks:
Configure each image block by mapping the item number to the navigation menu position. In our example, "Our Story" is Item 2.
After choosing the Link position in main menu, choose an image and configure the size using the Image scaling ratio slider and fine tune the image with the Wide image toggle and Position settings:
Complete the call-to-action settings by adding a header, text (optional) and link. Configure the link color by choosing an option from the Text color drop-down.
Complete all settings for each image block.
Use drag-and-drop to rearrange the image blocks:
The eye icon can be used to toggle image blocks.
The mobile drawer will display each image block menu items in a stacked format:
