Fluid Template for Fresh Store - Setup Guide, Features & Settings

Fluid is a template designed to be mobile friendly and responsive, with a modern Flat UI design. It comes with 8 color schemes, standard logo or custom banner header, a host of template options, and support for all the new features from Fresh Store Builder version 5.0

Features at a Glance

Responsive Design
Modern Flat UI
8 Color schemes
Widgetized Homepage
Choose Standard or Custom Banner Header
Responsive Product Slider
Support for Responsive video embeds
Floating Social Share Buttons
Mobile Sharing Bar
Options for Social Follow icons
Retina Ready
SEO Optimized
Microformat / Rich Snippet Markup
Cross Broswer Compatible – Internet Explorer version 9+

Choose your Header Design

We’ve given Fluid two different header designs, so you can choose which version you prefer. By default, the Standard Logo Header style is active, but you can change this to the Custom Banner Header by going to Design=> Template Options => Choose Header Style

For both the Standard Logo Header and the Custom Banner Header, you upload your images in the Design=> Template Options => Images tab

IMPORTANT: Because this is a mobile / responsive design, these images will adjust to the size of the screen. This means that there is not a hard-coded image size, and the “Automatically resize this image” checkbox wont really do anything. It will resize to the dimensions of the layout.

Most importantly, it will NOT resize the height when you first upload the image to any particular dimension. This means you need to upload images that are already at the sizes you wish to use. Here are the recommended sizes:

Main Logo Image : 445px wide by 120px high

Header Banner Image: 1170 pixels wide x 150 pixels high

Q: What if I want to use a banner that is 960px wide by 200px high? Or maybe 1170px wide by 100px high…. Will it display?

A: Yes it will, and it will scale properly at the smaller sizes. The most important thing is to get the correct 1170px width for the custom banner header.

Q: What if my logo is smaller than 445px wide by 120px high?

A: It will still display properly.

Here is an example of both the Standard Header and the Custom Banner Header

Mobile Design Features

Fluid has been built from the ground up to work with mobile devices. Images are setup to be responsive, sidebars are re-positioned as needed for mobile devices & buttons and menus are touch activated. We also used all the latest design techniques, including stacked font icons (see the credit card icons in the footer) in order to keep your site fast and mobile friendly.

We also redesigned the Basket and Checkout pages based on mobile eCommerce best practices, to help combat cart abandonment and get your users to do the most important thing – purchase your products!

For instance, when your mobile users have a product in their cart and are on the basket page – the top header area removes things like the search bar and view basket button – so that the next action (checkout) is right at the top of the screen in a big call to action button. And then for larger devices, we modeled the layout on some of the most successful eCommerce stores (including Amazon of course)

Template Options & Customization

Fluid has all the templates options you need to support all the new features, as well as all the standard features like selecting your product slider products. There are options to allow you to Show / Hide various sections on your Product Detail pages – such as the “Key Features”, “Secondary Description”, etc. You can also rename these headings, as well as rename the User Reviews and/or Amazon Review tabs

Fluid also includes an additional 7 skins, for a total of 8 color schemes. Want more control? Fluid supports the Visual Editor (Design=> Visual Editor) for more customization, and also has the standard parameters for inputing custom css and/or scripts. (Settings=> Your Store Settings => then scroll to Custom CSS & Scripts)

Social Features

We implemented Social Sharing utilizing the AddtoAny script. When displaying on larger tablets (iPad 768px) and desktops, these will display as Floating buttons locked to the side of the screen. For smaller tablets and mobile phones, this automatically switches to a nav bar fixed to the bottom of the device.

There are a couple of reasons we chose AddtoAny, as opposed to other available scripts. First and most importantly, the features for Floating buttons and the Mobile fixed navigation bar were available for FREE! You do not have to sign up for any service or pay any fees, unlike other social sharing scripts.

In addition, AddtoAny automatically integrates with Google Analytics – no additional coding or fees required. The code is also very fast loading, and supports SSL.

We recommend reading their FAQ page for more information, and if you are interested in using with Google Analytics check out their page on AddtoAny & Google Analytics

Next, we implemented Social Follow buttons that you can activate by going to Design => Template Options and choosing Template Options from the sidebar and entering the url to your social network profiles. The social media option are located towards the bottom of the page. Options are available for you to specify the following profiles:

Facebook
Twitter
Pinterest
LinkedIn
GooglePlus
YouTube

Once you have entered your profile, the related Icon will display. If you leave it blank, no icon will be visible. Oh yeah – and all the icons are done as retina-ready font icons, fast loading and mobile friendly

And lastly, Fluid absolutely supports the latest version 5.0 Facebook features, so make sure you read up on those and take your social marketing to the next level!

Responsive Video

We know that many of you incorporate embedded video, particularly from Youtube, to add to pages in your store. With the new widget homepage, you also have the ability to embed video into the Custom Html widget

However, you need this video to be responsive so that it works on mobile and desktop devices – AND – to keep the same aspect ratio so that it doesn’t get all scrunched or distorted

To make this really easy – we’ve included code so that all you have to do is put a wrapper around your video code and it will automatically become response and maintain it’s aspect ratio!

All you need to do is surround your code with an html wrapper and our “videoWrapper” class. Here’s an example of the embed code of a youtube video with this wrapper:

This is the code you copy from YouTube --- <iframe width="560" height="315" src="//www.youtube.com/embed/QjaTZODOKmw" frameborder="0" allowfullscreen></iframe>

The original code is: