Member Interface Customization Guide

Farmigo member interface pages can be customized based on farm branding. There are two main customizations that can be controlled:

1. Header and footer of the pages
2. The main color that is used on the site (for example, 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 the website and mobile app were designed using modern design principles that emphasize produce images and use fewer colors to create a much cleaner look and 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 to buttons, links, and other elements on the website. The color must be set as an HTML color code. See more details in the Colors section of this guide.
• Custom Header / Custom Footer — In this property you can customize the header and footer of your member interfaces. The property must be edited with HTML code. When you set the Header property, it overrides the banner logo and color settings. See more details in the Header and Footer section of this guide.

Colors

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 Customization

In 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 website.
3. A Home link was set on the right as a link to a website.

<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 was set with the following elements:

1. The background color was set to #F4F6F6.
2. The link title “Contact Us” was set as a link to a /contact-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 into the Custom Header

The custom header code supports HTML scripts. HTML scripts can be used to add pixel code for Facebook tracking, for example.

To allow the custom code to render an HTML script, 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:

<!-- 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, add the tag <!-- MOBILE HEADER TAG -->.

Place this tag after the desktop customization and before the <!-- HEAD TAG -->. The system will take the code placed under the <!-- MOBILE HEADER TAG --> and apply it to the mobile header.