Flow Documentation

We hope that you find this guide useful, and if you have any questions at all, please don't hesitate to get in touch.

Thank you for choosing Flow.

Any Questions? mail@wetheme.com

Flow supports 'Product Page Tabs' without the need for a 'third party' app.

You will need to enter the code below into a product page while in HTML mode. To get to HTML mode click the '<>' button on the far right of the product description box.

<ul class="tabs">
	<li><a href="#tab-1">Info</a></li>
	<li><a href="#tab-2">Shipping</a></li>
	<li><a href="#tab-3">Returns</a></li>
</ul>
<div id="tab-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="tab-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="tab-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

The example above shows three tabs, but you can have as many, or as little, as you like.

The titles are shown at the top, 'Info', 'Shipping' and 'Returns', and are linked to the three tabs below.

Flow comes with 3 presets to get you started, Byron, Cannes and Queenstown.

You can use these as a starting point for your store, or use them 'out of the box'. You can also save your current settings as a new preset by clicking the 'Save current as new preset' button.

General

You can edit your stores text colours and your link colours, as well as your page background, and set a 'Secondary background' which will be the color used on backgrounds on the homepage, and also the background on your 'Product details' page.

Navigation

You can set the color of your navigation menu (text), as well as the icons (Search, login and cart).

Hero

The 'Hero' section sets the colors for the 'Home page - hero' section, if being used in your store. You can set the text advert background and text color, as well as the menu text color (if this is also being used).

You can set the font for both the headers, and the body text, and there is a range of fonts to choose from. They are divided into three categories:

  • Serif - A more decorative type of font with added embellishment
  • Sans-serif - Clear, easy to read fonts
  • Monospace - Also called a 'Fixed width' font, their letters and characters each occupy the same amount of horizontal space

Site header

This sets the menu text sitting to the right of your logo. You can choose between 10px and 24px.

Logo text

This sets the size of the text logo, if you are using a text logo instead of an image logo.

If you want to use an image as your store's logo, you can enter it here. We recommend using a 280px by 120px image, but you can set the maximum width of your logo using the 'Max logo width' field below.

You can also upload a favicon here, and we recommend keeping these to 32px by 32px, to ensure they look great in your browser.

The footer in 'Flow' has up to 4 sections. You can show any page, and also any 'navigation', as well as your 'Mailing list' (this can be setup in your 'Newsletter' section) and your social media. If you enable 'Social media', it will bring in any icons you have added on the 'Social media' section.

This is the Flow 'website builder', you can choose exactly what sections you want to show, and which order you wish to show them in. Each section should only be used once on the home page.

Simply select each section using the dropdowns, save, and then configure each section in the main menu of the theme settings.

Video/image

There are three main options for the home page hero.

  • YouTube
  • Vimeo
  • Image

The YouTube and Vimeo options show a video on the left of the screen (above on mobile/tablet). You will need to enter your Vimeo and YouTube Video ID, not the full URL. e.g. bTqVqk7FSmY

YouTube

For example, if you wanted to add this video, you need the YouTube Video ID

and enter it here:

Vimeo

For example, if you wanted to add this video, you need the YouTube Video ID

and enter it here:

There are options to set both:

  • Autoplay - If ticked it will play your chosen video on page load.
  • Loop - If ticked, your video will 'loop' (replay) indefinitely.

You also have the option of adding a static image. All of the menu items on the right, including the text advert, have the option of 'overlays'. These are images which will show over the top of your video/image.

Text advert

The 'hover image', like the others in the 'hero' section, allow you to set an image that shows 'on top of' the video when hovered over.

Menu

You can add up to 5 collections to show in the sidebar, and select a hover image for each.

If no text advert, and no menu items are set, the video will show full width.

This block will show up to 8 products in the collection you set. The 3rd and 4th products in this collection will show at double size.

You can set a collection to show on your homepage by selecting a pre-made collection from the 'Choose collection' dropdown.

You can show up to 12 products on your homepage, by setting both the amount of rows you want to show, and how many products to show per row.

Flow allows you to show up to three images (side by side) on the your homepage

Each advert can also have 'Alt text', this is good for SEO and screen readers, and a 'Link URL', which can point to any page in your store, or an external link.

You can show up to four of your latest posts using the 'Blog Posts' block.

In the settings, you can set the page title, and which blog section you would like to show.

You can set up to 6 of your collections to show in a homepage block.

There are two ways of showing the collections; 'Automatically' will show the first six collections, in alphabetical order, 'Manually' allows you to select each collection you would like to show.

On your live store, an image will be shown for each collection. If you have set a featured image for your collection, it will show this. If not, it will show an image of the first product in your collection.

The featured content block can be used to feature an image, with text (header and paragraph).

In the example below the settings are:

  1. Image
  2. Headline
  3. Paragraph
  4. Link Text

If you want to show your latest Instagram images on your homepage, you will need to find out your 'Access token'.

To do this, click on this link:

http://www.wetheme.com/instagram-integration

and it should give you the details needed.

We won't have access to any of your photos or personal information, this process is basically used so that Instagram can delegate bandwidth between user feeds. If you're curious you can read more about their rate limits here.

You can enable the theme standard 'Related products' to show products from the same collection at the bottom of product pages. This should be turned off if you are using your own solution, or an app.

There are three options for the collection page.

Collection description centered

This shows the collection description (image and paragraph) in the centre of the page. e.g.

Collection description in sidebar

Shows the collection featured image, title and description in the left sidebar e.g.

Hide collection details

This option hides all collection descriptions, leaving a clean, minimal layout e.g.

You can also set the amount of rows, and amount of products per row.

The 'Enable cart notes' will give customers the option of leaving a note at checkout.

You can also choose to 'Show product vendor', which shows the vendor of any products in the cart at checkout.

There are two options for 'Cart type'. 'Drawer' will open the cart in a sidebar on the right of the screen, and 'Page' will use a seperate page to show the cart.

Flow supports MailChimp for newsletters. You will need to find your MailChimp form action URL.

To find this, login to your MailChimp account, click on 'Lists', click on the list you want to capture (or create a new one). Click on 'Signup Forms', and 'Embedded Forms'. In the 'Copy/Paste onto your site' scroll down and look for this line:

<form action="//wetheme.us2.list-manage.com/subscribe/post?u=1c25646456463456456&amp;id=3865465467" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

You just need the URL that outlines your account details, which in the example above would be:

//wetheme.us2.list-manage.com/subscribe/post?u=1c25646456463456456&amp;id=3865465467

Which you will need to copy and paste into your settings.

If you are using your Shopify blog, you can enhance your visitors experience by setting a sidebar image, perfect for advertising your latest collection/competition/Instagram page. Once the image uploaded you can set 'Alt text', good for SEO, and also where you want the image to link, either on your site, or an external link.

Flow supports the following social media sites:

  • Facebook
  • Twitter
  • YouTube
  • Flickr
  • Pinterest
  • Instagram

You can add in your social profiles here, using the full URL of your fanpage/profile, not just your username, and it will link in the footer.

At the bottom of this section there is also a number of tickboxes so you can decide exactly how your visitors interact with your social profiles.

Once enabled, the popup functionality in Flow will show a popup box, either with an image or text (or a mixture of both) to any new visitor.

Under 'Style', you can choose whether to have a 'Newsletter' popup, which shows the newsletter signup box (set in 'Mailing List' on the main settings page), or an 'Image', where just an image is shown.

When testing your newsletter, it's advisable to use 'Test Mode - 0 Days', which will show the popup every time a page is loaded. Once ready, you can set the number of weeks you want to wait until the popup is shown again on a visitors screen.

Newsletter

There are three options for 'Newsletter':

  • Top Image - If you want to show an image above your mailing list box, simply upload it here, and enable.
  • Heading text - optional - If you want to add a header to your mailing list
  • Description text - optional - For a paragraph to detail what the mailing list is about

Image

Simply upload an image for it to show as your stores popup.

'Checkout' allows you to completely customise your customers checkout experience.

You can add logos, banner images, and match the colors to your stores.

v1.1.6 - 15th October
Now allows a 700px (instead of 500px) on hero image

Enhancement


v1.1.5 - 20th September
Improved layout of cart (not AJAX) on mobile

Enhancement


v1.1.4 - 15th September
Fixed Hero advert link

Bug


v1.1.2 - 6th September
Changed fonts for Byron

Enhancement


v1.1.1 - 2nd September 2016
Added ability to add links to homepage image

Enhancement


v1.1 - 1st September 2016
Changed H* tags to ensure theme adheres to a11y

Enhancement

Fixed Pinterest image not sharing from article pages

Fix


v1.0.1 - 18th August 2016
Added 'Onboarding' Features to Homepage

Enhancement


v1.0 - 11th August 2016
Initial Release

New