How to use your Shopify theme to showcase products on the homepage

by Michael P. Hill

How to use your Shopify theme to showcase products on the homepage

Your Shopify theme’s homepage is a great place to showcase your best selling products, new items and other products you’re promoting — and the latest premium Shopify theme from Out of the Sandbox is packed with ways to present collections and products in new and exciting ways.

Featured collections options

Turbo allows you to select up to two collections to be prominently featured on the homepage using one of two layout options — all with just a few clicks of the mouse.

Shopify store owners can switch between a grid-based or slider layout for featured collections.

Shopify theme featured products grid

The grid format offers a more traditional look for your featured collections, with the main product image shown, along with any “new” banners or “sale” banners linked to your products.

You can choose to have the product title and price always visible below the image of the product, or you can choose to hide that info initially and display it only when the user hovers over the image (enable this in Turbo’s theme settings > Collection page > “Show product information on hover”).

Enabling the “quick view” option on your collection pages will also display a button when a user hovers over the product image; when clicked, this opens a modal window with a partial product description and an Add to Cart button. This is a quick way to let users get a bit more detail about a product or even purchase it without having to go through the full product page. Clicking the actual product image, meanwhile, takes the shopper to the full product detail page.

All of this is neatly packaged in a grid-style layout with two, three or four products per row.

Shopify theme featured products slider

On the other hand, a slider layout creates a horizontal row of products that can be scrolled through by the user; when they hover over this slider, left and right arrows will appear. When a shopper clicks either of these arrows, the Turbo Shopify theme cycles through all of the items in the collection with a gentle animation effect.

The slider format option for featured homepage collections is ideal if you want to showcase a large number of products on the homepage while keeping a clean layout, as it will only ever occupy one main row compared to a large grid, which could end up spanning several rows cover up to 3 rows.

With a grid style featured collection, the more products that are in the collection, the more space the unit takes up, which can lead to more visual clutter than might be desirable.

The slider layout option also includes the ability to default to showing three, five or seven products on page load, with any products over that count accessible by clicking the left and right arrows. Note that you’ll need a minimum of seven products to get the arrows to display and have the sliding action kick in, however.

Of course, as your product count goes up, it’s not realistic to expect that most shoppers will stick around and scroll through every product, so it’s important to remember to keep items you really want to showcase in the first batch by adjusting the sorting order.

Which option is best?

The grid option is more traditional and also lends itself to better “at a glance” skimming of available products and is ideal if you only want to feature a small number of items on the homepage.

The slider option, meanwhile, is a bit more of a modern look that does require user action to see all of the product in the particular collection.

It’s also worth noting that the slider option expands to the full width of the page, while the grid option gets margins on either side on larger screens.

Mixing and matching

Also keep in mind that you can have one featured collection use the grid layout and another use the slider option.

Not only does this help prevent the homepage from appearing repetitious, it’s also a great way to showcase products in different ways.

For example, a “new” or “featured” products collection might be smaller and finely curated, so the grid option might work best for this section.

On the other hand, another featured collection might have more products, making the slider option a better choice.

Finally, keep in mind that you can easily move the position of each featured collection module independently using the advanced Shopify theme homepage options.

What to feature

Besides promoting the obvious new and featured collections on your homepage, a good way to keep your homepage fresh is to use one or both featured collections areas to include thematic, seasonal or finely curated collections that change on a regular basis:

  • Create collections that relate, whether in style or functionality, to an upcoming holiday or season.
  • Offer a “color of the week” featured collection and showcase items in your store that are in that segment of the spectrum.
  • Group products by theme such as “A Day at the Beach” or “Holiday Glam” and then find creative ways to incorporate a variety of product types. These themes can also be tied to the current season or an upcoming holiday. These can be changed often to keep the homepage fresh.
  • Feature a rotating selection of staff picks and include the staff member’s name to add a bit of personality to your site.

All of these themed collections are also a great jumping off point for blog posts, too, so it’s a great way to expand your content marketing efforts with minimal extra effort:

  • Create a blog post that centers around the same theme as your featured collections.
  • This blog post is a great opportunity to feature additional photos or lifestyle photos that show your products in use.
  • Create one section for one of the products featured and link to that product so users can buy easily.
  • At the end of the blog post, link to the same collection that’s feeding into the homepage collection so blog readers can explore it directly.

Related products sliders

The Turbo Shopify theme also uses the slider approach to display related products on product pages, which gives added flexibility for helping shoppers find just the right product.

This feature includes the ability to select from three or five related products upon page load using a special tag. By default, most Shopify themes, including Out of the Sandbox’s, will simply show items from the same collection as the product.

Similar to the featured collection slider format, you’ll want to focus on keeping the most relevant related products in this first batch, saving other items for the subsequent ones.

When considering related products, be sure to consider potential objections shoppers may have with your product and how you can best present alternate options in the ones that are loaded and visible by default.

Other options for these default related products include ones that are similar in style, color or functionality or that potentially coordinate with the product being viewed. Foe example, related products for a pair of yellow rain boots could be: the same boots in black, yellow boots in another style, socks or even an umbrella.

If you choose to feature more related products, widen your scope and consider products that are a completely different style or look that might spark interest from a shopper who finds something lacking in the product they’re currently viewing.

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.