Customize Store Homepage

As I mentioned in a previous step, for most stores the homepage will be the most visited page so it's essential that it make a great impression. It should be designed to entice your visitors deeper into the store, into the products and from there into the checkout process.

Most themes provide a few basic ways to customize your homepage. You can display a number of products from a chosen collection. You could display some text from one or two of the pages of your store. You could display a main graphic or have a few smaller promotional graphics.


Features on the New Standard theme homepage from the top: latest article from blog (on the left), browse by vendor and collection (on left below blog) and four products from a specified collection (right).

More and more themes now are much more feature-rich and offer: a slideshow with captions, excerpts from the most recent blog posts and the latest tweets from your twitter account. Among other features, the New Standard theme offers a product slider and a menu to browse by vendor.

Each theme will have different controls for the homepage so it's really just a matter of jumping in there and figuring out how they work. It will be worth it though - to get that homepage that makes a great impression.



Include A homepage Slideshow

A key feature on many of the themes is a slideshow (or carousel) for the homepage that displays a number of images of your choice. It is a feature that can really make your homepage stand out particularly if you have some great images.

Each theme offers slightly different possibilities: more or fewer slides, some with captions and some even with prices. Subsequently each theme has different controls for the slideshow. Each theme will also have differing requirements when it comes to image dimensions. In general, you'll find recommendations for the ideal dimensions in the theme documentation.


In New Standard, you will find the homepage slideshow settings in the "Home - Slideshow" section. There are overall settings to enable the slideshow, customize the height of the slides, set the slides to rotate automatically and set the rotate frequency in seconds. Then there are the settings for each individual slide.


The controls for an individual slide in the homepage slideshow in the New Standard theme.


In New Standard, you can choose to display an image or an embedded video, for each slide. For an image you need to select a file from your computer. For a video you will need to grab the embed code for the video from YouTube, Vimeo or on whichever service has your video.



Embed A Video In The Slideshow

The process to embed a video from YouTube or Vimeo is quite similar.


To embed a video from Vimeo, find the video on the Vimeo site then:

  • Click the SHARE button at the top right of a video from Vimeo.
  • In the section "Embed", click on + Show options.

  • Select the ideal size for the video given your theme's recommendations for slide dimensions. For New Standard, I put in the width at 884 pixels.
  • Depending on the video, you may have options to customize colors and choose whether the video title, byline, etc. are displayed on the video.
  • Check the checkboxes if the video should autoplay and loop. To embed in the slideshow, it's probably best to make sure the options to show a text link and a description underneath the video are not checked.
  • Then click into the section under "Embed" and copy the embed code.

  • Open up the theme settings in your admin - for New Standard go to the "Home - Slideshow" section.
  • For the slide of your choice (I chose slide 4 in the screenshot above because I wanted the video after three other slides), select the checkbox Enable and select "Video" from the "Media Type" dropdown menu.

  • Choose a Background Color so that it blends into your content background color. In my case, I chose white (or #ffffff in hexidecimal).
  • Paste in the embed code for your video into the "Video Embed Code".
  • Make sure "Link Through Type" is set to "Entire Slide" so that if you click anywhere on the video it will open up the link of your choice.
  • In the "Link URL field", type or paste in the address of the page you want visitors to go when they click on the video.
  • Click the Save button. When the theme settings are confirmed as saved, click the View your website and check the video appears you want it.

That's it. It's quite a lot of steps but it's really quite straightforward. I set up a video on the fourth slide on the imposters site. Take a look if you like!


Display Social Media Icons

The settings to display icons linking to your store's social sites are usually quite simple. They'll generally be found in a Footer section in the theme settings. Copy and paste in the addresses for your store's page on each of the social sites included.

Many themes also offer integrated social sharing so that a visitor can for example easily share a product to Facebook, Twitter, Google+, etc. There may be some settings to enable or disable individual services.



Show Payment Methods


In general, you will find the settings for the display of payment methods in the "Footer" section of the theme settings. Normally this is a simple checkbox list of payment methods.



Email Newsletter Subscription

Many themes integrate with the email newsletter service Mailchimp. This means that the theme comes with a newsletter subscription box so that when a visitor subscribes to your newsletter, their email address will be added automatically to the list in Mailchimp. Shopify will integrate also with other email newsletter services like Campaign Monitor and Constant Contact, through the use of apps.



To integrate Mailchimp you will need to retrieve the Mailchimp Form Action from Mailchimp. This is quite a long process but simple if you follow the instructions. When you have the Mailchimp Form Action, it will need to be copied and pasted into your theme settings. In New Standard, you will find this in the "Footer" section of the settings. Shopify have put together a page explaining it step-by-step here.