Menu

Store Design

Topic summary

A Shopify Enterprise theme user is experiencing a layout issue where product images appear above the menu bar instead of below it. The problem occurs on a page with a media grid layout rather than direct product links, and currently no images display in the menu bar itself.

Troubleshooting steps suggested:

  • Verify image links are correct and accessible
  • Check theme customization settings to ensure menu images are enabled
  • Inspect the header.liquid file in the theme code to confirm proper image display implementation
  • Use browser developer tools to check if images are loading but hidden
  • Review CSS for conflicting styles (like display: none) that might hide images
  • Check for JavaScript conflicts preventing image display

A code example was provided showing how menu images should be structured in the liquid template. The issue appears to involve both the menu bar configuration and potential CSS/JavaScript conflicts affecting image visibility and positioning.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi, We are working on a webshop in shopify’s enterprice theme. We got all the products in it. Menu bar works, the images of the products below it come before it. We only have one place in menu bar that goes to a page where you don’t go directly to products but to a media grid. Here now no images appear in the menu bar. How can we solve this that still the images come in menu bar?

2

Hi @Anneee23 ,

This is Amelia from PageFly - a Landing Page Builder App

Here are a few steps to troubleshoot and resolve this issue:

  1. Check Image Links:

    • Ensure that the images you want to display in the menu bar are correctly linked and accessible. Sometimes, broken links or incorrect paths can cause images not to load.

  2. Verify Theme Settings:

    • Go to Online Store > Themes > Customize.
    • Check the settings for the menu bar and ensure that images are enabled for the specific menu item leading to the media grid.

  3. Edit Menu Code:

    • Go to Online Store > Themes > Actions > Edit code.

    • In the Sections folder, find the file responsible for the menu, often named header.liquid or similar.

    • Ensure that the code for displaying images in the menu is correctly implemented. For example:

      <ul class="menu">
  {% for link in linklists.main-menu.links %}
    <li>
      <a href="{{ link.url }}">
        {% if link.image %}
          <img src="{{ link.image | img_url: 'small' }}" alt="{{ link.title }}">
        {% endif %}
        {{ link.title }}
      </a>
    </li>
  {% endfor %}
</ul>

  4. Check CSS and JavaScript:

    • Ensure that there are no CSS or JavaScript conflicts that might be preventing the images from displaying. Look for any display: none; or similar styles that might be hiding the images.
    • You can inspect the elements using your browser’s developer tools to see if the images are being loaded but not displayed.

I hope that my solution works for you.

Best regards,

Amelia | PageFly