Foodie Theme: Header Section

On this page

Layout Options

Your themes header includes numerous settings that are used to format the layout and style of its appearance and functions.

  • Show logo inline with navigation When enabled this will show the navigation, logo, and cart links all in one row.

  • Left align logo When enabled this will position the logo to the left instead of centered.

  • Enable sticky header When enabled your header will stay permanently visible as you scroll down the page.

All Shopify themes allow you to upload your own logo, when no logo is shown your store name will be shown instead which can be renamed in your Shopify dashboard via  Settings > General in the first section named: Store Details - Store Name

  • Uploading an image: Shopify supports many image file types, we recommend using a jpg where possible or png if your image requires transparency. Before uploading makes sure that your logo image is cropped tight to its content and that it does not contain excessive whitespace as this whitespace will also show in your header.

  • Homepage logo image You can use this setting if you plan to use the Image w/text homepage section and set it to match the header to the section. In this scenario, you may need a different color logo on the homepage which can be uploaded here.
  • Logo width Using the range slider provided set the preferred width of your logo image. Always ensure that the image is of high quality and large in scale - we recommend using an image that is at least 1.5x wider than the width setting that you allocate to it. This will ensure that the image shows a good quality when viewed on high-resolution screens retina-enabled devices that demand high-resolution images.
  • Logo text If you do not upload a logo image the site will default to your shop name in text format. Set the size of the text in this setting.
  • Main menu Choose from your store's navigation area to display the main navigation in the header of your theme Your main navigation can include dropdowns

  • Text alignment Choose whether to left or center align navigation links within the header.

Content Blocks

  • Links with images This content block can be used to create a mega dropdown menu. First, you must be sure to properly set up dropdown menus using this guide. You can follow these steps to create a mega dropdown in Foodie:
  • Step 1: Click on "Add Links with Images".

  • Step 2: In the field marked Menu item enter the name of the link from which you would like the mega dropdown to appear from. For example, our demo store has the following links in the main menu "Shop, Dining, Venue, Locations, Contact". We wanted the mega dropdown to show under Shop, and so under Menu item, we will enter Shop exactly as it shows in our menu.

  • Step 3: Choose the Links alignment and what Image Ratio you want the images to use.
  • Step 4: Upload a featured image to "Select a featured image #1" and fill in the label and link field.
  • Step 5: You can optionally add a second and third featured image.