Story theme documentation
online store 2.0
The new experience
How to use sections
Complete list of sections and blocks in Story
Product image sizes
Multiple images per variant
About product siblings
How to setup siblings
Siblings product setup
Siblings block setup
Variant image sets with alt-tags
Cookies consent message
Estimate shipping calculator
How to use page templates
Check your theme version
How to download latest version
Where to make CSS changes
How to add a line break in your headings
Remove Shopify link in footer
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.
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.
Sorting and hiding
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:
Header - Previous
Next - Header
Sorting and hiding