Foodie Theme: Setting up the Homepage

 On this page

The Foodie theme has 17 homepage sections to choose from, each with its own settings.

Image with Text

  • Image: Upload an image with a 3 x 4 vertical ratio for best results.
  • Text horizontal align: Choose whether to align text left, right or center next to the image.
  • Text vertical align: Choose whether to align text with the top or middle of the image.
  • Heading & Text: Add a heading with text and adjust their font sizes.
  • Button: Optionally add a button to link to another part of your shop.
  • Match header to section colors: If you are using this section first on the homepage want to make the Header background match your section background, enable this setting.

The Gallery section has very similar settings to the Masonry Gallery but does not flow the same. It is much more gradual in layout, with many different layout combinations.

Section Settings:

  • Enable full width: Will make the section the full width of the site.
  • Choose style: Choose between "space around images" which will leave a gap between all images or "images touching" which will make all images touch.

Content Settings:

  • Image: Using images that are all sized the same ratio as each other will make this section look better.
  • Container width: Adjusting the container width for each content block will give you different layouts. The layout shown is Block One at 66%, Block Two at 33%, Block Three at 33%. Another popular layout is 33% for each block.
  • Image heading: The image heading is shown at all times.
  • Image subheading: The image subheading is shown on hover when on a desktop computer and all times on a device.

  • Collection: Choose a collection to feature.
  • Display Type: Display items in a carousel or simple grid format.
  • Products per row & shown: Select the number of products per row and shown at one time.

Section Settings:

  • No space after section: Will remove spacing after this section, before the next homepage section.
  • Button & Menu Link: If you select a menu link it will show the button with the text added in the setting.

Content Settings:

  • Collection: Select a collection to show, you can add multiple Menu Collection blocks to show more than one collection in the menu.
  • Show product options: Will show any variants the product has.
  • Show short description: Will show a truncated version of the product description.
  • Items shown: Will limit the number of items from the collection shown.

Section Settings:

  • No space after section: Will remove spacing after this section, before the next homepage section.
  • Choose image position: Choose to have the image on the left or right of the content.
  • Choose image width: Choose the image gallery width.

Content Settings:

  • Add Location: Add location content blocks for each of your store locations.
  • Image: Upload an image of the store location.
  • Location Name: Give the name of the location.
  • Location Link: Optionally link to the locations page with further location details.

Image with Text Overlay

The image with Text Overlay section is a great way to break up sections with a large full-width image and text.

  • Image: The image uploaded will be scaled to the size of the section (some cropping may occur).
  • Image height: Set the height of the section.
  • Link: Optionally link the image to a page on your site.

Collection List

A collection list is a great way to bring focus to key Collections in your store.

Section settings:

  • Collection content
    Add up to 6 Featured collections within this section.
    If the collections that you have chosen to feature have been assigned a Featured image then this will show here. If not then the image from the first product in that collection will be shown in its place.
  • Heading
    Optionally add a heading for this section.
  • Collections per row
    Choose how many featured collections will show per row.
    On mobile devices, the theme will automatically show 2 per row.

Blog Posts

Add additional content to your store's home page by featuring posts from a Blog within your store.

Section settings:

  • Blog
    Select a blog from which to display articles (posts).
    Providing your article includes a featured image then it will be shown here.
  • Heading & styles
    Optionally add a heading to this section, set the color, and add a background fill that will span the width of the browser behind this section.
  • Layout options
    Show blog posts in a 3 per row grid or allow the natural layout to show one per row with images alternating left / right alignment with text content.
    Choose to display comments and published date on

Image Carousel with Text

This section allows you to show an image carousel with text side by side where the width of the image can be adjusted to create a strong visual effect.

Section settings:

  • Full width
    Allow this section to span the full width of your browser.
  • Image, position, and size: Upload your image, choose its position relative to the accompanying text, and choose the size for this image.
    Your images will scale, but we recommend using the following image widths to ensure good responsive quality:
    •  66% - 75% width: 1200px wide
    •  50% width: 1000px wide
    •  33% width: 800px wide
  • Text and link content
    Text can be aligned to the left or center of its area.
    Add a heading and text content that goes into greater detail, compliment this area with an optional button leading to other content in your store.

Logo List

The Logo List can be used to feature logos of brands you sell.

Section settings:

  • Image content
    Add up to 6 images within this section.
  • Heading
    Optionally add a heading for this section.

Slideshow

Your Slideshow can contain up to 5 blocks where each block would represent an image slide.

Section settings:
The settings here affect the slideshow as a whole, each of its blocks ( slides ) will inherit these global settings

  • Slideshow height
    All images in the slideshow will resize to this height (cropping may occur)
  • Slideshow speed
    The time that elapses between each slide
  • Slideshow navigation
    Choose the style navigation arrows, bullets only, progress bar and arrows, scrollbar, and arrows, each has a little different style and function.
  • Slideshow text
    Set the size of your slideshow caption heading, subheading, and button.

Slide settings:

  • Desktop image
    Upload a large image, your slideshow will span the full width of the browser, we recommend 1800px x 800 - 1000px
    The height of the slideshow is dictated by the height set in the section settings. Make sure to use images that have the same height to width ratio to ensure the best results.
  • Mobile Image
    Optionally add a mobile image that will be shown on small devices.
    The caption will show below the image on mobile.
  • Caption settings
    Add a heading, subheading, and button.
  • Caption colors
    Control the color scheme for each slide independently ensuring the best potential display of your hero content.
  • Caption position
    Text within a caption can align to the Left, Center, or Right, Slide captions also include horizontal and vertical controls allowing you to position your caption with pinpoint accuracy.

Showcase a specific product in your store with this section that leverages a similar setup to the Product pages in your store.

Section settings:

  • Product
    Select a product to showcase and optionally add a heading for this section.
  • Product media gallery
    As within your store's product pages, choose the layout options for your product media which will show images and video assigned to the product.
    Slideshow display with various thumbnail layouts is present along with an optional click to enlarge button.

Newsletter

Adding a Newsletter signup section to your homepage will encourage signups for customers who want to discover more about your store and brand.

Section settings:

  • Heading & Subheading
    When asking users to provide you with their email for marketing it is important that they understand why and are offered reassurance that you will not be sending spam.
    Explain the benefits of signing up in detail.
  • Styles
    Set the text and background color for this section.

Rich Text 

This section allows you to enter a brief text section to your store or alternatively pull content that already exists on a page within your store. It can serve as an introduction to another section, a short welcome to your store, or can be used to improve your store's SEO by adding paragraphs of content that are normally image-heavy.

Text Columns with Images

This section is great to use for shop facts or additional shop information with up to three columns.

Video

Feature video content from your store by dropping a link to any YouTube video