Sell a single product on your home page

You're selling a single product (e.g. a book, or digital download), and you want to present everything on your homepage. In other words, you want to make your product page your homepage.

If your theme is Solo, you can already feature a product on your homepage. On your Customize theme page, in the Homepage section, add a "Featured Single Product" to your homepage.

If you aren't using a single product theme, however, you'll need to do some work to turn your homepage into a product page.

Did you know?

View an example of what we will do here.

Caution

This customization will not work in the New Standard and Launchpad themes.

Add your product to your Frontpage collection

  1. From your Shopify admin, click Products (or press G P P):

    Products

  2. Click on your product.

  3. On your product page, locate the Collections section.

  4. Click the Add to collections drop-down and choose Frontpage.

    Single product 1
  5. Save your changes.

Copy the content of product.liquid to index.liquid, and define a product variable inside index.liquid

Did you know?

You'll need to replace the whole content of index.liquid with the content of product.liquid to display your product on the frontpage (or index page). The template index.liquid controls what is seen on your home page.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Templates folder, locate and click product.liquid to open it in the online code editor.

  4. In the online code editor, select all of the content of product.liquid (use CTRL-A for Windows and CMD-A for Mac) and copy all of the content (CTRL-C for Windows and CMD-C for Mac).

  5. Under the Templates folder, locate and click index.liquid to open it in the online code editor.

  6. In the online code editor, select all of the content of index.liquid (use CTRL-A for Windows and CMD-A for Mac) and paste all of the content that you copied (CTRL-V for Windows and CMD-V for Mac).

  7. At the very top of the index.liquid file, add the following code:

    
    {% assign product = collections.frontpage.products.first %}
    
    

    Without that code in place, the index.liquid template will not know which product to feature.

    Product on homepage index
  8. Save your changes.

Tell your theme.liquid file to do on your homepage the same it does on product pages

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Layout folder, locate and click theme.liquid to open it in the online code editor.

  4. In the online code editor, place your cursor anywhere in the your file, and do CTRL-F in Windows or CMD-F on the Mac to find the following code:

    template contains 'product'
    
  5. Replace all occurrences of the above code with:

    true
    

    The template variable gives us the name of the template being rendered on the page. With that last edit, everything that was previously done on product pages will be done on all pages, including your homepage.

  6. Save your changes.

Note

If you're not finding that code, look for template contains "product", template == 'product' and template == "product". A theme can use single or double quotes, use == or contains. It's also possible you won't find any of it, and that is fine! For example, if your theme is React or Supply you can skip this step entirely.

Skipping the cart page (optional)

By default, customers are redirected to the cart page when they add a product to their cart. From there, they have the option to continue shopping, edit quantities, or check out.

To keep almost all of your website on one page, you might want your customers to go to checkout directly after they've added your product to their cart.

Note

Skipping the cart page does not work if you have a drawer cart enabled. If you want to skip the cart page, you must change the cart type to "page" in your Customize theme page.

To do this:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Templates folder, locate and click index.liquid to open it in the online code editor.

  4. In the online code editor, locate an opening form tag that looks like this:

    <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
    

    Your eyes can't easily find the tag? In the online code editor, place your cursor anywhere in the the file, and do CTRL-F in Windows or CMD-F on the Mac to look for <form.

  5. Between the opening and closing form tags, add this:

    <input type="hidden" name="return_to" value="/checkout" />
    
  6. Save your changes.

Editing your homepage content

The way you'll edit the content of your homepage will be by editing your product description. Go to the product details page in your admin, and edit away.

Want to discuss this page?

Visit the Shopify Community