Adding a product card element
If you are looking for a way to fit in a product to an existing block organically, try adding a product card as a separate element. It’s possible to do so in almost all the blocks in the editor, plus it allows certain flexibility in terms of the layout you get.
Hover over a place in the block where you'd like to add a product card element and click on the "plus":
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1051_mqkqnm.png)
Then, choose the Product element in the list:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1041-4_h51fei.png)
Tip: You can star a Product element as your favorite for a quick access according to the instructions in the Adding elements article.
Hover over the Product element and click on the "gear" at the top left corner:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1052_1o41dxo.png)
In the Product layout choose the product you want to display:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1053_ea64py.png)
Once you are done adding products in the editor, make sure to publish the site for the changes to take effect.
Adding a product card element to an existing block
Hover over a place in the block where you'd like to add a product card element and click on the "plus":
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1051_mqkqnm.png)
Then, choose the Product element in the list:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1041-4_h51fei.png)
Tip: You can star a Product element as your favorite for a quick access according to the instructions in the Adding elements article.
Hover over the Product element and click on the "gear" at the top left corner:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1052_1o41dxo.png)
In the Product layout choose the product you want to display:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1053_ea64py.png)
Once you are done adding products in the editor, make sure to publish the site for the changes to take effect.
Updated on: 12/07/2023
Thank you!