How to add the product widget to your Shopify store (Shopify 2.0)
To add the product widget to your site, please see the following guidelines;
Go to Online Store in your dashboard
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_f75p35.png)
Click on Customize
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1veqt3s.png)
At the top of the page, select Products
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_thdggl.png)
Click on Default Product or it's equivalent (what you have in your store)
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1yiv2i2.png)
Here, there are two steps involved. You can decide to add the widget as a block or as a section. You can learn more about them here: https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/.
For me, I'd prefer to add the product widget as a section so that it stands on its own and is nicely laid out on the site.
So the next step would be to click on add a section
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1nnwmkd.png)
Then choose the product widget
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1xqo0jf.png)
Once clicked on, it will load on your site like it shows below.
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_6eezxf.png)
Remember to save your work
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1eeq4qz.png)
If you're using a block: Follow the steps below
Click on add block
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_i6xxw6.png)
Select Product Widget
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_153k2l.png)
This is how it looks like when added as a block in the product information section. It takes the structure of all blocks in that section.
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_7tlcnz.png)
You can decide to move it up or down depending on your preference by clicking on the drag and drop icon ⋮⋮
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1egrxpn.png)
Remember to save your work.
Go to Online Store in your dashboard
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_f75p35.png)
Click on Customize
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1veqt3s.png)
At the top of the page, select Products
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_thdggl.png)
Click on Default Product or it's equivalent (what you have in your store)
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1yiv2i2.png)
Here, there are two steps involved. You can decide to add the widget as a block or as a section. You can learn more about them here: https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/sections/.
For me, I'd prefer to add the product widget as a section so that it stands on its own and is nicely laid out on the site.
So the next step would be to click on add a section
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1nnwmkd.png)
Then choose the product widget
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1xqo0jf.png)
Once clicked on, it will load on your site like it shows below.
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_6eezxf.png)
Remember to save your work
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1eeq4qz.png)
If you're using a block: Follow the steps below
Click on add block
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_i6xxw6.png)
Select Product Widget
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_153k2l.png)
This is how it looks like when added as a block in the product information section. It takes the structure of all blocks in that section.
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_7tlcnz.png)
You can decide to move it up or down depending on your preference by clicking on the drag and drop icon ⋮⋮
![](https://storage.crisp.chat/users/helpdesk/website/b4624435cf53a800/image_1egrxpn.png)
Remember to save your work.
Updated on: 16/08/2022
Thank you!