Story theme
Story v2
Story v2
  • Story theme documentation
  • online store 2.0
    • The new experience
  • Header
    • Header styles
    • Toolbar
    • Navigation images
    • Image menus
    • Transparent header
    • Mega-menu navigation
    • Drop-down navigation
  • Sections
    • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
    • Section blocks
    • Complete list of sections and blocks in Story
  • Collections
    • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
    • Collection filtering
      • Custom filter options
    • Collection sorting
    • Collection navigation
    • Feature image
  • Products
    • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
    • Product tabs
      • Static product tabs
      • Unique product tabs
    • Color swatches
    • Inventory countdown
    • Pre-order products
    • Size Charts
      • Static size chart
      • Unique size charts
      • Creating pages
    • Product image sizes
  • Cart
    • Cart styles
    • Shipping message
    • Estimate shipping calculator
    • Cart settings
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
  • Tips
    • Where to make CSS changes
    • How to add a line break in your headings
  • Advanced
    • Story tutorials
    • Remove Shopify link in footer
  • Contact
    • Share preview link
  • Earlier versions
    • Story v1
Powered by GitBook
On this page
  • How to
  • Sorting and hiding
  • Mobile
  1. Header

Image menus

Create drop-down menus completely built by images

PreviousNavigation imagesNextTransparent header

Last updated 3 years ago

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:

How to

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.

Sorting and hiding

Use drag-and-drop to rearrange the image blocks:

The eye icon can be used to toggle image blocks.

Mobile

The mobile drawer will display each image block menu items in a stacked format:

Our Story does not contain any nested menu items like Shop
Image scaling ratio adjusts the size of the images from wide to tall