From b87b83c7d3428de18b2c77d109344b01866ea0db Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Tue, 23 Aug 2022 16:37:02 +0300 Subject: [PATCH] docs: added "Products Overview" user guide (#2082) * docs: added products overview * docs: small changes to orders overview --- docs/content/user-guide/orders/index.mdx | 10 +- docs/content/user-guide/products/index.mdx | 166 +++++++++++++++++++++ www/docs/sidebars.js | 14 +- 3 files changed, 184 insertions(+), 6 deletions(-) create mode 100644 docs/content/user-guide/products/index.mdx diff --git a/docs/content/user-guide/orders/index.mdx b/docs/content/user-guide/orders/index.mdx index 532143a0f4..2b605b16ad 100644 --- a/docs/content/user-guide/orders/index.mdx +++ b/docs/content/user-guide/orders/index.mdx @@ -40,7 +40,7 @@ You can use filters to retrieve only orders matching specific criteria. On the Orders list page, you’ll find quick filters such as “Complete” and “Incomplete” at the top of the list. These filters show the complete and incomplete orders respectively. -You can click on one of these filters to quickly filter the orders based on whether they’re complete or not. +You can click on one of these filters to quickly filter the orders. ![Activated quick filter](https://i.imgur.com/FPW8tCY.png) @@ -52,17 +52,19 @@ To use advanced filters: - Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. - You can click on a field name to expand it and choose a filter for that field. +- Click on the Apply button at the top of the dropdown. + +This will retrieve the orders based on the filters you’ve selected. ![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/7N1OELc.png) -Once you’re done, you can click on the Apply button at the top of the dropdown. This will retrieve the orders based on the filters you’ve selected. - ### Save Advanced Filters as Quick Filters If there are filters that you need to use frequently, you can give the set of filters a name and save them to be used later. For example, you can save the filters used in the previous example as “European Orders”. To save an advanced filter: +- Click on the icon next to Filters. - Choose your filters from the dropdown. - Choose a name for the filters in the input at the end of the dropdown. - Click the Save button. @@ -98,7 +100,7 @@ Clearing filters does not delete saved quick filters. You can still apply them b You can search for orders by clicking the icon at the top right of the order list. When you search orders, you are searching by the first name supplied in the shipping address, the email associated with the order, and the order ID. -![Search orders by name](https://i.imgur.com/Z09rbmQ.png) +![Search orders by customer name](https://i.imgur.com/Z09rbmQ.png) ## Search Draft Orders diff --git a/docs/content/user-guide/products/index.mdx b/docs/content/user-guide/products/index.mdx new file mode 100644 index 0000000000..d1e5760355 --- /dev/null +++ b/docs/content/user-guide/products/index.mdx @@ -0,0 +1,166 @@ +import UiIcon from '@site/src/components/UiIcon'; + +# Products Overview + +In this document, you’ll get an overview of the product listing page and all the things you can do with it. + +## View List of Products + +You can view the list of available products in your ecommerce store by clicking on Products from the sidebar menu. + +![Products List](https://i.imgur.com/xvRZQwK.png) + +In the list, you can see product details such as the name, collection, inventory, and status of the product. + +:::tip + +If there are more than 15 products, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list. + +::: + +## Change Product View + +### List View + +To view products in a list view, which is the default view, click on the icon at the top right of the product list. + +### Grid View + +To view products in a grid view, click on the icon at the top right of the product list. + +![Grid View of Products List](https://i.imgur.com/GkTcjsO.png) + +## View List of Collections + +Collections are used to split products based on their type or function. For example, if you sell furniture and clothing, you can have two collections: Furniture and Clothing. + +You can view the list of collections on the Products page by clicking on the grey Collections headline next to the Products headline. + +![Collections List](https://i.imgur.com/RMRIGAW.png) + +In the list, you can see collection details such as the title, handle, and the number of products in the collection. + +:::tip + +If there are more than 15 collections, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list. + +::: + +## Filter Products + +You can use filters to retrieve only products matching specific criteria. + +### Quick Filters + +On the Products list page, you can find quick filters such as “Unpublished” at the top of the list. The “Unpublished” filter shows only draft products in the list. + +You can click on these filters to quickly filter the products. + +![Activated quick filter](https://i.imgur.com/VCob6F5.png) + +### Advanced Filters + +You can use advanced filters to furthermore limit the products shown based on specific criteria. For example, you can filter products to only show draft products created in a specific collection. + +To use advanced filters: + +- Click on the icon next to Filters. This will toggle a dropdown with categories for different fields. +- You can click on a field name to expand it and choose a filter for that field. +- Click on the Apply button at the top of the dropdown. + +This will retrieve the products based on the filters you’ve selected. + +![Advanced filters dropdown with more than one filter selected](https://i.imgur.com/WPlTtTA.png) + +### Save Advanced Filters as Quick Filters + +If there are filters that you need to use frequently, you can give the set of filters a name and save them to be used later. For example, you can save the filters used in the previous example as “Draft Clothing”. + +To save an advanced filter: + +- Click on the icon next to Filters. +- Choose your filters from the dropdown. +- Choose a name for the filters in the input at the end of the dropdown. +- Click the Save button. + +![Give the filters a name and click Save](https://i.imgur.com/OJ4G1ex.png) + +Once you click Save, you should see the new filter you added next to the Quick Filters at the top of the orders list. + +![Saved Filter shows as a quick filter](https://i.imgur.com/BE9RftP.png) + +To apply a saved quick filter, just click on it. + +### Delete Saved Quick Filters + +You can delete any saved filter you’ve created. To do that, simply click on the icon next to the quick filter’s name, and it will be deleted. + +### Clear Filters + +To clear all applied filters: + +- Click on the icon next to Filters. +- Click on the Clear button. + +![Click clear button in the advanced filters dropdown](https://i.imgur.com/MgESrMv.png) + +:::info + +Clearing filters does not delete saved quick filters. You can still apply them by clicking on them. + +::: + +## Search Products + +You can search for products by clicking the icon at the top right of the products list. When you search products, you search by product title, description, variant title, variant SKU, and collection title. + +![Search products by name](https://i.imgur.com/ch6dLZA.png) + +## Search Collections + +You can search for collections by clicking the icon at the top right of the collections list. When you search collections, you search by collection title and handle. + +![Search collections by title](https://i.imgur.com/KMJDIDJ.png) + +## Export Products + +To export products: + +- Go to the Products page. +- Click on Export Products at the top right. +- Click Export in the window that opens. +- Click on the icon at the top right of the page. +- You should see your new export loading. +- Once the export is ready, click on the Download button. + +:::note + +If you face any errors or difficulties, please contact your technical support team as this could be an issue in the storage integration used. + +::: + +![Click on the download button in the activity panel](https://i.imgur.com/EVhZExV.png) + +### Cancel a Product Export + +You can only cancel an unfinished product export. + +To cancel a product export: + +- Click on the icon at the top right of the page. +- Find the export you want to cancel. +- Click on the cancel button. + +![Click on the cancel button in the activity panel](https://i.imgur.com/O2IgDQz.png) + +### Delete a Product Export + +You can only delete a finished product export. + +To delete a product export: + +- Click on the icon at the top right of the page. +- Find the export you want to delete. +- Click on the Delete button. + +![Click on the delete button in the activity panel](https://i.imgur.com/KWZ195h.png) \ No newline at end of file diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index 148b3031aa..e778a73afd 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -501,8 +501,18 @@ module.exports = { items: [ { type: "doc", - id: "user-guide/orders/index", - label: "Introduction" + id: "user-guide/orders/index" + } + ] + }, + { + type: "category", + collapsed: false, + label: "Products", + items: [ + { + type: "doc", + id: "user-guide/products/index" } ] },