Member Interface Customization Guide

Farmigo member interface pages can be customized based on farm branding. There are 2 main customization that can be controlled:
  1. Header and Footer of the pages
  2. The main color that is used on the site (e.g. buttons)
These customizations are applied on all the member interface pages including:
  • The signup wizard
  • The web store marketplace
  • Member “My Account”
** Before you customize the member interface note that web site and the mobile app were designed using modern design paradigms that emphasize the produce images and use less colors to create a much cleaner look & feel.

Customized Member Interface Settings

Go to Settings --> General Settings --> Customized Member Interface
Under this section there are new parameters that can be configured:
  • Website Main Color - In this property you can adjust the main color of your member interfaces. This color will be applied on buttons, links and other web elements on the web site. The color must be set as HTML color code. See more details below in the color section of the guide.
  • Custom Header / Custom Footer - In this property you can customize the header/footer of your member interfaces. The property must be edited with HTML code. When you set theHeader property it overrides the banner logo and color settings. See more details below in the Header and Footer section of the guide.

Colors ​

You can set any color to be used on page buttons and titles. Please consider the following before choosing your color:

  1. The color is used as text background (text color is white), therefore selecting a very light color will make the text on the button not visible
  2. The buttons color is becomes darker upon hover and click, therefore selecting a very dark color will hide the color animation.

Although you can set any color, we suggest to use one of the colors recommended by our design team on the right.

​Header and Footer

Header and Footer height and padding
  • The height of the header and footer bars must be exactly 115px
  • You can choose to customize either the header or the footer or both
  • To ensure the content of the page is aligned correctly, the content width should not exceed 1290px.
    Use: {max-width: 1290px}
Example for Header customizationIn the example below  the following elements were set:
  1. The header background color was set to 95eaf6
  2. The farm logo was set as a source image and a link to a web site
  3. A Home link was set on the right as a link to a web site

​
<div style="background-color:#95eaf6;width:100%;height:100%">
<div style="margin-right: auto; margin-left: auto;max-width: 1290px">
<style>.header-links{float: right;line-height: 115px;padding-right: 50px; color: #666666} .header-item{padding:20px}
</style>
<a href="http://www.myfarm.com/" target="_blank">
<img style="margin-top: 20px;" src="http://www.myfarm.com/logo.jpg"/>
    </a>
<div class="header-links">
<span class="header-item">
<a target="_blank" href="http://www.myfarm.com/">Home</a>
</span>
        </div>
</div>
</div>

​
​Example for Footer Customization
In the example below the footer below the items was set with the following elements:
  1. The background color was set to #F4F6F6
  2. Link titles “About Us” was set as a link to a /about-us page
​<div style="background-color:#F4F6F6;width:100%;height:115px">
<div style="margin-right: auto; margin-left: auto;max-width: 1290px">
<style>.header-links{float: right;line-height: 115px;padding-right: 50px; color: #666666} .header-item{padding:20px}
</style>     
<div class="header-links">
<span class="header-item">
<a target="_blank" href="http://www.myfarm.com/contact-us">Contact Us</a>
</span>
</div>
</div>
</div>
Integrating Scripts to Custom Header
The custom custom header code supports HTML scripts. HTML scripts can be used to allow pixel code for facebook tracking, for example. 

To allow the custom code to render an HTML script, you need to place the following string at the end of your custom header code - <!-- HEAD TAG -->
After this tag you can place your script tag and code. For example, you can place the following code at the end of your custom header code. 



<!-- HEAD TAG --> 

<!-- Facebook Pixel Code --> 
<script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); // Insert Your Facebook Pixel ID below. fbq('init', 'FB_PIXEL_ID'); fbq('track', 'PageView'); 
</script> 
<!-- Insert Your Facebook Pixel ID below. -->
 <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1" />
</noscript> 
<!-- End Facebook Pixel Code -->
Mobile Site Customization

It is also possible to customize your Farmigo mobile site. In the custom header property you can add the tag <!-- MOBILE HEADER TAG -->
Place this tag after the desktop customization and before the <!-- HEAD TAG -->
The system will know to take the code you place under the <!-- MOBILE HEADER TAG --> and apply it on the mobile header.