diff --git a/content/applications/websites/ecommerce/checkout.rst b/content/applications/websites/ecommerce/checkout.rst index 5891eceb60..fbbcb7fca4 100644 --- a/content/applications/websites/ecommerce/checkout.rst +++ b/content/applications/websites/ecommerce/checkout.rst @@ -212,13 +212,12 @@ as: `; - :guilabel:`Promo Code`: to allow customers to redeem :ref:`gift cards ` or apply :doc:`discount codes <../../sales/sales/products_prices/loyalty_discount>`; -- :guilabel:`Add to Wishlist`: To allow signed-in users to remove a product from their cart and add - it to their wishlist, go to :menuselection:`Website --> Configuration --> Settings`, scroll to - the :guilabel:`Shop - Products` section, and enable :guilabel:`Wishlists`. The :guilabel:`Add to - Wishlist` option is then enabled by default in the website editor. +- :guilabel:`Add to Wishlist`: :ref:`Enable wishlists ` to allow + signed-in users to remove a product from their cart and add it to their wishlist using the + :guilabel:`Save for later` option. .. note:: - - If a :doc:`fiscal position <../../finance/fiscal_localizations>` is detected + - If a :doc:`fiscal position <../../finance/accounting/taxes/fiscal_positions>` is detected automatically, the product tax is determined based on the customer's IP address. - If the installed :doc:`payment provider <../../finance/payment_providers>` supports :ref:`express checkout `, a dedicated button is displayed, diff --git a/content/applications/websites/ecommerce/products.rst b/content/applications/websites/ecommerce/products.rst index c87ed50a4f..c3bc79ec21 100644 --- a/content/applications/websites/ecommerce/products.rst +++ b/content/applications/websites/ecommerce/products.rst @@ -7,10 +7,10 @@ Products **Odoo eCommerce** allows you to :ref:`add products ` and manage your :ref:`product pages ` directly from the Website app. It also allows you to add :ref:`product variants ` and -:ref:`digital files `, -:ref:`translating ` the product page content, -:ref:`managing stock `, and enabling -:ref:`product comparisons `. +:ref:`digital files `, :ref:`translating +` the product page content, :ref:`managing stock +`, and enabling :ref:`product comparisons +`. .. _ecommerce/products/add-products: @@ -62,75 +62,6 @@ go to :menuselection:`Website --> eCommerce --> Products`, click the :icon:`fa-c #. In the :guilabel:`Is Published` column, tick the box for any of the selected products, then :guilabel:`Confirm` to publish them. -.. _ecommerce/products/shop-page: - -Shop page -========= - -To customize the layout of the main :guilabel:`Shop` page or modify its content, click -:guilabel:`Edit`. Go to the :guilabel:`Blocks` tab to add :doc:`building blocks -<../../websites/website/web_design/building_blocks>` or to the -:guilabel:`Customize` tab to change the page layout or add features: - -- :guilabel:`Layout`: Select :guilabel:`Grid` or :guilabel:`List`. - - - :guilabel:`Size`: Set the number of products displayed per page and line. - - :guilabel:`Style`: Select :guilabel:`Default`, :guilabel:`Cards`, :guilabel:`Thumbnails`, or - :guilabel:`Grid`. - - :guilabel:`Image Size`: Choose the aspect ratio for the product images: - :guilabel:`Landscape (4/3)`, :guilabel:`Default (1/1)`, :guilabel:`Portrait (4/5)`, or - :guilabel:`Vertical (2/3)`. You can also adjust the display by changing the :guilabel:`Fill` - options to best fit your design preferences. - -- :guilabel:`Search Bar`: Toggle the switch to display a search bar at the top of the products - page. - -- :guilabel:`Prod. Desc.`: Toggle the switch to display the product description below the product's - name. - -- :guilabel:`Categories`: display product categories on the :guilabel:`Left`, on the - :guilabel:`Top`, or both. If :guilabel:`Left` is selected, you can enable - :guilabel:`Collapse Categories` to make the category menu collapsible. - -- :guilabel:`Datepicker`: Toggle the switch to display a date range calendar to check the - availability of rental products over a specific period. The - :doc:`Rental app <../../sales/rental>` must be installed to use this feature. - -- :guilabel:`Attributes`: Show product attributes on the :guilabel:`Left` and/or display a - :icon:`fa-sliders` (:guilabel:`dropdown toggle`) icon at the :guilabel:`Top` allowing customers to - filter products based on their attributes. - - - :guilabel:`Price Filter`: Toggle the switch to display a :guilabel:`Price Range` bar, which - allows customers to filter products according to a specific price range by dragging adjustable - handles. - - :guilabel:`Product Tags`: Toggle the switch to display the :guilabel:`Product Template Tags` on - the product page and allow customers to filter products using those tags by going to the - :guilabel:`Tags` section in the left column. - -- :guilabel:`Top Bar`: Select :guilabel:`Sort By` to display a dropdown list in the top bar for - sorting products and/or :guilabel:`Layout` to allow customers to switch to the grid or list view - using the related icons. - -- :guilabel:`Default Sort`: Choose how products are sorted by default: :guilabel:`Featured`, - :guilabel:`Newest Arrivals`, :guilabel:`Name (A-Z)`, :guilabel:`Price - Low to High`, or - :guilabel:`Price - High to Low`. - -- :guilabel:`Buttons`: - - - Select the :icon:`fa-shopping-cart` (:guilabel:`Shopping cart`) option to display an - :icon:`fa-shopping-cart` (:guilabel:`Add to cart`) icon on each product's image, which takes the - customer to the checkout page. - -.. _ecommerce/products/wishlist: - - - Select the :icon:`fa-heart-o` (:guilabel:`Wishlist`) option to display an - :icon:`fa-shopping-cart` (:guilabel:`Add to wishlist`) icon on each product's image allowing - logged-in customers to save products to a wishlist. - - - Select the :icon:`fa-exchange` (:guilabel:`Compare`) option to display the :icon:`fa-exchange` - (:guilabel:`Compare`) icon on each product's image allowing customers to :ref:`compare products - ` based on their attributes. - .. _ecommerce/products/product-page: Product page customization @@ -298,7 +229,7 @@ go to :menuselection:`Website --> eCommerce --> Attributes`, click on the attrib :guilabel:`Visible` or :guilabel:`Hidden` in the :guilabel:`eCommerce Filter Visibility` field. .. tip:: - - To display the product attributes on :ref:`the main Shop page `, + - To display the product attributes in the :doc:`product catalog `, set the :guilabel:`Attributes` feature to :guilabel:`Left` using the website editor. - To group attributes under the same section when :ref:`comparing products `, go to the @@ -436,6 +367,27 @@ comparison summary. - Selecting the :icon:`fa-exchange` (:guilabel:`Compare`) option from a product page is also possible. +.. _ecommerce/products/wishlists: + +Wishlists +========= + +The :icon:`fa-heart-o` :guilabel:`Add to wishlist` button allows customers to add products +to their wishlist, i.e., save them for later. To enable it, go to :menuselection:`Website --> +Configuration --> Settings`, scroll down to the :guilabel:`Shop - Products` section, and enable +:guilabel:`Wishlists`. The button is available on each product page and can be disabled in the +:ref:`website editor ` if needed. + +.. image:: products/products-add-to-wishlist.png + :alt: Add to wishlist button + +.. tip:: + - You can also display a :icon:`fa-heart-o` (:guilabel:`Wishlist`) button when hovering the mouse + over the product on the :ref:`shop page `. + - Customers can move products from their cart to their wishlist by clicking the :guilabel:`Save + for later` button in the :guilabel:`Order overview` :ref:`checkout step + `. + .. toctree:: :titlesonly: diff --git a/content/applications/websites/ecommerce/products/catalog.rst b/content/applications/websites/ecommerce/products/catalog.rst index e1222adc6a..8da7c95aeb 100644 --- a/content/applications/websites/ecommerce/products/catalog.rst +++ b/content/applications/websites/ecommerce/products/catalog.rst @@ -2,204 +2,273 @@ Catalog ======= -The eCommerce catalog is the equivalent of your physical store shelves: it allows customers to see -what you have to offer. Clear categories, available options, sorting, and navigation threads help -you structure it efficiently. +The eCommerce catalog displays products for customers to browse. It is organized using product +categories, available options, sorting, and navigation paths. Essentially, the eCommerce catalog +is the shop page of your website. + +The product catalog includes a :ref:`top bar `, a :ref:`side panel +`, and a :ref:`product listing area +`. With Odoo, you can :ref:`customize the layout +`, filter by :ref:`categories and attributes +`, and use :ref:`additional features +` according to your needs. + +You can customize the shop page using the website editor. To access it, go to the shop page, +click :guilabel:`Edit` in the upper-right corner, and navigate to the :guilabel:`Customize` tab. + +.. _ecommerce/catalog/top-bar: + +Top bar +======= + +The top bar can include a search bar, a currency selector, +:ref:`sort-by and display options `, and +:ref:`category quick access `. + +.. _ecommerce/catalog/sort-by-and-display-option: + +Sort-by search and display options +---------------------------------- + +You can toggle the :guilabel:`Search Bar`, display :ref:`categories ` +and/or :ref:`attributes `, and enable or disable the +:guilabel:`Sort-By` as well as the :ref:`Layout ` buttons in +the :guilabel:`Top Bar`. + +The :guilabel:`Sort-by` button is toggled by default, and customers can choose between the +following :guilabel:`Default Sort` options: + +- :guilabel:`None` +- :guilabel:`Featured` +- :guilabel:`Newest Arrivals` +- :guilabel:`Name (A-Z)` +- :guilabel:`Price - Low to High` +- :guilabel:`Price - High to Low` + +The default sort applies to *all* :ref:`categories `. .. tip:: - Go to :menuselection:`Website --> Configuration --> Settings`, scroll down to the - :guilabel:`Privacy` section to restrict :guilabel:`Ecommerce Access` to logged-in users and/or - enable :guilabel:`Shared Customer Accounts` to allow access to all websites with a single - account. + If you don't want to display a top bar or :ref:`side panel `, + you can disable all related options in the website editor. -Categorize the product catalog -============================== +.. _ecommerce/catalog/side-panel: -In Odoo, there is a **specific category model** for your eCommerce. Using eCommerce categories for -your products allows you to add a navigation menu on your eCommerce page. Visitors can then use it -to view all products under the category they select. +Side panel +========== -To do so, go to :menuselection:`Website --> eCommerce --> Products`, select the product you wish to -modify, click on the :guilabel:`Sales` tab, and select the :guilabel:`Categories` you want under -:guilabel:`eCommerce Shop`. +The side panel provides advanced filtering tools to organize your product categories. +To further :ref:`categorize ` the shop page, you can activate +various filters, such as the :ref:`attribute ` filter. -.. image:: catalog/catalog-categories.png - :align: center - :alt: eCommerce categories under the "Sales" tab +You can also add a :guilabel:`Datepicker` option to display a date range calendar to check +the availability of rental products over a specific period. The :doc:`Rental app +<../../../sales/rental>` must be installed to use this feature. + +It is also possible to toggle the :guilabel:`Collapsible sidebar` switch to make the side panel +manually collapsible. + +.. tip:: + To use a price range or tags filter, you have to enable :ref:`attributes + ` first. + +.. _ecommerce/catalog/categories: + +Product categorization in catalog +================================= + +eCommerce categories are used to organize products into groups, making it easier for customers +to browse the online store. + +To create eCommerce categories, go to :menuselection:`Website --> eCommerce --> +eCommerce Categories`, and click :guilabel:`New`. On the category form, add a +:guilabel:`Name`, optionally enter a :guilabel:`Parent Category`, and write a :guilabel:`Category +Description`, if needed. + +To use eCommerce categories, go to :menuselection:`Website --> eCommerce --> Products`, select +the product you wish to modify, go to the :guilabel:`Sales` tab, navigate to the +:guilabel:`Ecommerce shop` section, and select the :guilabel:`Categories` it belongs to. .. note:: - A single product can appear under multiple eCommerce categories. + A single product can belong to multiple eCommerce categories. -When your product's categories are configured, go to your **main shop page** and click on -:menuselection:`Edit --> Customize tab`. In the :guilabel:`Categories` option, you can either enable -a menu on the :guilabel:`Left`, on the :guilabel:`Top`, or both. If you select the :guilabel:`Left` -category, the option :guilabel:`Collapsable Category Recursive` appears and allows to render the -:guilabel:`Left` category menu collapsable. +Once the categories are configured and assigned to the relevant products, go to the main shop page +and open the website editor. In the :guilabel:`Categories` option, you can either enable +a menu on the :guilabel:`Left`, i.e., in the :ref:`side panel `, +or on the :guilabel:`Top`, i.e., in the :ref:`top bar `, or both. +If you select the :guilabel:`Left` category, the option :guilabel:`Collapsible Category Recursive` +appears, allowing you to collapse the category in the side panel. .. image:: catalog/catalog-panel-categories.png - :align: center :alt: Categories options for your eCommerce website .. seealso:: :doc:`../products` -.. _ecommerce-browsing: - -Browsing --------- - -The eCommerce category is the first tool to organize and split your products. However, if you need -an extra level of categorization in your catalog, you can activate various **filters** such as -attributes or sort-by search. +.. _ecommerce/catalog/attributes: Attributes -~~~~~~~~~~ +---------- -Attributes refer to **characteristics** of a product, such as **color** or **material**, whereas -variants are the different combinations of attributes. :guilabel:`Attributes and Variants` can be -found under :menuselection:`Website --> eCommerce --> Products`, select your product, and -:guilabel:`Attributes & Variants` tab. +Attributes refer to characteristics of a product, such as the color or material, whereas +variants are the different combinations of attributes. To configure attributes and variants, go to +:menuselection:`Website --> eCommerce --> Products`, select a product, and click the +:guilabel:`Attributes & Variants` tab. Add as many attributes as desired. .. seealso:: - - :doc:`../../../sales/sales/products_prices/products/variants` + :doc:`../../../sales/sales/products_prices/products/variants` .. image:: catalog/catalog-attributes.png - :align: center :alt: Attributes and variants of your product -To enable **attribute filtering**, go to your **main shop page**, click on :menuselection:`Edit --> -Customize tab` and select either :guilabel:`Left`, :guilabel:`Top`, or both. Additionally, you can -also enable :guilabel:`Price Filtering` to enable price filters. - -.. note:: - :guilabel:`Price Filter` works independently from **attributes** and, therefore, can be enabled - on its own if desired. +To enable attribute filtering, go to your main shop page, then open the website editor, and set +the :guilabel:`Attributes` field to :guilabel:`Left` (:ref:`side panel +`) and/or :guilabel:`Top` (:ref:`top bar +`). .. tip:: - You can use **attribute filters** even if you do not work with product variants. When adding - attributes to your products, make sure only to specify *one* value per attribute. Odoo does not - create variants if no combination is possible. + When attribute filtering is enabled in the top bar, customers must click the :icon:`fa-sliders` + (:guilabel:`dropdown toggle`) button to access it. -Sort-by search -~~~~~~~~~~~~~~ +When enabling :guilabel:`Attributes`, more options become available: -It is possible to allow the user to manually **sort the catalog** using the search bar. From -your **main shop page**, click on :menuselection:`Edit --> Customize tab`; you can enable or disable -the :guilabel:`Sort-By` option as well as the :guilabel:`Layout` button. You can also select the -:guilabel:`Default Sort` of the :guilabel:`Sort-By` button. The default sort applies to *all* -categories. + - :guilabel:`Price Filter`: Toggle the switch to display a :guilabel:`Price Range` bar, which + allows customers to filter products according to a specific price range by dragging adjustable + handles. + - :guilabel:`Product Tags Filter`: Toggle the switch to display the :guilabel:`Product Tags` on + the shop page, and allow customers to filter products using those tags by going to the + :guilabel:`Tags` section in the :ref:`side panel `. -The **sorting** options are: +.. tip:: + - If you want to use tags on your e-commerce, go to :menuselection:`eCommerce --> Product Tags` + and click :guilabel:`New`. In the :guilabel:`Product Templates` tab of the product tags form, + add the products to link to the given tag. You can also add product variants in the + :guilabel:`Product Variants` tab and view a summary of all selected products in + the :guilabel:`All Products` tab. + - Price filtering works independently from attributes and, therefore, can be enabled on its own, + if desired. -- Featured -- Newest Arrivals -- Name (A-Z) -- Price - Low to High -- Price - High to Low +.. _ecommerce/catalog/product-listing: -In addition, you can **manually edit** the catalog's order of a product by going to **the main shop -page** and clicking on the product. Under the :guilabel:`Product` section of the -:guilabel:`Customize` section, you can rearrange the order by clicking on the arrows. `<<` `>>` move -the product to the **extreme** right or left, and `<` `>` move the product by **one** row to the -right or left. It is also possible to change the catalog's order of products in -:menuselection:`Website --> eCommerce --> Products` and drag-and-dropping the products within the -list. +Product listing area +==================== -.. image:: catalog/catalog-reorder.png - :align: center - :alt: Product rearrangement in the catalog +You can customize the layout of the entire shop page, as well as that of :ref:`individual category +pages `. -Page design -=========== +.. tip:: + It is also possible to customize individual :ref:`product pages `. -Category page -------------- +.. _ecommerce/catalog/layout: -You can customize the layout of the category page using the website builder. +In the website editor, choose the :ref:`layout `, and +set the default layout to either :guilabel:`Grid` or :guilabel:`List` view. -.. important:: - Editing the layout of the category page is global; editing one category layout affects *all* - category pages. +Use the following options to further adjust the layout: -To do so, go on to your :menuselection:`Category page --> Edit --> Customize`. Here, you can choose -the layout, the number of columns to display the products, etc. The :guilabel:`Product Description` -button makes the product description visible from the category page, underneath the product picture. + - :guilabel:`Size`: Set the number of products displayed per page and line. + - :guilabel:`Gap`: Define the gap between the products. + - :guilabel:`Style`: Select :guilabel:`Default`, :guilabel:`Cards`, :guilabel:`Thumbnails`, or + :guilabel:`Grid`. + - :guilabel:`Image Size`: Choose the aspect ratio for the product images: + :guilabel:`Landscape (4/3)`, :guilabel:`Default (1/1)`, :guilabel:`Portrait (4/5)`, or + :guilabel:`Vertical (2/3)`. You can also adjust the display by changing the :guilabel:`Fill` + options to fit your design preferences best. -.. image:: catalog/catalog-category-layout.png - :align: center - :alt: Layout options of the category pages. +Toggle the :guilabel:`Prod. Desc.` switch to display the product description below the product's +name. .. tip:: You can choose the size of the grid, but be aware that displaying too many products may affect performance and page loading speed. +In addition, you can manually change a product’s position on the shop page. To do so, go to the +main shop page, click the product, and open the website editor. In the :guilabel:`Product` section, +you can reorder the products by using the arrows. The `<<` `>>` buttons allow to move the product to +the extreme left or right, and `<` `>` allow to move it one row to the left or right. + +.. tip:: + It is also possible to change the products' positions on the shop page by going to + :menuselection:`Website --> eCommerce --> Products`, switching to the list view, and + dragging and dropping the products within the list. + Product highlight ----------------- -You can highlight products to make them more visible on the category or product page. On the page of -your choice, go to :menuselection:`Edit --> Customize` and click on the product to highlight. In the -:guilabel:`Product` section, you can choose the size of the product image by clicking on the grid, -and you can also add a **ribbon** or :guilabel:`Badge`. This displays a banner across the product's -image, such as: +You can highlight products to make them more visible on the shop page. To do so, go +to the website editor and click the product to highlight. In the :guilabel:`Product` section, you +can choose the size of the product image by clicking the grid, and you can also add a +:guilabel:`Ribbon`. This displays a banner across the product's image, such as :guilabel:`Sale`, +:guilabel:`Sold out`, :guilabel:`Out of stock` or :guilabel:`New!`. -- Sale; -- Sold out; -- Out of stock; -- New. +.. image:: catalog/catalog-product-highlighting.png + :alt: Ribbon highlight -Alternatively, you can activate the :doc:`developer mode <../../../general/developer_mode>` on the -**product's template**, and under the :guilabel:`Sales` tab, change or create the ribbon from the -:guilabel:`Ribbon` field. +To create a new ribbon, click the green :icon:`fa-plus` (:guilabel:`Create`) icon next to the +:guilabel:`Ribbon` field. Then add a :guilabel:`Ribbon name`, define its :guilabel:`Position`, +and choose a :guilabel:`Background` and a :guilabel:`Text` label. To edit the ribbon, click the +:icon:`fa-pencil-square-o` (:guilabel:`Edit`) icon next to the :guilabel:`Ribbon` label. -.. note:: - The :doc:`developer mode <../../../general/developer_mode>` is only intended for experienced - users who wish to have access to advanced tools. Using the **developer mode** is *not* - recommended for regular users. +.. image:: catalog/catalog-ribbons.png + :alt: Create a new ribbon. -.. image:: catalog/catalog-product-highlight.png - :align: center - :alt: Ribbon highlight +The ribbon is now available for all the eCommerce products. -Additional features -=================== +.. tip:: + - There are other ways to create a new ribbon: -You can access and enable additional feature buttons such as **add to cart**, **comparison list**, -or a **wishlist**. To do so, go to your **main shop page**, and at the end of the -:guilabel:`Products Page` category, click on the feature buttons you wish to use. All three buttons -appear when hovering the mouse over a product's image. + - Go to :menuselection:`Website --> eCommerce --> Product Ribbons` and click :guilabel:`New`. + - Activate the :doc:`developer mode <../../../general/developer_mode>`, access the product + form, and under the :guilabel:`Sales` tab, change or create the ribbon in the + :guilabel:`Ribbon` field. -- :guilabel:`Add to Cart`: adds a button to - :doc:`add the product to the cart <../checkout>`; -- :guilabel:`Comparison List`: adds a button to **compare** products based on their price, variant, - etc.; -- :guilabel:`Wishlist Button`: adds a button to **wishlist** the product. + - It is also possible to add ribbons for specific :ref:`product variants + `. To do so, go to :menuselection:`Website --> + eCommerce --> Products` and select a product. Click the :guilabel:`Variants` smart button, + choose a variant, and add a ribbon in the :guilabel:`Variant Ribbon` field of the + :guilabel:`Sales` section. -.. image:: catalog/catalog-buttons.png - :align: center - :alt: Feature buttons for add to cart, comparison list, and wishlist +.. _ecommerce/catalog/customize-layout: -.. image:: catalog/catalog-features.png - :align: center - :alt: Appearance of buttons when hoovering over the mouse +Shop and category page design +----------------------------- -Add content -=========== +Use :doc:`building blocks <../../website/web_design/building_blocks>` to add content on the shop +and/or category page. -You can use **building blocks** to add content on the category page, with a variety of blocks -ranging from :guilabel:`Structure` to :guilabel:`Dynamic Content`. Specific areas are defined to use -blocks are defined and highlighted on the page when **dragging-and-dropping** a block. +You can customize the top and/or bottom section of the catalog, either for the entire shop page or +for a specific category. In the latter case, the block appears *only* when filtering by that +category. To do so, move the block to the far top or bottom section to display it on the general +shop page or to the area below the category's name at the top or beneath the product list to +display it only when filtering by that specific category. -.. image:: catalog/catalog-content.png - :align: center - :alt: Building blocks areas - -- If you drop a building block **on top** of the product list, it creates a new category header - specific to *that* category. -- If you drop a building **on the top** or **bottom** of the page, it becomes visible on *all* - category pages. + .. image:: catalog/catalog-header-footer.png + :alt: Place building block in the header or footer. .. tip:: - Adding content to an eCommerce category page is beneficial in terms of **SEO** strategy. Using - **keywords** linked to the products or the eCommerce categories improves organic traffic. - Additionally, each category has its own specific URL that can be pointed to and is indexed by - search engines. + - Adding content to an eCommerce category page helps improve the :doc:`SEO + <../../website/pages/seo>` strategy. Using keywords linked to the products or the + eCommerce categories can also increase organic traffic. Additionally, each category has its + own specific URL that can be pointed to and is indexed by search engines. + - eCommerce categories can also be added as :ref:`mega menu items + ` for quick access. + +.. _ecommerce/catalog/additional-features: + +Additional features +=================== + +You can access and enable additional feature buttons such as a :guilabel:`Add to cart` or +:guilabel:`Wishlist` button or a :guilabel:`Comparison list`. To do so, open the website editor, +click the desired feature buttons. All three buttons appear when hovering the mouse over +a product's image. + +- :icon:`fa-shopping-cart` (:guilabel:`Add to cart`): adds a button to + :doc:`add the product to the cart <../checkout>`; +- :icon:`fa-exchange` (:guilabel:`Compare`): adds a button to compare products based on + their price, variant, etc.; +- :icon:`fa-heart-o` (:guilabel:`Wishlist`): adds a button to :ref:`wishlist + ` the product. + + +.. seealso:: + :doc:`Products <../products>` diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-header-footer.png b/content/applications/websites/ecommerce/products/catalog/catalog-header-footer.png new file mode 100644 index 0000000000..d8fcd44b62 Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/catalog-header-footer.png differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-product-highlighting.png b/content/applications/websites/ecommerce/products/catalog/catalog-product-highlighting.png new file mode 100644 index 0000000000..92aefe72f5 Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/catalog-product-highlighting.png differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-reorder.png b/content/applications/websites/ecommerce/products/catalog/catalog-reorder.png deleted file mode 100644 index 1350b1d756..0000000000 Binary files a/content/applications/websites/ecommerce/products/catalog/catalog-reorder.png and /dev/null differ diff --git a/content/applications/websites/ecommerce/products/catalog/catalog-ribbons.png b/content/applications/websites/ecommerce/products/catalog/catalog-ribbons.png new file mode 100644 index 0000000000..0010006ee1 Binary files /dev/null and b/content/applications/websites/ecommerce/products/catalog/catalog-ribbons.png differ diff --git a/content/applications/websites/ecommerce/products/products-add-to-wishlist.png b/content/applications/websites/ecommerce/products/products-add-to-wishlist.png new file mode 100644 index 0000000000..346eb6da2b Binary files /dev/null and b/content/applications/websites/ecommerce/products/products-add-to-wishlist.png differ