Home page

Why should I care about the home page?

If there is only one page that you should polish, it is the home page! While a lot of your visitors will reach your website directly into a product page (from Google, for instance), there is great chance that they navigate to your home page.

The homepage should be updated often and it must represents your shop's philosophy. Don't hesitate to iterate often, and do experiment with the theme settings;

If you decide to use a slider, do not hesitate to spend hours finding beautiful images (however, pay attention to images licences as you may not be allowed to embed images into your shop!).

To that extent, we encourage you to have a look at our test shop for Kagami theme:

What are home page modules?

We said that home page is very important, and to that extent, Kagami offers so-called "home page modules". Home page modules are modules that can be activated/deactivated, and customized individually. Here are the various modules currently supported:

  • Slideshow module: this module, as its name implies, is... well... a slideshow!
  • Products modules n°1 and n°2: those modules are linked to collections, and are used to display products. You can configure those modules very precisely, by choosing if you prefer a grid or Masonry layout.
  • Collections module: this module is linked to a link-list, but display collections instead.
  • Newsletter module: if you have properly configured your MailChimp account, this module can be used to display a beautiful module to encourage users to subscribe to your newsletter.
  • Featured content modules n°1 and n°2: those modules are linked to a Shopify page, and allows you to display a free content (like custom text, image, video...).
  • Social module: this module allows you to display your latest Instagram image and/or latest tweet.
  • Blog module: this module allows to display the last 3 blog posts. Free Text Module: this module allows you to write a title and content. You can use this module for whatever you want, from displaying a "welcome" message, or to announce temporary offers... Focal comes with support for two free text modules (that work exactly the same).

How do I enable/disable modules and control their order?

In order to enable/disable a module, follow those instructions:

  1. Open the "Home page" section.
  2. Organize each section by choosing the ones you want. Remember that each section can only be used once.

Configuring the slider / slider best practices

Kagami slider is a beautiful, full-screen slider that allows you to display up to 6 images. Each slide can also contains a title, subtitle and a button.

To configure the slider, open the "Home page - slider module" section in your theme settings. You will find various settings to upload your slide, and control the logic of the slider. You can also modify font and color in "Typography" and "Colors" main sections, respectively.

The slider is flexible enough to support any image sizes. However, for best results, we recommend you to make sure that each image has the same size, to be in JPG format. From our experience, 1500*700px is a good trade-off. For optimize load times, we also highly recommend you to optimize your images by using a tool such a JPEGmini.

Can I disable the slider?

Yes! In Kagami, the slider is nothing more than a home page module, and follows the same rule as other modules.

This means that you can order the slider at any place in the page. To disable it, you simply need to remove the letter "A" from the "Modules order" setting (you can find this setting in the "Home page" section of your Theme Settings).

Configuring the products modules n°1 and n°2

Those two modules allow you to display products in your home page. To configure those modules, you first need to create a collection. In Shopify, a collection is a way to group products.

In order to make your life easier, we highly recommend you to create specific collections just for your home page instead of reusing existing collections.

This allows you to precisely select the number of products to display, and allows you to update the products that appear in the home page without having to impact other collections.

Once you have created your collection, follow those steps:

  1. In your Theme Settings, open the "Home page - products module n°1" or "Home page - products module n°2".
  2. In the "Collection to use" setting, select the collection you've just created. You can also choose between Masonry and grid layout, on a per module basis.
  3. Finally, do not forget to enable the module by enabling it in the "Home page" section.
  4. Save!

This module allow you to display collections in your home page. They are linked to so-called "link-list". First, you need to create a link-list. To do so, follow those steps:

  1. In your shop's dashboard, click on the "Navigation" section on the left. Click on the "Add a link list" button.
  2. Give a name to the linklist (this has no importance, so you can simply enter "Featured Collections" for instance).
  3. In the "Links" section, you will be able to add one or multiple links. In the "Links to..." dropdown, you must select "Collections", and select your product. You can add as many link as you want.
  4. Save!

Now, we must instruct the module to use the newly created linklist. To do so:

  1. In your Theme Settings, open the "Home page - featured collections module".
  2. In the "General" sub-section, select the linklist you've just created in the "Linklist to use" setting.
  3. Finally, do not forget to enable the module by enabling it in the "Home page" section.
  4. Save!
Pro-tip: when using this module, we display collection image for each collection. If no image has been attached to the collection, we instead display the first image of the first product from the collection.

Configuring the featured content modules n°1 and n°2

Kagami allows you to create up to two featured content modules. A featured content module is simply a module where you decide yourself the content. They can be used to display some content, an image, a video, testimonials... your imagination is the only limit!

To use this feature, you must first create a page. This page title and content will be used to populate the module. To do so, follow those steps:

  1. In your Shopify dashboard, open the "Pages" section.
  2. Create a page. The title will be used as the module section, while the content will be used as... well, the content. You can format the content the way you like.
  3. Save!

Now, we must instruct the theme to use the page. To do that:

  1. In your Theme Settings, open the "Home page - featured content module n°1" or "Home page - featured content module n°2".
  2. In the "Page for content" setting, select the page you've just created.
  3. Finally, do not forget to enable the module by enabling it in the "Home page" section.
  4. Save!

Configuring the newsletter module

The newsletter module integrates with MailChimp. Before using this module, you must create an account on MailChimp if you don't have one already. Then, you'll need to configure it in the theme. To do so, follow those steps:

  1. In your Theme Settings, open the "Newsletter" main section.
  2. You will need to enter a form action. To retrieve a form action from MailChimp, please follow those Shopify instructions. Copy-paste it into the corresponding field in the Theme Settings.
  3. Finally, do not forget to enable the module by enabling it in the "Home page" section.
  4. Save!

Configuring Instagram and Twitter modules

Kagami has a built-in module that allows you to display the latest three pictures from your Instagram account, as well as the latest tweet from your Twitter account.

Instagram

To enable Instagram, follow those steps:

  1. In your Theme Settings, open the "Home page - social module" theme section.
  2. In the Instagram sub-section, click on "Enable".
  3. Then, you will need to enter the access token. An access token is a special code that allows the theme to retrieve images from your account. The simplest way to retrieve your token is to click on this link and log in into your Instagram account (don't worry, this is safe, and we don't store any of your Instagram data). At the end of the process, you'll have a green box that contains both an access token. Copy paste this setting in the theme settings.
  4. Finally, do not forget to enable the module by adding the "Social feed" module in the "Home page" section (as indicated) in the previous section.

Twitter

To enable Twitter, follow those steps:

    1. In your Theme Settings, open the "Home page - social module" theme section.
    2. In the Twitter sub-section, click on "Enable".
    3. Then, you will need to enter the widget ID. The widget ID gives access to the theme of your tweets. To retrieve the widget ID, go to this link. Then, click on "Create a widget", and copy-paste the long number that appears in the URL, as shown in the following picture:

Twitter widget ID

  1. Finally, do not forget to enable the module by adding the "Social feed" module in the "Home page" section (as indicated) in the previous section.

Configuring the blog module

The blog module is a specific module that allows you to display the latest 3 blog posts. By default, Shopify creates automatically for you a blog called "News".

You can change the default blog that is used in the "Home page - blog posts module" section in your theme settings.

How can I embed a video in my home page?

While there is no built-in module for displaying a video, you can actually use a featured content module to that extent.

Please follow our documentation to how create a featured content module. The only need to do is to add a video in the Shopify text editor. You can learn more about how to add a video into the Shopify text editor in this Shopify documentation.

Why image is displayed for product video, instead of the video itself?

In the home page, you may have a lot of products. If you add one video per product, they will be ALL loaded once the page loads, which results in a lot of requests, and considerably slow down your page.

As a consequence, on the home page, we instead use the image associated with the video. Then, the video is only really loaded when user clicks on the image.