Product on Homepage

Simon_Schalumov
New Member
1 0 0

Hello friends,

I have a very simple question, how to show ONLY my single product on the homepage, without any collection. I want the page which comes when I click on a product in a collection to appear immediately on my homepage without clicking on a product from a collection first. 
I can't finde a way to skip this collection thing. To be clear, I want to have the exact same page with color options add to cart etc. just on the homepage.

My site www.seeyouthen.de

Thank you,
Simon

Replies 2 (2)
tim
Shopify Expert
2925 143 1042

Hi Simon,

there is a  Jumpstart (free) theme which probably can be adapted to your needs? 

Otherwise, you can do this:

0. Make a backup copy of your theme by clicking the 3-dot button and selecting Duplicate

1. Add a new Section, call it product-template-index.liquid

2. Make a copy of your product-template.liquid Section and paste it over the contents of the newly created section

3. Insert this code at the beginnning of the new section:

{% if section.settings.home_featured_product == blank %}
    {% assign product = all_products.first %}
{% else %}
    {% assign product = all_products[ section.settings.home_featured_product ] %}
{% endif %}

4. Replace the {% schema %} ..whatever... {% endschema %} at the bottom of the file with this:

{% schema %}
  {
    "name": "Product",
    "class": "index-section featured-product-section",
    "settings": [
	  {
        "type": "product",
        "id": "home_featured_product",
        "label": "Product"
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "skip_first_product_image",
        "label": "Skip first product image",
        "info" : "Make the first image for each product only appear on the collections page of your store. [Learn more](https://docs.shopify.com/manual/more/official-shopify-themes/boundless#skip-first-product-image-opti...)."
      },
      {
        "type": "select",
        "id": "product_image_type",
        "label": "Image style",
        "options": [
          {
            "value": "portrait",
            "label": "Tall/square"
          },
          {
            "value": "landscape",
            "label": "Wide"
          }
        ]
      }
    ],
    "presets": [{
      "name": "Featured product",
      "category": "Product"
    }]
  }
{% endschema %}

5. Save and go to Theme Customize to enjoy your new home page section

6. Result https://mod-a-boundless.myshopify.com/

7. Check a new look of the product pages while there :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
AuraRos
New Member
1 0 0

Hey @tim!

Thank you so much for your tip.
I'm trying to apply it, but for starters, I can't find any "product-template.liquid" in my site... I follow the steps copying the page that I think is the "product page", but nothing is working.

Could you point me in the right direction?

Thank you!!