In Shopify sell a single product on your home page

0

In Shopify sell a single product on your home page:

Be cautious:

To work with sectioned themes this document has not been verified. This documentation is under review and will soon be updated. You can try implementing it on your theme but bear in mind that it perhaps will not function.
You are advertising a solo product (for instance a book, or digital download), and you need to present all things on your homepage. In extra words you desire to make your product page your homepage.
You’re a single product 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 alone, you can previously feature a product on your homepage. On your Customize theme page, in the Homepage section, add a “Featured Single Product” to your homepage.
If a single product theme is not used by you, however you will require to do several work to convert your home page into a product page in shopify.

Guidelines:

View an illustration of what we will do here.
Be cautious:
This customization will not toil in the Launchpad themes and New Standard.

In this piece of writing

• Add your product to your Frontpage collection.
• To index.liquid Copy the content of product.liquid, and describe a product variable within index.liquid.
• Tell your theme.liquid file to do on your homepage the same it does on product pages.
• Editing your homepage content.

To your Frontpage collection add your product:

1. Click Products (or press G P P), from your Shopify admin:

products
2. Click on your product.
3. On your product page, situate the Collections piece.
4. Click the Add to collections drop-down and desire 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

Guidelines:

The whole content of index.liquid, need to be replaced with product.liquid content to display your product on the front page (or index page). What is seen on your homepage is controlled by index.liquid
Desktop iPhone Android

1. From your Shopify admin, right click Online Store and then Themes (or press G W T).
2. The theme that is required to be edited, click the button and click Edit HTML/CSS.
3. Below the Templates folder, situate and click product.liquid to open it in the online code editor.
4. Select all of the content of product.liquid (use CTRL-A for Windows and CMD-A for Mac) in the online code editor and copy all of the content (CTRL-C for Windows and CMD-C for Mac).
5. Beneath the Templates folder, situate and click index.liquid to open it in the online code editor.
6. In the online code editor, choose all of the content of index.liquid (use CTRL-A for Windows and CMD-A for Mac) and all the copied content need to be pasted (CTRL-V for Windows and CMD-V for Mac).
7. Add the following code at the top of the index.liquid file

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

Devoid of that code in put the index.liquid template will not know which produce to characteristic.

product-on-homepage-index

8. Save the changes.

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

1. From your Shopify admin, click Online Store and then click Themes (or press G W T).
2. Discover the theme you wish to edit, click the button, and then click Edit HTML/CSS.
3. Beneath the Layout folder, locate and click theme.liquid to open it in the online code editor.
4. Place your cursor anywhere in the your file, In the online code editor and do CTRL-F in Windows or CMD-F on the Mac to discover the subsequent code:
template contains ‘product’
5. Put back 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 the changes.

Note down:

that code, gaze for template contains “product”, template == ‘product’ and template == “product”. A theme can use double or single quotes, use == or contains. It’s also probable you won’t find any of it, and that is fine! For instance, if your theme is React or Supply you can hop this step completely.

Editing your homepage content:

The method 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.

Share.

About Author

Leave A Reply