How can I set my collection page as my homepage?

Oscar6
New Member
5 0 0

Hi! 

This has been asked before, but the solutions are outdated and do not work.

 

I need my collection page to become my homepage. So when a client enters my website address in a browser, they would land on this collection page. Will appreciate if someone would help with this. Thanks in advance!

Replies 12 (12)

Visely-Team
Shopify Partner
1843 210 488

Hey Oscar,

It well depends on your theme, but I think you can just reuse collection.liquid file making sure to fetch the collection you want your product to be fetched from and provided it as the context so the code in the collection.liquid has it available.

Hope that helps!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog

Ryan45
Shopify Partner
125 0 21

make sure you back up the site first.

But you could probably just copy the template used for catalog, probably something like catalog.liquid, and paste it into index.liquid

Oscar6
New Member
5 0 0

Dear Sergiu and Ryan, thank you for your replies.

I use Supply theme. 

Not sure if I understood you fully Sergiu, but I think you and Ryan mean the same thing?

I have tried this before. After I copy the contents of my collection-template.liquid into index.liquid, I receive an error "Line 215 — Liquid syntax error: Unknown tag 'schema'". So I cannot even save it.

Will appreciate further help with this 🙂

Visely-Team
Shopify Partner
1843 210 488

Hey Oscar,

I didn't know what theme you are using, hence a more general suggestion. I now know you are running on Supply theme, so here is a more detailed one.

Replace the content of your index.liquid with:

{% section 'collection-template' %}

Open sections/collection-template.liquid for editing and the following snippet to the top:

{% if section.settings.homepage_collection %}
{% assign collection = collections[section.settings.homepage_collection] %}
{% endif %}

At the bottom of the page, you should see the schema used to define the collection-template section settings which are editable through Theme Customization tool. Add a new field to it:

...
,
{
    "type": "text",
    "id": "homepage_collection",
    "label": "Homepage collection"
}
...

Go to Theme Customization, on the left handside bar you should see the new Collection setting, click on it, in the section settings you should now see the newly created field "Homepage collection". You can type the collection handle you want the products to originate from, hit save and you should be good to go.

You can work it further to your liking. Hope that helps!

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
Emanuel2
Visitor
1 0 0

aceduck
Tourist
12 0 2

Hey Sergiu, your solution works fine to show the products on the main page, but the filter and sort buttons get broken. did you ever manage to fix this?

jeffnoyes
Visitor
3 0 0

it would be nice if someone would answer this and keep the content up to date.  Has anyone seen how to successfully make the Collections page become the Homepage for the Debut theme?

jeffnoyes
Visitor
3 0 0

This information is out of date.

Oscar6
New Member
5 0 0

Dear Sergiu,

Thank you so much, it worked.

However, I have some issues, for ex. no pruduct filter on the sidebar, and I have two Sort By dropdowns. Screenshot attached. 

So how can I:

  1. Have the product filter back?
  2. Leave only one "sort by" dropdown? Please also note that neither of them work now. 
  3. Get rid of "products" word (it is the name of my collection), it was not there before on the original page?

 

deven1994
Shopify Partner
42 3 19

Add the below code and insert theme.liquid before the head tag

{%- if template contains 'index' -%}
<script>
window.location.href = '/collections/all';
</script>
{%- endif -%}





 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on kdevender353@gmail.com regarding any help Whatsapp Me
Shopify Partner | Devenk
BeamJokerFavor
Explorer
51 3 6

bingo, this worked instantly and saved me $600.

deven1994
Shopify Partner
42 3 19

@BeamJokerFavor That's Awsome 😀

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on kdevender353@gmail.com regarding any help Whatsapp Me
Shopify Partner | Devenk