How to add an independent button linked to an independent product page

[toubaby]

All of the buttons linked to the same style of page. For example, I add a collection list on one button page then all the other button pages show the same collection list...

How can I set up the button so that it can be linked to a product page that contains its own collection list? Many thanks!

[LitCommerce · Accepted solution]

Hi @toubaby,

I got it, you want to customize different collection list for collection page. Because you mentioned 3 buttons, it will cause confusion.

If you want different collection pages, you need to add different templates for it. You can follow the steps:

- Step 1: Create template for collection. https://i.imgur.com/6DqnD7i.png 

With 3 different collections, you need to add 2 templates for "Baby & Kids Clothes" and "Accessories"

Collection all use default template.

- Step 2: Select newly created templates for collections. https://i.imgur.com/rODVSw6.png

- Step 3: Go back to the Customize and setup it, it will work individually for each collection page.

Hope it is clear to you.

[LitCommerce]

Hi @toubaby,

Can you send me the screenshot of the button and the link showing it. I will check it.

[toubaby]

Anything under collections shows the same style. Here are the links:

https://toubaby.com/collections/baby-kids-clothes

https://toubaby.com/collections/accessories

And here are the buttons:

Thank you very much for your help!

[LitCommerce]

Hi @toubaby,

I don't really understand your question, I checked and the buttons are pointed to separate collection pages.

https://i.imgur.com/H87Laqt.png

Or you can change it link in Customize: https://i.imgur.com/9OWn4wI.png

Hope it is clear to you.

[toubaby]

Thank you indeed for the very quick help, LitCommerce!

If I add a collection list on the page those buttons link, they all link to the same collection list... Can I customize the these collection lists?

I have turned on the collection lists, can you please help take a look again?

For example, I want collection list 1 and 2 for button "shop clothes" and collection list 3 and 4 for button "shop accessories", not collection list 1,2,3and4 for every button.

Many many thanks!

[toubaby]

3 different buttons link to these page:

https://toubaby.com/collections/baby-kids-clothes

https://toubaby.com/collections/accessories

https://toubaby.com/collections/all

I tried to edit the collection list on one page. Then the other ones will change too...

Thank you, LM!

[LitCommerce · Accepted solution]

Hi @toubaby,

I got it, you want to customize different collection list for collection page. Because you mentioned 3 buttons, it will cause confusion.

If you want different collection pages, you need to add different templates for it. You can follow the steps:

- Step 1: Create template for collection. https://i.imgur.com/6DqnD7i.png 

With 3 different collections, you need to add 2 templates for "Baby & Kids Clothes" and "Accessories"

Collection all use default template.

- Step 2: Select newly created templates for collections. https://i.imgur.com/rODVSw6.png

- Step 3: Go back to the Customize and setup it, it will work individually for each collection page.

Hope it is clear to you.

[toubaby]

Thank you very much, LM! That works perfectly!

May I ask one more question: How to modify the width/size of the collection list?

For example, it lists 2 collection boxes in a line on homepage/collection page on PC view. Can I list 4 in a line on PC view?

And,

it lists 1 collection box in a line on homepage/collection page on mobile view. Can I list 2 in a line on mobile view besides the "allow for swipe"?

Many many thanks, LM!

[LitCommerce · Accepted solution]

Go to Assets > section-collection-list.css and paste this at the bottom of the file:

.collection-list .collection-list__item{
	width: 25% !important;
}
@media screen and (max-width: 989px){
	.collection-list .collection-list__item{
		width: 50% !important;
	}
}

Hope it helps!

[toubaby]

That works very perfectly! Thank you indeed, LM!!! Really appreciate it!