Image menus
Create drop-down menus completely built by images
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:
Our Story does not contain any nested menu items like Shop
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:
Image scaling ratio adjusts the size of the images from wide to tall
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:
Last modified 1yr ago