Hello! I am currently building a product page on plasmic with my own products, where I want the users to be able to search with the searchbar, for which I’m using “text input” field.
I used Plasmic’s “Product Collection” Component which does work when I connect the Product collection’s search prop with the text input field (using dynamic value).
However, the problem is I just cannot change the Product Collection Component’s ‘Product Media’ and ‘Text’ !!!
For some reason the product media and text are inside children slot so If I try to edit one, all the others get edited. I want to be able to add my own products in with their own images and distinct inputs.
Please help me go through the steps by which I can completely customise product collection component, being able to add my own products and use the search bar feature.
Response is greatly appreciated!!
You’re unable to (a) add your own images and (b) distinct inputs because it’s a component that is repeated to dynamically show all the products in the selected collection.
(a) To systematically show all your own products, you’ll need to change the dynamic value on the collection/repeated component (set it to show your collection of products instead). You can see Plasmic’s overview of using dynamic values for more about that.
If you don’t have a place where you’ve already set up products (and any desired fields), you can use something like Shopify, AirTable, Plasmic CMS, Hygraph, or any other CMS. After that, you can pull up your collection via a Data Integration.
(b) To create distinct inputs/customize the way each product in the collection looks (like adding a description or an ‘on sale’ tag), you can create variants on the product component. You can check out Plasmic’s overview of component variants for that.
Oh wow thank you for the response, I’ll surely check it out!
1 Like
