What is Focal

Focal is a beautiful, versatile, clean and fully configurable theme. Here are some of its features:

  • It is an ideal fit for a wide range of products.
  • An awesome, highly configurable home page.
  • Quick shop, for better user experience
  • Infinite scrolling or pagination on collection page (completely configurable)
  • A beautiful search feature, with native auto-completion (no need for third party applications!)
  • Colors and backgrounds are entirely customizable, without writing a single line of code!
  • Fully responsive, so that your mobile users can enjoy an unforgettable experience.
  • Ability to add one or many videos in a product page
  • Retina support.
  • Beautiful full-width slider, with three different text positioning options.
  • Painless MailChimp integration.
  • Integrates with Shopify Reviews application.
  • A beautiful contact form.
  • Internationalized in English and French.
  • Much, much more...

Organisation

This documentation is organized in several sections. It will help you to take full advantage of this theme.

Remember, though : the best way to customize your theme is to experiment by playing with the various settings. Don't worry, you won't break anything! If you want to revert to the original theme settings, it's really easy. Just follow those steps:

  1. Go to your theme settings.
  2. On the left, open the drop down for the "Theme presets" section. It should say "Custom" by default.
  3. You can see all the theme's original presets ("Standard", "Black Box"...). Select the one you prefer.
  4. Click save: you're done, your theme settings have been reseted to its original state!

Table of Content

  1. General

    1. Terminology
    2. Where can I customize my settings?
    3. How can I change the default language of my theme?
    4. How can I localize the theme in my own language?
    5. How can I change a specific sentence?
    6. Why the theme does not have currency conversion feature?
    7. How can I activate and configure the promotional popup?
    8. How can I add a newsletter field in promotional popup?
    9. How can I enable auto-completion search on articles and pages?
    10. What if I need very specific customization that are not possible by default?
  2. Global Settings

    1. What is a favicon?
    2. How can I control the general appearance (colors...)?
    3. How can I upload my own logo?
  3. Header

    1. How can I separate the header from the slider on home page?
    2. How can I add a top bar to display contact information?
    3. How can I set a beautiful background image in header?
    4. How can I avoid the crop of slideshow images?
  4. Navigation
      1. How many navigation levels does the theme support?
      2. How can I create sub-levels?
      3. Does the navigation works with non-Latin characters (Chinese, Japanese, Hebrew...)?
      4. What is the mega nav feature?
    1. Footer

      1. How can I add arbitrary links?
      2. How can I display social networks?
      3. How can I set my supported payment methods?
      4. What is MailChimp? How can I use it to setup a newsletter?
      5. What is CampaignMonitor? How can I use it to setup a newsletter?
    2. Home page

      1. Why should I care about the home page?
      2. How do I configure the slideshow?
      3. What are "home page modules"?
      4. How do I enable/disable modules and decide their order?
      5. How can I have a different background color for each module?
      6. Configuring the new products/featured products modules
      7. Configuring the featured collections module
      8. Configuring the featured content modules
      9. Configuring the Instagram module
      10. Configuring the newsletter module
      11. Configuring the blog module
      12. How can I add a video in the home page ?
    3. List of collections page
      1. How can I choose which collections to display?
      2. How to create custom pages to display sub-collections?
    4. Collection page

      1. How can I enable infinite scrolling?
      2. How to filter by one product tag at a time?
      3. How can I display available colors for a product?
      4. How can I add my own color for the color selector?
      5. How can I add a custom label to a product?
      6. How can I display an alternate product image when hovering it?
    5. Product page

      1. How can I add a video in my product showcase images?
      2. How can I add a small note next to the Add to Cart button?
      3. How can I add a size chart?
      4. How can I add a specific image to one variant?
      5. How can I hide variants that do not exist?
      6. How to automatically redirect customers to the cart?
      7. How can I add specific labels to the product, like "new" or "pre-order"?
      8. How can I configure the tabs in the product section?
      9. How can I add a unique tab for a single product only?
      10. How can I add a color selector?
      11. How can I add my own color for the color selector?
      12. How the "related products" section work?
      13. How can I enable reviews using the Shopify Reviews app?
    6. Blog
      1. How can I display an image for the article?
      2. How can I force all the comments to be moderated before being visible?

    Still have question?

    You have found a bug? This documentation was not clear enough? You can contact us at shopify-support@maestrooo.com. We do our best to answer all support requests within 24 hours (during working days). We work from 9am to 5pm, UTC +1, and are able to help you both in English and French. If you do not receive a response from us within 24 hours, please do not send a follow-up email, as this will bump you to the end of our support queue.

    Changelog

    Starting from v4 (introduced on 10th of December 2015), we will track of all new versions of Focal. You can know your theme's version by clicking into the small "Info" link at the top right of the Theme Settings.

    If you ever need to upgrade the theme, you'll need to go through the upgrade process, as described in this page. We only recommend you to upgrade the theme if a new version fixes a bug you have, or if you need a new feature introduced by a new version.

    Alternatively, for bug fixes, you can also contact us directly and we'd be happy to backport one or two small fixes.

    • 4.9.1: prevent the theme to zoom in iOS 10 when selecting an input / fixed an issue where the Apple Pay button was forced to be displayed.
    • 4.9.0: CartJS, the library we were using to power a highly dynamic cart, was removed from the cart part, due to the complexity it introduced for app developers to integrate with Focal. While CartJS offered us nice advantage, the fact that cart was rendered using JavaScript prevented anyone to easily modify the Liquid. We have therefore reverted to pure Liquid for this part. The only thing that we've lost is that now, removing a product from the cart will trigger a complete reload of the page (while previously it removed the item without reloading the page at all).
    • 4.8.0: Add a built-in currency converter.
    • 4.7.4: Updated the Instagram icon to the new one.
    • 4.7.3: Fixed a bug where the "price" in rich snippet could be invalid if you were using a non-american formatting for numbers.
    • 4.7.2: On mobile, featured images will now stack up instead of being in the same row (which resulted in very small images).
    • 4.7.1: Fixed a bug where slideshow images could appear blurry on Firefox.
    • 4.7.0: Added support for the new Shopify Script Editor (Shopify Plus customers only): cart will now displayed discounted prices.
    • 4.6.2: Improve performance on mobile by loading smaller slideshow image instead of the high resolution one.
    • 4.6.1: Alt tags are now properly escaped. Previously, if your alt tags contained special characters such as quotes ("), the alt tag was incorrectly set.
    • 4.6.0: Added new colour settings to control the slideshow button independently of heading and sub-heading / added a new "Terms and Conditions" feature for cart page.
    • 4.5.2: Fixed a bug where mobile search could be white.
    • 4.5.1: Fixed a bug where colour swatches did not properly align if you had a lot of colours.
    • 4.5.0: Built-in size chart support has been added. Learn more about this feature by clicking here.
    • 4.4.1: Fixed a bug where the "featured images module" (previously known as "marketing module") did not display correctly on Internet Explorer 11 when the "two images in a row" or "three images in a row" layout was used.
    • 4.4.0: Instagram integration has been re-added back, as a solution has been found by the Shopify team!
    • 4.3.0: Instagram integration has been removed from the theme due to new Instagram rules. Learn more by clicking here.
    • 4.2.7: Fixed a bug where drop-downs in multi-line main navigation could not be properly hovered.
    • 4.2.6: Increased the size of the logo on mobile.
    • 4.2.5: Fixed a bug where "alternate product image" on collection pages didn't work on touch desktop devices (like Surface Pro).
    • 4.2.4: Featured images module (previously known as "marketing module") will now properly align images on mobile when using the collage mode.
    • 4.2.3: Fixed a bug that displayed the same vendor if products with different vendors were added to the cart.
    • 4.2.2: When sharing the home page on social networks, it will now use your logo as image instead of an random image from the page.
    • 4.2.1: Fixed a bug where "About my shop" footer content did not respect break line.
    • 4.2.0: Due to a lot of requests, we've re-added back a setting that allow to control how many collections per row are displayed for the "featured collections" module.
    • 4.1.1: Fixed a potential issue on desktop touch devices when opening dropdown menu. HAPPY NEW YEAR 2016.
    • 4.1.0: Added a new setting in the "Product page" section that allows to always display the product's description on the right instead of as a tab.
    • 4.0.6: Fixed a bug where mobile menu could not be open on desktop touch devices such as Surface Pro.
    • 4.0.5: Added some spacing for marketing module if slideshow is not enabled, so that it looks better.
    • 4.0.4: Added a new theme setting that allows to make product tag cumulative (default) or exclusive on collection page / fixed a bug where number of related products did not respect your settings / fixed incorrect pagination labels on blog ("newer articles" was used instead of "older articles" and vice-versa).
    • 4.0.3: Improved on-boarding experience by displaying more precise error messages if you do not configure Instagram module correctly.
    • 4.0.2: Fixed a bug where product images appeared too big on latest Firefox versions on collection pages.
    • 4.0.1: Fixed a bug where alternate image was not displayed on related products.
    • 4.0.0: This new version is a complete rewrite of the theme. Focal is now faster, more stable, and comes with a lot of new features (new quick shop, re-designed blog, display available color on collection page, simpler theme settings... and many more!).