Your safety is important to us. If you notice any suspicious emails that appear to come from Shopify, please forward them to safety@shopify.com. Visit the Help Center page on phishing for more information.

Sell a single product on your home page

Caution

This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.

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.

Tip

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.

  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

Tip

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. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

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

  3. 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).

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

  5. 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).

  6. 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
  7. Save your changes.

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

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

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

  3. 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'
    
  4. 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.

  5. 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.

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