Foodie - Theme settings

Theme settings exist to control the appearance of content and set the base style for your store. Where sections might have their own individual settings, theme settings are here to cover repeated or static content.

Favicon

Add a small icon that will be shown in the browser tab and in the bookmarks toolbar.

Typography

Control type across your store

• Main font
  Selects the main font for body text + set its size.
• Navigation
  Choose the navigation font + set its size.
• Headings
  Choose fonts for your page titles and section headings + set the size
  The size you select will automatically scale for sub headings.
• Uppercase navigation
• Uppercase buttons

Colors

Carefully select the colors that will show in different areas across your theme. Colors are grouped to help with selection.

• Announcement bar, Header & dropdown navigation
• General
  Background: sets the color of the page background
  Secondary background: will be used as the background color for items in the product grid and collections with a menu layout.
  
  
  
  
• Headings, Body text, links and icons
• Buttons
• Directional navigation (slideshow, carousel)
• Color schemes
• Footer

Cart

Foodie includes different visual options and functions for the shopping cart which change how this can be displayed in your store.

• Cart type
  Choose behavior when clicking the Cart button:
  Page only: Go to the cart page
  Drawer cart: Open the cart in a side drawer
  Modal cart: Open the cart in a modal window
  Page only - no automatic updates: Go to the cart page but require a refresh when updating, this option exists as we know some apps do not support Ajax or carts that auto update. Use this if your app experiences those issues and your app developer is not helping.
  
  
• Show tax note
  Toggles a message stating taxes calculated at checkout
• Show shipping note
  Toggles a message stating shipping calculated at check out
• Show cart not box
  Allow users to add notes to purchases
• Show shipping calculator 
  Allow customers to calculate shipping prior to checkout
• Free shipping countdown
  Set a total amount and alert customers to how much more they need to spend to qualify.

Age verification

Enables an age verification window to show when entering the store which requests customers to verify their age prior to viewing content. 

Global

Settings for common areas that are on display theme-wide.

• Section spacing
  Set the height between sections
• Section heading alignment
  Set section alignment to left or centered
• Scroll animations
  Choose from a large range of animations when content comes into view as you scroll down the page
• Keyboard focus + borders
  Aids with the visibility of keyboard selected content for users with disability.
• Search
  Use predictive search + only show products in results.

Collection grid

Control the appearance of products when shown in a grid layout, for example Collection pages, Search, Featured collection sections

• Image ratio
  Choose an image size / ratio for perfectly aligned product grids - helpful if you have images of varying sizes.
• Add padding around image
  Increases the space around each product image.
• Add dropshadow on hover
  Adds a dropshadow effect to the products when hovering.
• Show product count
  Toggle showing the product count in the collection list page and sections.

Product grid

Control the appearance of products when shown in a grid layout, for example Collection pages, Search, Featured collection sections

• Image ratio
  Choose an image size / ratio for perfectly aligned product grids - helpful if you have images of varying sizes.
• Add padding around image
  Increases the space around each product image.
• Add dropshadow on hover
  Adds a dropshadow effect to the products when hovering.
• Show product vendor
• Switch image on hover
• Show product videos
• Show food sensitivities popup
  Requires a text metafield with id of custom.allergens to show
  
• Enable Quickshop
  Displays a quickshop drawer for products with variants or one click add to cart for products without variants
• Show product color swatches
• Allergen label
• Show sizes

Product pages

Control for product pages and products shown in a Featured section

Social media

Add links to your chosen social media channels

Checkout 

Checkout colors and styles are injected by Shopify into the theme settings for every Shopify theme. These options allow you to set your preferred color scheme for the checkout which is commonly shared by all Shopify stores.

Theme developers do not have access, nor can they edit the checkout layout, design or code structure.