diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index f6bfa6f61..b5c5490e2 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -5349,6 +5349,33 @@
     "context": "column title",
     "string": "Channel name"
   },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_2850255786": {
+    "string": "Search Products"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_353369701": {
+    "string": "No products matching given query"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProductsAddDialog_dot_3756118423": {
+    "context": "dialog header",
+    "string": "Assign Products"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_1737533260": {
+    "string": "No Products"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_1781179817": {
+    "context": "section header",
+    "string": "Excluded Products"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_2100305525": {
+    "context": "button",
+    "string": "Assign products"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_2697405188": {
+    "string": "Product Name"
+  },
+  "src_dot_shipping_dot_components_dot_ShippingMethodProducts_dot_4190792473": {
+    "string": "Actions"
+  },
   "src_dot_shipping_dot_components_dot_ShippingRateZipCodeRangeRemoveDialog_dot_1083561409": {
     "string": "Are you sure you want to remove this ZIP-code rule?"
   },
@@ -5427,17 +5454,20 @@
   "src_dot_shipping_dot_components_dot_ShippingZoneInfo_dot_579967655": {
     "string": "Shipping rate name"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneRatesPage_dot_1161979494": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1161979494": {
     "context": "page title",
     "string": "Price Rate Create"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneRatesPage_dot_1325966144": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_1325966144": {
     "string": "Shipping"
   },
-  "src_dot_shipping_dot_components_dot_ShippingZoneRatesPage_dot_3538551526": {
+  "src_dot_shipping_dot_components_dot_ShippingZoneRatesCreatePage_dot_3538551526": {
     "context": "page title",
     "string": "Weight Rate Create"
   },
+  "src_dot_shipping_dot_components_dot_ShippingZoneRatesPage_dot_1325966144": {
+    "string": "Shipping"
+  },
   "src_dot_shipping_dot_components_dot_ShippingZoneRates_dot_1134347598": {
     "context": "shipping method price",
     "string": "Price"
@@ -5554,6 +5584,14 @@
   "src_dot_shipping_dot_components_dot_ShippingZonesList_dot_655374584": {
     "string": "No shipping zones found"
   },
+  "src_dot_shipping_dot_components_dot_UnassignDialog_dot_1203193503": {
+    "context": "dialog header",
+    "string": "Unassign Products From Shipping"
+  },
+  "src_dot_shipping_dot_components_dot_UnassignDialog_dot_3215481647": {
+    "context": "dialog content",
+    "string": "{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}"
+  },
   "src_dot_shipping_dot_invalid": {
     "context": "error message",
     "string": "Value is invalid"
@@ -5587,6 +5625,10 @@
   "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_3823295269": {
     "string": "Manage Channel Availability"
   },
+  "src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_870815507": {
+    "context": "unassign products from shipping method, button",
+    "string": "Unassign"
+  },
   "src_dot_shipping_dot_views_dot_ShippingZoneDetails_dot_1010705153": {
     "context": "dialog header",
     "string": "Delete Shipping Zone"
@@ -5609,6 +5651,10 @@
   "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_3014453080": {
     "string": "Manage Channels Availability"
   },
+  "src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_870815507": {
+    "context": "unassign products from shipping method, button",
+    "string": "Unassign"
+  },
   "src_dot_shipping_dot_weight": {
     "context": "error message",
     "string": "Maximum weight cannot be lower than minimum"
diff --git a/src/categories/components/CategoryUpdatePage/form.tsx b/src/categories/components/CategoryUpdatePage/form.tsx
index 809b5a851..c2fdb854d 100644
--- a/src/categories/components/CategoryUpdatePage/form.tsx
+++ b/src/categories/components/CategoryUpdatePage/form.tsx
@@ -75,9 +75,9 @@ function useCategoryUpdateForm(
   // Need to make it function to always have description.current up to date
   const getData = (): CategoryUpdateData => ({
     ...form.data,
-    ...getMetadata(form.data, isMetadataModified, isPrivateMetadataModified),
     description: description.current
   });
+
   const getSubmitData = (): CategoryUpdateData => ({
     ...getData(),
     ...getMetadata(form.data, isMetadataModified, isPrivateMetadataModified)
diff --git a/src/fragments/shipping.ts b/src/fragments/shipping.ts
index 87aae776f..2a957a2e4 100644
--- a/src/fragments/shipping.ts
+++ b/src/fragments/shipping.ts
@@ -56,6 +56,36 @@ export const shippingMethodFragment = gql`
     }
   }
 `;
+export const shippingMethodWithExcludedProductsFragment = gql`
+  ${fragmentMoney}
+  ${shippingMethodFragment}
+  fragment ShippingMethodWithExcludedProductsFragment on ShippingMethod {
+    ...ShippingMethodFragment
+    excludedProducts(
+      before: $before
+      after: $after
+      first: $first
+      last: $last
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        endCursor
+        startCursor
+      }
+      edges {
+        node {
+          id
+          name
+          thumbnail {
+            url
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const shippingZoneDetailsFragment = gql`
   ${shippingZoneFragment}
   ${shippingMethodFragment}
diff --git a/src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts b/src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts
new file mode 100644
index 000000000..83a534ac2
--- /dev/null
+++ b/src/fragments/types/ShippingMethodWithExcludedProductsFragment.ts
@@ -0,0 +1,105 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { WeightUnitsEnum, ShippingMethodTypeEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL fragment: ShippingMethodWithExcludedProductsFragment
+// ====================================================
+
+export interface ShippingMethodWithExcludedProductsFragment_zipCodeRules {
+  __typename: "ShippingMethodZipCodeRule";
+  id: string;
+  start: string | null;
+  end: string | null;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_minimumOrderWeight {
+  __typename: "Weight";
+  unit: WeightUnitsEnum;
+  value: number;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_maximumOrderWeight {
+  __typename: "Weight";
+  unit: WeightUnitsEnum;
+  value: number;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_channelListings_channel {
+  __typename: "Channel";
+  id: string;
+  name: string;
+  currencyCode: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_channelListings_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_channelListings_minimumOrderPrice {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_channelListings_maximumOrderPrice {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_channelListings {
+  __typename: "ShippingMethodChannelListing";
+  id: string;
+  channel: ShippingMethodWithExcludedProductsFragment_channelListings_channel;
+  price: ShippingMethodWithExcludedProductsFragment_channelListings_price | null;
+  minimumOrderPrice: ShippingMethodWithExcludedProductsFragment_channelListings_minimumOrderPrice | null;
+  maximumOrderPrice: ShippingMethodWithExcludedProductsFragment_channelListings_maximumOrderPrice | null;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_excludedProducts_pageInfo {
+  __typename: "PageInfo";
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  endCursor: string | null;
+  startCursor: string | null;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_excludedProducts_edges_node_thumbnail {
+  __typename: "Image";
+  url: string;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_excludedProducts_edges_node {
+  __typename: "Product";
+  id: string;
+  name: string;
+  thumbnail: ShippingMethodWithExcludedProductsFragment_excludedProducts_edges_node_thumbnail | null;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_excludedProducts_edges {
+  __typename: "ProductCountableEdge";
+  node: ShippingMethodWithExcludedProductsFragment_excludedProducts_edges_node;
+}
+
+export interface ShippingMethodWithExcludedProductsFragment_excludedProducts {
+  __typename: "ProductCountableConnection";
+  pageInfo: ShippingMethodWithExcludedProductsFragment_excludedProducts_pageInfo;
+  edges: ShippingMethodWithExcludedProductsFragment_excludedProducts_edges[];
+}
+
+export interface ShippingMethodWithExcludedProductsFragment {
+  __typename: "ShippingMethod";
+  id: string;
+  zipCodeRules: (ShippingMethodWithExcludedProductsFragment_zipCodeRules | null)[] | null;
+  minimumOrderWeight: ShippingMethodWithExcludedProductsFragment_minimumOrderWeight | null;
+  maximumOrderWeight: ShippingMethodWithExcludedProductsFragment_maximumOrderWeight | null;
+  name: string;
+  type: ShippingMethodTypeEnum | null;
+  channelListings: ShippingMethodWithExcludedProductsFragment_channelListings[] | null;
+  excludedProducts: ShippingMethodWithExcludedProductsFragment_excludedProducts | null;
+}
diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx
new file mode 100644
index 000000000..c21d4f9d6
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.stories.tsx
@@ -0,0 +1,34 @@
+import { shippingZone } from "@saleor/shipping/fixtures";
+import Decorator from "@saleor/storybook//Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import ShippingMethodProducts, {
+  ShippingMethodProductsProps
+} from "./ShippingMethodProducts";
+
+const products = shippingZone.shippingMethods[0].excludedProducts.edges.map(
+  edge => edge.node
+);
+
+const props: ShippingMethodProductsProps = {
+  disabled: false,
+  isChecked: () => undefined,
+  onNextPage: () => undefined,
+  onPreviousPage: () => undefined,
+  onProductAssign: () => undefined,
+  onProductUnassign: () => undefined,
+  pageInfo: {
+    hasNextPage: false,
+    hasPreviousPage: false
+  },
+  products,
+  selected: products.length,
+  toggle: () => undefined,
+  toggleAll: () => undefined,
+  toolbar: () => undefined
+};
+
+storiesOf("Shipping / ShippingMethodProducts", module)
+  .addDecorator(Decorator)
+  .add("default", () => <ShippingMethodProducts {...props} />);
diff --git a/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx
new file mode 100644
index 000000000..d734994c4
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProducts/ShippingMethodProducts.tsx
@@ -0,0 +1,171 @@
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import IconButton from "@material-ui/core/IconButton";
+import { makeStyles } from "@material-ui/core/styles";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableFooter from "@material-ui/core/TableFooter";
+import TableRow from "@material-ui/core/TableRow";
+import Typography from "@material-ui/core/Typography";
+import DeleteIcon from "@material-ui/icons/Delete";
+import CardTitle from "@saleor/components/CardTitle";
+import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
+import Skeleton from "@saleor/components/Skeleton";
+import TableCellAvatar from "@saleor/components/TableCellAvatar";
+import TableHead from "@saleor/components/TableHead";
+import TablePagination from "@saleor/components/TablePagination";
+import { renderCollection } from "@saleor/misc";
+import { ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node } from "@saleor/shipping/types/ShippingZone";
+import { ListActions, ListProps } from "@saleor/types";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => ({
+    colAction: {
+      "&:last-child": {
+        paddingRight: theme.spacing(3)
+      },
+      textAlign: "right",
+      width: 100
+    },
+    colName: {
+      width: "auto"
+    },
+    colProductName: {
+      paddingLeft: 0
+    },
+    table: {
+      tableLayout: "fixed"
+    }
+  }),
+  { name: "ShippingMethodProducts" }
+);
+
+export interface ShippingMethodProductsProps
+  extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">>,
+    ListActions {
+  products: ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node[];
+  onProductAssign: () => void;
+  onProductUnassign: (ids: string[]) => void;
+}
+
+const numberOfColumns = 3;
+
+const ShippingMethodProducts: React.FC<ShippingMethodProductsProps> = props => {
+  const {
+    disabled,
+    pageInfo,
+    products,
+    onNextPage,
+    onPreviousPage,
+    onProductAssign,
+    onProductUnassign,
+    isChecked,
+    selected,
+    toggle,
+    toggleAll,
+    toolbar
+  } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+
+  return (
+    <Card>
+      <CardTitle
+        title={intl.formatMessage({
+          defaultMessage: "Excluded Products",
+          description: "section header"
+        })}
+        toolbar={
+          <Button color="primary" variant="text" onClick={onProductAssign}>
+            <FormattedMessage
+              defaultMessage="Assign products"
+              description="button"
+            />
+          </Button>
+        }
+      />
+      <ResponsiveTable className={classes.table}>
+        {!!products?.length && (
+          <>
+            <TableHead
+              colSpan={numberOfColumns}
+              selected={selected}
+              disabled={disabled}
+              items={products}
+              toggleAll={toggleAll}
+              toolbar={toolbar}
+            >
+              <TableCell className={classes.colProductName}>
+                <FormattedMessage defaultMessage="Product Name" />
+              </TableCell>
+              <TableCell className={classes.colAction}>
+                <FormattedMessage defaultMessage="Actions" />
+              </TableCell>
+            </TableHead>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  colSpan={numberOfColumns}
+                  hasNextPage={
+                    pageInfo && !disabled ? pageInfo.hasNextPage : false
+                  }
+                  onNextPage={onNextPage}
+                  hasPreviousPage={
+                    pageInfo && !disabled ? pageInfo.hasPreviousPage : false
+                  }
+                  onPreviousPage={onPreviousPage}
+                />
+              </TableRow>
+            </TableFooter>
+          </>
+        )}
+        <TableBody>
+          {products?.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5}>
+                <FormattedMessage defaultMessage="No Products" />
+              </TableCell>
+            </TableRow>
+          ) : (
+            renderCollection(products, product => {
+              const isSelected = product ? isChecked(product.id) : false;
+              return (
+                <TableRow key={product ? product.id : "skeleton"}>
+                  <TableCell padding="checkbox">
+                    <Checkbox
+                      checked={isSelected}
+                      disabled={disabled}
+                      disableClickPropagation
+                      onChange={() => toggle(product.id)}
+                    />
+                  </TableCell>
+                  <TableCellAvatar
+                    className={classes.colName}
+                    thumbnail={product?.thumbnail?.url}
+                  >
+                    {product?.name ? (
+                      <Typography variant="body2">{product.name}</Typography>
+                    ) : (
+                      <Skeleton />
+                    )}
+                  </TableCellAvatar>
+                  <TableCell className={classes.colAction}>
+                    <IconButton onClick={() => onProductUnassign([product.id])}>
+                      <DeleteIcon color="primary" />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              );
+            })
+          )}
+        </TableBody>
+      </ResponsiveTable>
+    </Card>
+  );
+};
+ShippingMethodProducts.displayName = "ShippingMethodProducts";
+export default ShippingMethodProducts;
diff --git a/src/shipping/components/ShippingMethodProducts/index.ts b/src/shipping/components/ShippingMethodProducts/index.ts
new file mode 100644
index 000000000..d1a52c4a7
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProducts/index.ts
@@ -0,0 +1,2 @@
+export * from "./ShippingMethodProducts";
+export { default } from "./ShippingMethodProducts";
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx
new file mode 100644
index 000000000..46d20d269
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.stories.tsx
@@ -0,0 +1,24 @@
+import { products } from "@saleor/shipping/fixtures";
+import Decorator from "@saleor/storybook//Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import ShippingMethodProductsAddDialog, {
+  ShippingMethodProductsAddDialogProps
+} from "./ShippingMethodProductsAddDialog";
+
+const props: ShippingMethodProductsAddDialogProps = {
+  confirmButtonState: "default",
+  hasMore: false,
+  loading: false,
+  onClose: () => undefined,
+  onFetch: () => undefined,
+  onFetchMore: () => undefined,
+  onSubmit: () => undefined,
+  open: true,
+  products
+};
+
+storiesOf("Shipping / ShippingMethodProductsAddDialog", module)
+  .addDecorator(Decorator)
+  .add("default", () => <ShippingMethodProductsAddDialog {...props} />);
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
new file mode 100644
index 000000000..5d381b069
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -0,0 +1,242 @@
+import Button from "@material-ui/core/Button";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { makeStyles } from "@material-ui/core/styles";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableRow from "@material-ui/core/TableRow";
+import TextField from "@material-ui/core/TextField";
+import Checkbox from "@saleor/components/Checkbox";
+import ConfirmButton, {
+  ConfirmButtonTransitionState
+} from "@saleor/components/ConfirmButton";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
+import Skeleton from "@saleor/components/Skeleton";
+import TableCellAvatar from "@saleor/components/TableCellAvatar";
+import useSearchQuery from "@saleor/hooks/useSearchQuery";
+import { buttonMessages } from "@saleor/intl";
+import { renderCollection } from "@saleor/misc";
+import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
+import { ShippingPriceExcludeProduct } from "@saleor/shipping/types/ShippingPriceExcludeProduct";
+import { FetchMoreProps } from "@saleor/types";
+import React from "react";
+import { MutationFetchResult } from "react-apollo";
+import InfiniteScroll from "react-infinite-scroller";
+import { FormattedMessage, useIntl } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => ({
+    avatar: {
+      paddingLeft: 0,
+      width: 64
+    },
+    colName: {
+      paddingLeft: 0
+    },
+    content: {
+      overflowY: "scroll"
+    },
+    loadMoreLoaderContainer: {
+      alignItems: "center",
+      display: "flex",
+      height: theme.spacing(3),
+      justifyContent: "center",
+      marginTop: theme.spacing(3)
+    },
+    overflow: {
+      overflowY: "visible"
+    },
+    productCheckboxCell: {
+      "&:first-child": {
+        paddingLeft: 0,
+        paddingRight: 0
+      }
+    }
+  }),
+  { name: "ShippingMethodProductsAddDialog" }
+);
+
+export interface ShippingMethodProductsAddDialogProps extends FetchMoreProps {
+  confirmButtonState: ConfirmButtonTransitionState;
+  open: boolean;
+  products: SearchProducts_search_edges_node[];
+  onClose: () => void;
+  onFetch: (query: string) => void;
+  onSubmit: (
+    ids: string[]
+  ) => Promise<MutationFetchResult<ShippingPriceExcludeProduct>>;
+}
+
+const handleProductAssign = (
+  product: SearchProducts_search_edges_node,
+  isSelected: boolean,
+  selectedProducts: SearchProducts_search_edges_node[],
+  setSelectedProducts: (data: SearchProducts_search_edges_node[]) => void
+) => {
+  if (isSelected) {
+    setSelectedProducts(
+      selectedProducts.filter(
+        selectedProduct => selectedProduct.id !== product.id
+      )
+    );
+  } else {
+    setSelectedProducts([...selectedProducts, product]);
+  }
+};
+
+const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogProps> = props => {
+  const {
+    confirmButtonState,
+    open,
+    loading,
+    hasMore,
+    products,
+    onFetch,
+    onFetchMore,
+    onClose,
+    onSubmit
+  } = props;
+
+  const classes = useStyles(props);
+  const intl = useIntl();
+  const [query, onQueryChange, resetQuery] = useSearchQuery(onFetch);
+  const [selectedProducts, setSelectedProducts] = React.useState<
+    SearchProducts_search_edges_node[]
+  >([]);
+
+  const handleSubmit = () => {
+    onSubmit(selectedProducts.map(product => product.id)).then(() => {
+      setSelectedProducts([]);
+      resetQuery();
+    });
+  };
+
+  const handleClose = () => {
+    onClose();
+    setSelectedProducts([]);
+    resetQuery();
+  };
+
+  return (
+    <Dialog
+      onClose={handleClose}
+      open={open}
+      classes={{ paper: classes.overflow }}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>
+        <FormattedMessage
+          defaultMessage="Assign Products"
+          description="dialog header"
+        />
+      </DialogTitle>
+      <DialogContent className={classes.overflow}>
+        <TextField
+          name="query"
+          value={query}
+          onChange={onQueryChange}
+          label={intl.formatMessage({
+            defaultMessage: "Search Products"
+          })}
+          placeholder={intl.formatMessage({
+            defaultMessage: "Search Products"
+          })}
+          fullWidth
+          InputProps={{
+            autoComplete: "off",
+            endAdornment: loading && <CircularProgress size={16} />
+          }}
+        />
+      </DialogContent>
+      <DialogContent className={classes.content}>
+        <InfiniteScroll
+          pageStart={0}
+          loadMore={onFetchMore}
+          hasMore={hasMore}
+          useWindow={false}
+          loader={
+            <div key="loader" className={classes.loadMoreLoaderContainer}>
+              <CircularProgress size={16} />
+            </div>
+          }
+          threshold={10}
+        >
+          <ResponsiveTable key="table">
+            <TableBody>
+              {renderCollection(
+                products,
+                (product, productIndex) => {
+                  const isSelected = selectedProducts.some(
+                    selectedProduct => selectedProduct.id === product.id
+                  );
+                  return (
+                    <React.Fragment
+                      key={product ? product.id : `skeleton-${productIndex}`}
+                    >
+                      <TableRow>
+                        <TableCell
+                          padding="checkbox"
+                          className={classes.productCheckboxCell}
+                        >
+                          {product && (
+                            <Checkbox
+                              checked={isSelected}
+                              disabled={loading}
+                              onChange={() =>
+                                handleProductAssign(
+                                  product,
+                                  isSelected,
+                                  selectedProducts,
+                                  setSelectedProducts
+                                )
+                              }
+                            />
+                          )}
+                        </TableCell>
+                        <TableCellAvatar
+                          className={classes.avatar}
+                          thumbnail={product?.thumbnail?.url}
+                        />
+                        <TableCell className={classes.colName} colSpan={2}>
+                          {product?.name || <Skeleton />}
+                        </TableCell>
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                },
+                () => (
+                  <TableRow>
+                    <TableCell colSpan={4}>
+                      <FormattedMessage defaultMessage="No products matching given query" />
+                    </TableCell>
+                  </TableRow>
+                )
+              )}
+            </TableBody>
+          </ResponsiveTable>
+        </InfiniteScroll>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>
+          <FormattedMessage {...buttonMessages.back} />
+        </Button>
+        <ConfirmButton
+          transitionState={confirmButtonState}
+          color="primary"
+          variant="contained"
+          type="submit"
+          disabled={loading || !selectedProducts?.length}
+          onClick={handleSubmit}
+        >
+          <FormattedMessage {...buttonMessages.confirm} />
+        </ConfirmButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+ShippingMethodProductsAddDialog.displayName = "ShippingMethodProductsAddDialog";
+export default ShippingMethodProductsAddDialog;
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/index.ts b/src/shipping/components/ShippingMethodProductsAddDialog/index.ts
new file mode 100644
index 000000000..6049335c6
--- /dev/null
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/index.ts
@@ -0,0 +1,2 @@
+export * from "./ShippingMethodProductsAddDialog";
+export { default } from "./ShippingMethodProductsAddDialog";
diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx
new file mode 100644
index 000000000..8652232f1
--- /dev/null
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.stories.tsx
@@ -0,0 +1,87 @@
+import Decorator from "@saleor/storybook//Decorator";
+import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import ShippingZoneRatesCreatePage, {
+  ShippingZoneRatesCreatePageProps
+} from "./ShippingZoneRatesCreatePage";
+
+const channels = [
+  {
+    currency: "USD",
+    id: "1",
+    maxValue: "10",
+    minValue: "0",
+    name: "channel",
+    price: "5"
+  },
+  {
+    currency: "USD",
+    id: "2",
+    maxValue: "20",
+    minValue: "1",
+    name: "test",
+    price: "6"
+  }
+];
+
+const defaultChannels = [
+  {
+    currency: "USD",
+    id: "1",
+    maxValue: "",
+    minValue: "",
+    name: "channel",
+    price: ""
+  }
+];
+
+const props: ShippingZoneRatesCreatePageProps = {
+  allChannelsCount: 3,
+  channelErrors: [],
+  disabled: false,
+  errors: [],
+  onBack: () => undefined,
+  onChannelsChange: () => undefined,
+  onDelete: () => undefined,
+  onSubmit: () => undefined,
+  onZipCodeAssign: () => undefined,
+  onZipCodeUnassign: () => undefined,
+  openChannelsModal: () => undefined,
+  saveButtonBarState: "default",
+  shippingChannels: defaultChannels,
+  variant: ShippingMethodTypeEnum.PRICE,
+  zipCodes: [
+    {
+      __typename: "ShippingMethodZipCodeRule",
+      end: "51-200",
+      id: "1",
+      start: "51-220"
+    },
+    {
+      __typename: "ShippingMethodZipCodeRule",
+      end: "31-101",
+      id: "1",
+      start: "44-205"
+    }
+  ]
+};
+
+storiesOf("Shipping / ShippingZoneRatesCreatePage page", module)
+  .addDecorator(Decorator)
+  .add("create price", () => <ShippingZoneRatesCreatePage {...props} />)
+  .add("loading", () => (
+    <ShippingZoneRatesCreatePage
+      {...props}
+      disabled={true}
+      saveButtonBarState={"loading"}
+    />
+  ))
+  .add("create weight", () => (
+    <ShippingZoneRatesCreatePage
+      {...props}
+      shippingChannels={channels}
+      variant={ShippingMethodTypeEnum.WEIGHT}
+    />
+  ));
diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
new file mode 100644
index 000000000..c390d76e1
--- /dev/null
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx
@@ -0,0 +1,190 @@
+import { ChannelShippingData } from "@saleor/channels/utils";
+import AppHeader from "@saleor/components/AppHeader";
+import CardSpacer from "@saleor/components/CardSpacer";
+import ChannelsAvailability from "@saleor/components/ChannelsAvailability";
+import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import Container from "@saleor/components/Container";
+import Form from "@saleor/components/Form";
+import Grid from "@saleor/components/Grid";
+import PageHeader from "@saleor/components/PageHeader";
+import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
+import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
+import { ShippingMethodFragment_zipCodeRules } from "@saleor/fragments/types/ShippingMethodFragment";
+import { validatePrice } from "@saleor/products/utils/validation";
+import OrderValue from "@saleor/shipping/components/OrderValue";
+import OrderWeight from "@saleor/shipping/components/OrderWeight";
+import PricingCard from "@saleor/shipping/components/PricingCard";
+import ShippingZoneInfo from "@saleor/shipping/components/ShippingZoneInfo";
+import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
+import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import ShippingZoneZipCodes, {
+  ZipCodeInclusion
+} from "../ShippingZoneZipCodes";
+
+export interface FormData {
+  channelListings: ChannelShippingData[];
+  includeZipCodes: ZipCodeInclusion;
+  name: string;
+  noLimits: boolean;
+  minValue: string;
+  maxValue: string;
+  type: ShippingMethodTypeEnum;
+}
+
+export interface ShippingZoneRatesCreatePageProps {
+  allChannelsCount?: number;
+  shippingChannels: ChannelShippingData[];
+  disabled: boolean;
+  hasChannelChanged?: boolean;
+  zipCodes?: ShippingMethodFragment_zipCodeRules[];
+  channelErrors: ShippingChannelsErrorFragment[];
+  errors: ShippingErrorFragment[];
+  saveButtonBarState: ConfirmButtonTransitionState;
+  onBack: () => void;
+  onDelete?: () => void;
+  onSubmit: (data: FormData) => void;
+  onZipCodeAssign: () => void;
+  onZipCodeUnassign: (id: string) => void;
+  onChannelsChange: (data: ChannelShippingData[]) => void;
+  openChannelsModal: () => void;
+  variant: ShippingMethodTypeEnum;
+}
+
+export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePageProps> = ({
+  allChannelsCount,
+  shippingChannels,
+  channelErrors,
+  disabled,
+  errors,
+  hasChannelChanged,
+  onBack,
+  onDelete,
+  onSubmit,
+  onChannelsChange,
+  onZipCodeAssign,
+  onZipCodeUnassign,
+  openChannelsModal,
+  saveButtonBarState,
+  variant,
+  zipCodes
+}) => {
+  const intl = useIntl();
+  const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
+  const initialForm: FormData = {
+    channelListings: shippingChannels,
+    includeZipCodes: ZipCodeInclusion.Include,
+    maxValue: "",
+    minValue: "",
+    name: "",
+    noLimits: false,
+    type: null
+  };
+
+  return (
+    <Form initial={initialForm} onSubmit={onSubmit}>
+      {({ change, data, hasChanged, submit, triggerChange }) => {
+        const handleChannelsChange = createChannelsChangeHandler(
+          shippingChannels,
+          onChannelsChange,
+          triggerChange
+        );
+        const formDisabled = data.channelListings?.some(channel =>
+          validatePrice(channel.price)
+        );
+
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              <FormattedMessage defaultMessage="Shipping" />
+            </AppHeader>
+            <PageHeader
+              title={
+                isPriceVariant
+                  ? intl.formatMessage({
+                      defaultMessage: "Price Rate Create",
+                      description: "page title"
+                    })
+                  : intl.formatMessage({
+                      defaultMessage: "Weight Rate Create",
+                      description: "page title"
+                    })
+              }
+            />
+            <Grid>
+              <div>
+                <ShippingZoneInfo
+                  data={data}
+                  disabled={disabled}
+                  errors={errors}
+                  onChange={change}
+                />
+                <CardSpacer />
+                {isPriceVariant ? (
+                  <OrderValue
+                    channels={data.channelListings}
+                    errors={channelErrors}
+                    noLimits={data.noLimits}
+                    disabled={disabled}
+                    onChange={change}
+                    onChannelsChange={handleChannelsChange}
+                  />
+                ) : (
+                  <OrderWeight
+                    noLimits={data.noLimits}
+                    disabled={disabled}
+                    minValue={data.minValue}
+                    maxValue={data.maxValue}
+                    onChange={change}
+                    errors={errors}
+                  />
+                )}
+                <CardSpacer />
+                <PricingCard
+                  channels={data.channelListings}
+                  onChange={handleChannelsChange}
+                  disabled={disabled}
+                  errors={channelErrors}
+                />
+                <CardSpacer />
+                <ShippingZoneZipCodes
+                  data={data}
+                  disabled={disabled}
+                  onZipCodeDelete={onZipCodeUnassign}
+                  onZipCodeInclusionChange={() => undefined}
+                  onZipCodeRangeAdd={onZipCodeAssign}
+                  zipCodes={zipCodes}
+                />
+              </div>
+              <div>
+                <ChannelsAvailability
+                  allChannelsCount={allChannelsCount}
+                  selectedChannelsCount={shippingChannels?.length}
+                  channelsList={data.channelListings.map(channel => ({
+                    id: channel.id,
+                    name: channel.name
+                  }))}
+                  openModal={openChannelsModal}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={
+                disabled || formDisabled || (!hasChanged && !hasChannelChanged)
+              }
+              onCancel={onBack}
+              onDelete={onDelete}
+              onSave={submit}
+              state={saveButtonBarState}
+            />
+          </Container>
+        );
+      }}
+    </Form>
+  );
+};
+
+export default ShippingZoneRatesCreatePage;
diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/index.ts b/src/shipping/components/ShippingZoneRatesCreatePage/index.ts
new file mode 100644
index 000000000..0a6b39e93
--- /dev/null
+++ b/src/shipping/components/ShippingZoneRatesCreatePage/index.ts
@@ -0,0 +1,2 @@
+export * from "./ShippingZoneRatesCreatePage";
+export { default } from "./ShippingZoneRatesCreatePage";
diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx
index 2f1ed4686..a56ea4b85 100644
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx
+++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.stories.tsx
@@ -43,31 +43,26 @@ const props: ShippingZoneRatesPageProps = {
   channelErrors: [],
   disabled: false,
   errors: [],
+  isChecked: () => undefined,
   onBack: () => undefined,
   onChannelsChange: () => undefined,
   onDelete: () => undefined,
+  onNextPage: () => undefined,
+  onPreviousPage: () => undefined,
+  onProductAssign: () => undefined,
+  onProductUnassign: () => undefined,
   onSubmit: () => undefined,
   onZipCodeAssign: () => undefined,
   onZipCodeUnassign: () => undefined,
   openChannelsModal: () => undefined,
-  rate: null,
+  rate: shippingZone.shippingMethods[0],
   saveButtonBarState: "default",
+  selected: 0,
   shippingChannels: defaultChannels,
-  variant: ShippingMethodTypeEnum.PRICE,
-  zipCodes: [
-    {
-      __typename: "ShippingMethodZipCodeRule",
-      end: "51-200",
-      id: "1",
-      start: "51-220"
-    },
-    {
-      __typename: "ShippingMethodZipCodeRule",
-      end: "31-101",
-      id: "1",
-      start: "44-205"
-    }
-  ]
+  toggle: () => undefined,
+  toggleAll: () => undefined,
+  toolbar: () => undefined,
+  variant: ShippingMethodTypeEnum.PRICE
 };
 
 storiesOf("Views / Shipping / Shipping rate", module)
@@ -95,10 +90,6 @@ storiesOf("Views / Shipping / Shipping rate", module)
     <ShippingZoneRatesPage
       {...props}
       shippingChannels={channels}
-      rate={shippingZone.shippingMethods[0]}
       variant={ShippingMethodTypeEnum.WEIGHT}
     />
-  ))
-  .add("no zip codes", () => (
-    <ShippingZoneRatesPage {...props} zipCodes={[]} />
   ));
diff --git a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
index d411d7c78..980a15bd9 100644
--- a/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
+++ b/src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx
@@ -10,19 +10,18 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ShippingChannelsErrorFragment } from "@saleor/fragments/types/ShippingChannelsErrorFragment";
 import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment";
-import {
-  ShippingMethodFragment,
-  ShippingMethodFragment_zipCodeRules
-} from "@saleor/fragments/types/ShippingMethodFragment";
 import { validatePrice } from "@saleor/products/utils/validation";
 import OrderValue from "@saleor/shipping/components/OrderValue";
 import OrderWeight from "@saleor/shipping/components/OrderWeight";
 import PricingCard from "@saleor/shipping/components/PricingCard";
+import ShippingMethodProducts from "@saleor/shipping/components/ShippingMethodProducts";
 import ShippingZoneInfo from "@saleor/shipping/components/ShippingZoneInfo";
 import { createChannelsChangeHandler } from "@saleor/shipping/handlers";
+import { ShippingZone_shippingZone_shippingMethods } from "@saleor/shipping/types/ShippingZone";
+import { ListActions, ListProps } from "@saleor/types";
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 
 import ShippingZoneZipCodes, {
   ZipCodeInclusion
@@ -38,13 +37,14 @@ export interface FormData {
   type: ShippingMethodTypeEnum;
 }
 
-export interface ShippingZoneRatesPageProps {
+export interface ShippingZoneRatesPageProps
+  extends Pick<ListProps, Exclude<keyof ListProps, "onRowClick">>,
+    ListActions {
   allChannelsCount?: number;
   shippingChannels: ChannelShippingData[];
   disabled: boolean;
   hasChannelChanged?: boolean;
-  rate: ShippingMethodFragment | null;
-  zipCodes?: ShippingMethodFragment_zipCodeRules[];
+  rate: ShippingZone_shippingZone_shippingMethods;
   channelErrors: ShippingChannelsErrorFragment[];
   errors: ShippingErrorFragment[];
   saveButtonBarState: ConfirmButtonTransitionState;
@@ -55,6 +55,8 @@ export interface ShippingZoneRatesPageProps {
   onZipCodeUnassign: (id: string) => void;
   onChannelsChange: (data: ChannelShippingData[]) => void;
   openChannelsModal: () => void;
+  onProductAssign: () => void;
+  onProductUnassign: (ids: string[]) => void;
   variant: ShippingMethodTypeEnum;
 }
 
@@ -71,13 +73,14 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
   onChannelsChange,
   onZipCodeAssign,
   onZipCodeUnassign,
+  onProductAssign,
+  onProductUnassign,
   openChannelsModal,
   rate,
   saveButtonBarState,
   variant,
-  zipCodes
+  ...listProps
 }) => {
-  const intl = useIntl();
   const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE;
   const initialForm: FormData = {
     channelListings: shippingChannels,
@@ -89,8 +92,6 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
     type: rate?.type || null
   };
 
-  const rateExists = rate !== null;
-
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit, triggerChange }) => {
@@ -108,20 +109,7 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
             <AppHeader onBack={onBack}>
               <FormattedMessage defaultMessage="Shipping" />
             </AppHeader>
-            <PageHeader
-              title={
-                rate?.name ||
-                (isPriceVariant
-                  ? intl.formatMessage({
-                      defaultMessage: "Price Rate Create",
-                      description: "page title"
-                    })
-                  : intl.formatMessage({
-                      defaultMessage: "Weight Rate Create",
-                      description: "page title"
-                    }))
-              }
-            />
+            <PageHeader title={rate?.name} />
             <Grid>
               <div>
                 <ShippingZoneInfo
@@ -164,7 +152,17 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
                   onZipCodeDelete={onZipCodeUnassign}
                   onZipCodeInclusionChange={() => undefined}
                   onZipCodeRangeAdd={onZipCodeAssign}
-                  zipCodes={rateExists ? rate?.zipCodeRules : zipCodes}
+                  zipCodes={rate?.zipCodeRules}
+                />
+                <CardSpacer />
+                <ShippingMethodProducts
+                  products={rate?.excludedProducts?.edges.map(
+                    edge => edge.node
+                  )}
+                  onProductAssign={onProductAssign}
+                  onProductUnassign={onProductUnassign}
+                  disabled={disabled}
+                  {...listProps}
                 />
               </div>
               <div>
diff --git a/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx b/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx
new file mode 100644
index 000000000..f18f170a3
--- /dev/null
+++ b/src/shipping/components/UnassignDialog/UnassignDialog.stories.tsx
@@ -0,0 +1,17 @@
+import Decorator from "@saleor/storybook//Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import UnassignDialog, { UnassignDialogProps } from "./UnassignDialog";
+
+const props: UnassignDialogProps = {
+  closeModal: () => undefined,
+  confirmButtonState: "default",
+  idsLength: 2,
+  onConfirm: () => undefined,
+  open: true
+};
+
+storiesOf("Shipping / UnassignDialog", module)
+  .addDecorator(Decorator)
+  .add("default", () => <UnassignDialog {...props} />);
diff --git a/src/shipping/components/UnassignDialog/UnassignDialog.tsx b/src/shipping/components/UnassignDialog/UnassignDialog.tsx
new file mode 100644
index 000000000..ca2f71a5a
--- /dev/null
+++ b/src/shipping/components/UnassignDialog/UnassignDialog.tsx
@@ -0,0 +1,48 @@
+import DialogContentText from "@material-ui/core/DialogContentText";
+import ActionDialog from "@saleor/components/ActionDialog";
+import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+export interface UnassignDialogProps {
+  open: boolean;
+  confirmButtonState: ConfirmButtonTransitionState;
+  idsLength: number;
+  closeModal: () => void;
+  onConfirm: () => void;
+}
+
+export const UnassignDialog: React.FC<UnassignDialogProps> = ({
+  closeModal,
+  confirmButtonState,
+  idsLength,
+  onConfirm,
+  open
+}) => {
+  const intl = useIntl();
+  return (
+    <ActionDialog
+      open={open}
+      title={intl.formatMessage({
+        defaultMessage: "Unassign Products From Shipping",
+        description: "dialog header"
+      })}
+      confirmButtonState={confirmButtonState}
+      onClose={closeModal}
+      onConfirm={onConfirm}
+    >
+      <DialogContentText>
+        <FormattedMessage
+          defaultMessage="{counter,plural,one{Are you sure you want to unassign this product?} other{Are you sure you want to unassign {displayQuantity} products?}}"
+          description="dialog content"
+          values={{
+            counter: idsLength,
+            displayQuantity: <strong>{idsLength}</strong>
+          }}
+        />
+      </DialogContentText>
+    </ActionDialog>
+  );
+};
+
+export default UnassignDialog;
diff --git a/src/shipping/components/UnassignDialog/index.ts b/src/shipping/components/UnassignDialog/index.ts
new file mode 100644
index 000000000..57f90cddb
--- /dev/null
+++ b/src/shipping/components/UnassignDialog/index.ts
@@ -0,0 +1,2 @@
+export * from "./UnassignDialog";
+export { default } from "./UnassignDialog";
diff --git a/src/shipping/fixtures.ts b/src/shipping/fixtures.ts
index 7045d9e0b..57a463517 100644
--- a/src/shipping/fixtures.ts
+++ b/src/shipping/fixtures.ts
@@ -1,5 +1,6 @@
-import { ShippingZoneDetailsFragment } from "@saleor/fragments/types/ShippingZoneDetailsFragment";
 import { ShippingZoneFragment } from "@saleor/fragments/types/ShippingZoneFragment";
+import { SearchProducts_search_edges_node } from "@saleor/searches/types/SearchProducts";
+import { ShippingZone_shippingZone } from "@saleor/shipping/types/ShippingZone";
 
 import { ShippingMethodTypeEnum, WeightUnitsEnum } from "../types/globalTypes";
 
@@ -1285,7 +1286,7 @@ export const shippingZones: ShippingZoneFragment[] = [
   }
 ];
 
-export const shippingZone: ShippingZoneDetailsFragment = {
+export const shippingZone: ShippingZone_shippingZone = {
   __typename: "ShippingZone",
   countries: [
     {
@@ -1577,6 +1578,30 @@ export const shippingZone: ShippingZoneDetailsFragment = {
           }
         }
       ],
+      excludedProducts: {
+        __typename: "ProductCountableConnection",
+        edges: [
+          {
+            __typename: "ProductCountableEdge",
+            node: {
+              __typename: "Product",
+              id: "1",
+              name: "Apple Juice",
+              thumbnail: {
+                __typename: "Image",
+                url: ""
+              }
+            }
+          }
+        ],
+        pageInfo: {
+          __typename: "PageInfo",
+          endCursor: "",
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: ""
+        }
+      },
       id: "U2hpcHBpbmdNZXRob2Q6NA==",
       maximumOrderWeight: {
         __typename: "Weight",
@@ -1614,6 +1639,30 @@ export const shippingZone: ShippingZoneDetailsFragment = {
     {
       __typename: "ShippingMethod",
       channelListings: [],
+      excludedProducts: {
+        __typename: "ProductCountableConnection",
+        edges: [
+          {
+            __typename: "ProductCountableEdge",
+            node: {
+              __typename: "Product",
+              id: "1",
+              name: "Apple Juice",
+              thumbnail: {
+                __typename: "Image",
+                url: ""
+              }
+            }
+          }
+        ],
+        pageInfo: {
+          __typename: "PageInfo",
+          endCursor: "",
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: ""
+        }
+      },
       id: "U2hpcHBpbmdNZXRob2Q6Mw==",
       maximumOrderWeight: null,
       minimumOrderWeight: {
@@ -1647,6 +1696,30 @@ export const shippingZone: ShippingZoneDetailsFragment = {
     {
       __typename: "ShippingMethod",
       channelListings: [],
+      excludedProducts: {
+        __typename: "ProductCountableConnection",
+        edges: [
+          {
+            __typename: "ProductCountableEdge",
+            node: {
+              __typename: "Product",
+              id: "1",
+              name: "Apple Juice",
+              thumbnail: {
+                __typename: "Image",
+                url: ""
+              }
+            }
+          }
+        ],
+        pageInfo: {
+          __typename: "PageInfo",
+          endCursor: "",
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: ""
+        }
+      },
       id: "U2hpcHBpbmdNZXRob2Q6Mg==",
       maximumOrderWeight: null,
       minimumOrderWeight: {
@@ -1680,6 +1753,17 @@ export const shippingZone: ShippingZoneDetailsFragment = {
     {
       __typename: "ShippingMethod",
       channelListings: [],
+      excludedProducts: {
+        __typename: "ProductCountableConnection",
+        edges: [],
+        pageInfo: {
+          __typename: "PageInfo",
+          endCursor: "",
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: ""
+        }
+      },
       id: "U2hpcHBpbmdNZXRob2Q6MQ==",
       maximumOrderWeight: null,
       minimumOrderWeight: {
@@ -1724,3 +1808,24 @@ export const shippingZone: ShippingZoneDetailsFragment = {
     }
   ]
 };
+
+export const products: SearchProducts_search_edges_node[] = [
+  {
+    __typename: "Product",
+    id: "1",
+    name: "Apple Juice",
+    thumbnail: {
+      __typename: "Image",
+      url: ""
+    }
+  },
+  {
+    __typename: "Product",
+    id: "2",
+    name: "Banana Juice",
+    thumbnail: {
+      __typename: "Image",
+      url: ""
+    }
+  }
+];
diff --git a/src/shipping/mutations.ts b/src/shipping/mutations.ts
index 35c0f9438..8874db557 100644
--- a/src/shipping/mutations.ts
+++ b/src/shipping/mutations.ts
@@ -47,6 +47,14 @@ import {
   ShippingMethodZipCodeRangeUnassign,
   ShippingMethodZipCodeRangeUnassignVariables
 } from "./types/ShippingMethodZipCodeRangeUnassign";
+import {
+  ShippingPriceExcludeProduct,
+  ShippingPriceExcludeProductVariables
+} from "./types/ShippingPriceExcludeProduct";
+import {
+  ShippingPriceRemoveProductFromExclude,
+  ShippingPriceRemoveProductFromExcludeVariables
+} from "./types/ShippingPriceRemoveProductFromExclude";
 import {
   UpdateDefaultWeightUnit,
   UpdateDefaultWeightUnitVariables
@@ -297,3 +305,38 @@ export const useShippingMethodZipCodeRangeUnassign = makeMutation<
   ShippingMethodZipCodeRangeUnassign,
   ShippingMethodZipCodeRangeUnassignVariables
 >(shippingMethodZipCodeRulesDelete);
+
+export const shippingPriceExcludeProducts = gql`
+  ${shippingErrorFragment}
+  mutation ShippingPriceExcludeProduct(
+    $id: ID!
+    $input: ShippingPriceExcludeProductsInput!
+  ) {
+    shippingPriceExcludeProducts(id: $id, input: $input) {
+      errors: shippingErrors {
+        ...ShippingErrorFragment
+      }
+    }
+  }
+`;
+
+export const useShippingPriceExcludeProduct = makeMutation<
+  ShippingPriceExcludeProduct,
+  ShippingPriceExcludeProductVariables
+>(shippingPriceExcludeProducts);
+
+export const shippingPriceRemoveProductsFromExclude = gql`
+  ${shippingErrorFragment}
+  mutation ShippingPriceRemoveProductFromExclude($id: ID!, $products: [ID]!) {
+    shippingPriceRemoveProductFromExclude(id: $id, products: $products) {
+      errors: shippingErrors {
+        ...ShippingErrorFragment
+      }
+    }
+  }
+`;
+
+export const useShippingPriceRemoveProductsFromExclude = makeMutation<
+  ShippingPriceRemoveProductFromExclude,
+  ShippingPriceRemoveProductFromExcludeVariables
+>(shippingPriceRemoveProductsFromExclude);
diff --git a/src/shipping/queries.ts b/src/shipping/queries.ts
index 6f4eb71b3..5d288d90c 100644
--- a/src/shipping/queries.ts
+++ b/src/shipping/queries.ts
@@ -1,6 +1,6 @@
 import { pageInfoFragment } from "@saleor/fragments/pageInfo";
 import {
-  shippingZoneDetailsFragment,
+  shippingMethodWithExcludedProductsFragment,
   shippingZoneFragment
 } from "@saleor/fragments/shipping";
 import makeQuery from "@saleor/hooks/makeQuery";
@@ -36,10 +36,25 @@ export const useShippingZoneList = makeQuery<
 >(shippingZones);
 
 const shippingZone = gql`
-  ${shippingZoneDetailsFragment}
-  query ShippingZone($id: ID!) {
+  ${shippingZoneFragment}
+  ${shippingMethodWithExcludedProductsFragment}
+  query ShippingZone(
+    $id: ID!
+    $before: String
+    $after: String
+    $first: Int
+    $last: Int
+  ) {
     shippingZone(id: $id) {
-      ...ShippingZoneDetailsFragment
+      ...ShippingZoneFragment
+      default
+      shippingMethods {
+        ...ShippingMethodWithExcludedProductsFragment
+      }
+      warehouses {
+        id
+        name
+      }
     }
   }
 `;
diff --git a/src/shipping/types/ShippingPriceExcludeProduct.ts b/src/shipping/types/ShippingPriceExcludeProduct.ts
new file mode 100644
index 000000000..cf70df077
--- /dev/null
+++ b/src/shipping/types/ShippingPriceExcludeProduct.ts
@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ShippingPriceExcludeProductsInput, ShippingErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ShippingPriceExcludeProduct
+// ====================================================
+
+export interface ShippingPriceExcludeProduct_shippingPriceExcludeProducts_errors {
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
+  field: string | null;
+}
+
+export interface ShippingPriceExcludeProduct_shippingPriceExcludeProducts {
+  __typename: "ShippingPriceExcludeProducts";
+  errors: ShippingPriceExcludeProduct_shippingPriceExcludeProducts_errors[];
+}
+
+export interface ShippingPriceExcludeProduct {
+  shippingPriceExcludeProducts: ShippingPriceExcludeProduct_shippingPriceExcludeProducts | null;
+}
+
+export interface ShippingPriceExcludeProductVariables {
+  id: string;
+  input: ShippingPriceExcludeProductsInput;
+}
diff --git a/src/shipping/types/ShippingPriceRemoveProductFromExclude.ts b/src/shipping/types/ShippingPriceRemoveProductFromExclude.ts
new file mode 100644
index 000000000..1c55c5bf4
--- /dev/null
+++ b/src/shipping/types/ShippingPriceRemoveProductFromExclude.ts
@@ -0,0 +1,29 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ShippingErrorCode } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: ShippingPriceRemoveProductFromExclude
+// ====================================================
+
+export interface ShippingPriceRemoveProductFromExclude_shippingPriceRemoveProductFromExclude_errors {
+  __typename: "ShippingError";
+  code: ShippingErrorCode;
+  field: string | null;
+}
+
+export interface ShippingPriceRemoveProductFromExclude_shippingPriceRemoveProductFromExclude {
+  __typename: "ShippingPriceRemoveProductFromExclude";
+  errors: ShippingPriceRemoveProductFromExclude_shippingPriceRemoveProductFromExclude_errors[];
+}
+
+export interface ShippingPriceRemoveProductFromExclude {
+  shippingPriceRemoveProductFromExclude: ShippingPriceRemoveProductFromExclude_shippingPriceRemoveProductFromExclude | null;
+}
+
+export interface ShippingPriceRemoveProductFromExcludeVariables {
+  id: string;
+  products: (string | null)[];
+}
diff --git a/src/shipping/types/ShippingZone.ts b/src/shipping/types/ShippingZone.ts
index 04bb69905..3d9724c80 100644
--- a/src/shipping/types/ShippingZone.ts
+++ b/src/shipping/types/ShippingZone.ts
@@ -67,6 +67,37 @@ export interface ShippingZone_shippingZone_shippingMethods_channelListings {
   maximumOrderPrice: ShippingZone_shippingZone_shippingMethods_channelListings_maximumOrderPrice | null;
 }
 
+export interface ShippingZone_shippingZone_shippingMethods_excludedProducts_pageInfo {
+  __typename: "PageInfo";
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  endCursor: string | null;
+  startCursor: string | null;
+}
+
+export interface ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node_thumbnail {
+  __typename: "Image";
+  url: string;
+}
+
+export interface ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node {
+  __typename: "Product";
+  id: string;
+  name: string;
+  thumbnail: ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node_thumbnail | null;
+}
+
+export interface ShippingZone_shippingZone_shippingMethods_excludedProducts_edges {
+  __typename: "ProductCountableEdge";
+  node: ShippingZone_shippingZone_shippingMethods_excludedProducts_edges_node;
+}
+
+export interface ShippingZone_shippingZone_shippingMethods_excludedProducts {
+  __typename: "ProductCountableConnection";
+  pageInfo: ShippingZone_shippingZone_shippingMethods_excludedProducts_pageInfo;
+  edges: ShippingZone_shippingZone_shippingMethods_excludedProducts_edges[];
+}
+
 export interface ShippingZone_shippingZone_shippingMethods {
   __typename: "ShippingMethod";
   id: string;
@@ -76,6 +107,7 @@ export interface ShippingZone_shippingZone_shippingMethods {
   name: string;
   type: ShippingMethodTypeEnum | null;
   channelListings: ShippingZone_shippingZone_shippingMethods_channelListings[] | null;
+  excludedProducts: ShippingZone_shippingZone_shippingMethods_excludedProducts | null;
 }
 
 export interface ShippingZone_shippingZone_warehouses {
@@ -100,4 +132,8 @@ export interface ShippingZone {
 
 export interface ShippingZoneVariables {
   id: string;
+  before?: string | null;
+  after?: string | null;
+  first?: number | null;
+  last?: number | null;
 }
diff --git a/src/shipping/urls.ts b/src/shipping/urls.ts
index 2421f18a9..2f0fda05a 100644
--- a/src/shipping/urls.ts
+++ b/src/shipping/urls.ts
@@ -26,20 +26,30 @@ export type ShippingZoneUrlDialog =
   | "remove"
   | "remove-rate"
   | "unassign-country";
+
+export type ShippingMethodActions = "assign-product" | "unassign-product";
+
 export type ShippingZoneUrlQueryParams = Dialog<ShippingZoneUrlDialog> &
   SingleAction &
   Partial<{
     type: ShippingMethodTypeEnum;
-  }>;
+  }> &
+  Pagination;
 export const shippingZoneUrl = (
   id: string,
   params?: ShippingZoneUrlQueryParams
 ) => shippingZonePath(encodeURIComponent(id)) + "?" + stringifyQs(params);
 
 type ZipCodeRangeActions = "add-range" | "remove-range";
-export type ShippingRateUrlDialog = ZipCodeRangeActions | "remove";
+export type ShippingRateUrlDialog =
+  | ZipCodeRangeActions
+  | "remove"
+  | ShippingMethodActions;
+
 export type ShippingRateUrlQueryParams = Dialog<ShippingRateUrlDialog> &
-  SingleAction;
+  SingleAction &
+  BulkAction &
+  Pagination;
 export type ShippingRateCreateUrlDialog = ZipCodeRangeActions;
 export type ShippingRateCreateUrlQueryParams = Dialog<
   ShippingRateCreateUrlDialog
diff --git a/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx b/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx
index 3ce8f048c..05a481de8 100644
--- a/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx
+++ b/src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx
@@ -7,7 +7,7 @@ import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
 import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
-import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
+import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
 import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import { useShippingRateCreator } from "@saleor/shipping/handlers";
 import {
@@ -114,7 +114,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
         />
       )}
 
-      <ShippingZoneRatesPage
+      <ShippingZoneRatesCreatePage
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={channelsLoading || status === "loading"}
@@ -123,7 +123,6 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
         onBack={handleBack}
         errors={errors}
         channelErrors={channelErrors}
-        rate={null}
         zipCodes={zipCodes}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
diff --git a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
index b83a646ea..deeb4f552 100644
--- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
+++ b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx
@@ -1,3 +1,4 @@
+import Button from "@material-ui/core/Button";
 import { useChannelsList } from "@saleor/channels/queries";
 import {
   createShippingChannelsFromRate,
@@ -5,17 +6,26 @@ import {
 } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import { PAGINATE_BY } from "@saleor/config";
+import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import usePaginator, {
+  createPaginationState
+} from "@saleor/hooks/usePaginator";
 import { sectionNames } from "@saleor/intl";
 import { commonMessages } from "@saleor/intl";
+import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
+import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
 import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
 import ShippingZoneRatesPage, {
   FormData
 } from "@saleor/shipping/components/ShippingZoneRatesPage";
 import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
+import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
   getShippingMethodChannelVariables,
   getUpdateShippingPriceRateVariables
@@ -23,9 +33,9 @@ import {
 import {
   useShippingMethodChannelListingUpdate,
   useShippingMethodZipCodeRangeAssign,
-  useShippingMethodZipCodeRangeUnassign
-} from "@saleor/shipping/mutations";
-import {
+  useShippingMethodZipCodeRangeUnassign,
+  useShippingPriceExcludeProduct,
+  useShippingPriceRemoveProductsFromExclude,
   useShippingRateDelete,
   useShippingRateUpdate
 } from "@saleor/shipping/mutations";
@@ -39,7 +49,7 @@ import {
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 export interface PriceRatesUpdateProps {
   id: string;
@@ -55,11 +65,19 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const paginate = usePaginator();
 
-  const { data, loading } = useShippingZone({
+  const paginationState = createPaginationState(PAGINATE_BY, params);
+
+  const { data, loading, refetch } = useShippingZone({
     displayLoader: true,
-    variables: { id }
+    variables: { id, ...paginationState }
   });
+  const {
+    loadMore,
+    search: productsSearch,
+    result: productsSearchOpts
+  } = useProductSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA });
 
   const [openModal, closeModal] = createDialogActionHandlers<
     ShippingRateUrlDialog,
@@ -69,6 +87,17 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
   const rate = data?.shippingZone?.shippingMethods.find(
     rate => rate.id === rateId
   );
+
+  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
+    []
+  );
+
+  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+    rate?.excludedProducts.pageInfo,
+    paginationState,
+    params
+  );
+
   const { data: channelsData } = useChannelsList({});
 
   const [
@@ -98,6 +127,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
       }
     }
   });
+
   const [
     unassignZipCodeRange,
     unassignZipCodeRangeOpts
@@ -108,11 +138,32 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
           status: "success",
           text: intl.formatMessage(commonMessages.savedChanges)
         });
+      }
+    }
+  });
+
+  const [
+    unassignProduct,
+    unassignProductOpts
+  ] = useShippingPriceRemoveProductsFromExclude({
+    onCompleted: data => {
+      if (data.shippingPriceRemoveProductFromExclude.errors.length === 0) {
+        handleSuccess();
+        refetch();
         closeModal();
       }
     }
   });
 
+  const [assignProduct, assignProductOpts] = useShippingPriceExcludeProduct({
+    onCompleted: data => {
+      if (data.shippingPriceExcludeProducts.errors.length === 0) {
+        handleSuccess();
+        refetch();
+        closeModal();
+      }
+    }
+  });
   const shippingChannels = createShippingChannelsFromRate(
     rate?.channelListings
   );
@@ -168,6 +219,18 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
     }
   };
 
+  const handleProductAssign = (ids: string[]) =>
+    assignProduct({
+      variables: { id: rateId, input: { products: ids } }
+    });
+
+  const handleProductUnassign = (ids: string[]) => {
+    unassignProduct({
+      variables: { id: rateId, products: ids }
+    });
+    reset();
+  };
+
   const handleBack = () => navigate(shippingZoneUrl(id));
 
   return (
@@ -203,13 +266,35 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         open={params.action === "remove"}
         name={rate?.name}
       />
+      <UnassignDialog
+        open={params.action === "unassign-product" && !!listElements.length}
+        idsLength={listElements.length}
+        confirmButtonState={unassignProductOpts.status}
+        closeModal={closeModal}
+        onConfirm={() => handleProductUnassign(listElements)}
+      />
+      <ShippingMethodProductsAddDialog
+        confirmButtonState={assignProductOpts.status}
+        loading={productsSearchOpts.loading}
+        open={params.action === "assign-product"}
+        hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
+        products={productsSearchOpts.data?.search?.edges
+          .map(edge => edge.node)
+          .filter(suggestedProduct => suggestedProduct.id)}
+        onClose={closeModal}
+        onFetch={productsSearch}
+        onFetchMore={loadMore}
+        onSubmit={handleProductAssign}
+      />
       <ShippingZoneRatesPage
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={
           loading ||
           updateShippingRateOpts?.status === "loading" ||
-          updateShippingMethodChannelListingOpts?.status === "loading"
+          updateShippingMethodChannelListingOpts?.status === "loading" ||
+          unassignProductOpts?.status === "loading" ||
+          assignProductOpts?.status === "loading"
         }
         hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
         saveButtonBarState={updateShippingRateOpts.status}
@@ -224,7 +309,24 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
         }
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
+        onProductUnassign={handleProductUnassign}
+        onProductAssign={() => openModal("assign-product")}
         variant={ShippingMethodTypeEnum.PRICE}
+        isChecked={isSelected}
+        selected={listElements.length}
+        toggle={toggle}
+        toggleAll={toggleAll}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
+        pageInfo={pageInfo}
+        toolbar={
+          <Button color="primary" onClick={() => openModal("unassign-product")}>
+            <FormattedMessage
+              defaultMessage="Unassign"
+              description="unassign products from shipping method, button"
+            />
+          </Button>
+        }
         onZipCodeAssign={() => openModal("add-range")}
         onZipCodeUnassign={id =>
           openModal("remove-range", {
diff --git a/src/shipping/views/ShippingZoneDetails/index.tsx b/src/shipping/views/ShippingZoneDetails/index.tsx
index 501b81cbe..33a66b200 100644
--- a/src/shipping/views/ShippingZoneDetails/index.tsx
+++ b/src/shipping/views/ShippingZoneDetails/index.tsx
@@ -3,8 +3,10 @@ import ActionDialog from "@saleor/components/ActionDialog";
 import useAppChannel from "@saleor/components/AppLayout/AppChannelContext";
 import NotFoundPage from "@saleor/components/NotFoundPage";
 import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import { PAGINATE_BY } from "@saleor/config";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import { createPaginationState } from "@saleor/hooks/usePaginator";
 import useShop from "@saleor/hooks/useShop";
 import { commonMessages } from "@saleor/intl";
 import useWarehouseSearch from "@saleor/searches/useWarehouseSearch";
@@ -53,6 +55,8 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
   const intl = useIntl();
   const shop = useShop();
 
+  const paginationState = createPaginationState(PAGINATE_BY, params);
+
   const { result: searchWarehousesOpts, loadMore, search } = useWarehouseSearch(
     {
       variables: DEFAULT_INITIAL_SEARCH_DATA
@@ -61,7 +65,7 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
 
   const { data, loading } = useShippingZone({
     displayLoader: true,
-    variables: { id }
+    variables: { id, ...paginationState }
   });
   const { channel } = useAppChannel();
 
diff --git a/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx b/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
index 16bbd992d..fc16a78e3 100644
--- a/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
+++ b/src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
@@ -10,7 +10,7 @@ import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { sectionNames } from "@saleor/intl";
 import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
-import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage";
+import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
 import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
 import { useShippingRateCreator } from "@saleor/shipping/handlers";
 import {
@@ -117,7 +117,7 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
           toggleAll={toggleAllChannels}
         />
       )}
-      <ShippingZoneRatesPage
+      <ShippingZoneRatesCreatePage
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={channelsLoading || status === "loading"}
@@ -126,7 +126,6 @@ export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
         onBack={handleBack}
         errors={errors}
         channelErrors={channelErrors}
-        rate={null}
         zipCodes={zipCodes}
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
diff --git a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
index 2e6cbdb80..7216582b4 100644
--- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
+++ b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
@@ -1,3 +1,4 @@
+import Button from "@material-ui/core/Button";
 import { useChannelsList } from "@saleor/channels/queries";
 import {
   createShippingChannelsFromRate,
@@ -5,28 +6,39 @@ import {
 } from "@saleor/channels/utils";
 import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
+import { PAGINATE_BY } from "@saleor/config";
+import useBulkActions from "@saleor/hooks/useBulkActions";
 import useChannels from "@saleor/hooks/useChannels";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
+import usePaginator, {
+  createPaginationState
+} from "@saleor/hooks/usePaginator";
 import { sectionNames } from "@saleor/intl";
 import { commonMessages } from "@saleor/intl";
+import useProductSearch from "@saleor/searches/useProductSearch";
 import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog";
+import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog";
 import ShippingRateZipCodeRangeRemoveDialog from "@saleor/shipping/components/ShippingRateZipCodeRangeRemoveDialog";
 import ShippingZoneRatesPage, {
   FormData
 } from "@saleor/shipping/components/ShippingZoneRatesPage";
 import ShippingZoneZipCodeRangeDialog from "@saleor/shipping/components/ShippingZoneZipCodeRangeDialog";
+import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
 import {
   getShippingMethodChannelVariables,
   getUpdateShippingWeightRateVariables
 } from "@saleor/shipping/handlers";
 import {
+  useShippingMethodChannelListingUpdate,
   useShippingMethodZipCodeRangeAssign,
   useShippingMethodZipCodeRangeUnassign,
+  useShippingPriceExcludeProduct,
+  useShippingPriceRemoveProductsFromExclude,
   useShippingRateDelete,
   useShippingRateUpdate
 } from "@saleor/shipping/mutations";
-import { useShippingMethodChannelListingUpdate } from "@saleor/shipping/mutations";
 import { useShippingZone } from "@saleor/shipping/queries";
 import {
   ShippingRateUrlDialog,
@@ -37,7 +49,7 @@ import {
 import { ShippingMethodTypeEnum } from "@saleor/types/globalTypes";
 import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 export interface WeightRatesUpdateProps {
   id: string;
@@ -53,10 +65,13 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const paginate = usePaginator();
 
-  const { data, loading } = useShippingZone({
+  const paginationState = createPaginationState(PAGINATE_BY, params);
+
+  const { data, loading, refetch } = useShippingZone({
     displayLoader: true,
-    variables: { id }
+    variables: { id, ...paginationState }
   });
 
   const [openModal, closeModal] = createDialogActionHandlers<
@@ -64,15 +79,55 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
     ShippingRateUrlQueryParams
   >(navigate, params => shippingWeightRatesEditUrl(id, rateId, params), params);
 
+  const {
+    loadMore,
+    search: productsSearch,
+    result: productsSearchOpts
+  } = useProductSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA });
+
   const rate = data?.shippingZone?.shippingMethods.find(
     rate => rate.id === rateId
   );
 
+  const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
+    []
+  );
+
+  const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
+    rate?.excludedProducts.pageInfo,
+    paginationState,
+    params
+  );
+
   const { data: channelsData } = useChannelsList({});
   const [
     updateShippingMethodChannelListing,
     updateShippingMethodChannelListingOpts
   ] = useShippingMethodChannelListingUpdate({});
+
+  const [
+    unassignProduct,
+    unassignProductOpts
+  ] = useShippingPriceRemoveProductsFromExclude({
+    onCompleted: data => {
+      if (data.shippingPriceRemoveProductFromExclude.errors.length === 0) {
+        handleSuccess();
+        refetch();
+        closeModal();
+      }
+    }
+  });
+
+  const [assignProduct, assignProductOpts] = useShippingPriceExcludeProduct({
+    onCompleted: data => {
+      if (data.shippingPriceExcludeProducts.errors.length === 0) {
+        handleSuccess();
+        refetch();
+        closeModal();
+      }
+    }
+  });
+
   const shippingChannels = createShippingChannelsFromRate(
     rate?.channelListings
   );
@@ -166,6 +221,18 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
     }
   };
 
+  const handleProductAssign = (ids: string[]) =>
+    assignProduct({
+      variables: { id: rateId, input: { products: ids } }
+    });
+
+  const handleProductUnassign = (ids: string[]) => {
+    unassignProduct({
+      variables: { id: rateId, products: ids }
+    });
+    reset();
+  };
+
   const handleBack = () => navigate(shippingZoneUrl(id));
 
   return (
@@ -201,13 +268,35 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
         open={params.action === "remove"}
         name={rate?.name}
       />
+      <UnassignDialog
+        open={params.action === "unassign-product" && !!listElements.length}
+        idsLength={listElements.length}
+        confirmButtonState={unassignProductOpts.status}
+        closeModal={closeModal}
+        onConfirm={() => handleProductUnassign(listElements)}
+      />
+      <ShippingMethodProductsAddDialog
+        confirmButtonState={assignProductOpts.status}
+        loading={productsSearchOpts.loading}
+        open={params.action === "assign-product"}
+        hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
+        products={productsSearchOpts.data?.search?.edges
+          .map(edge => edge.node)
+          .filter(suggestedProduct => suggestedProduct.id)}
+        onClose={closeModal}
+        onFetch={productsSearch}
+        onFetchMore={loadMore}
+        onSubmit={handleProductAssign}
+      />
       <ShippingZoneRatesPage
         allChannelsCount={allChannels?.length}
         shippingChannels={currentChannels}
         disabled={
           loading ||
           updateShippingRateOpts?.status === "loading" ||
-          updateShippingMethodChannelListingOpts?.status === "loading"
+          updateShippingMethodChannelListingOpts?.status === "loading" ||
+          unassignProductOpts?.status === "loading" ||
+          assignProductOpts?.status === "loading"
         }
         hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
         saveButtonBarState={updateShippingRateOpts.status}
@@ -222,7 +311,24 @@ export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
         }
         openChannelsModal={handleChannelsModalOpen}
         onChannelsChange={setCurrentChannels}
+        onProductUnassign={handleProductUnassign}
+        onProductAssign={() => openModal("assign-product")}
         variant={ShippingMethodTypeEnum.WEIGHT}
+        isChecked={isSelected}
+        selected={listElements.length}
+        toggle={toggle}
+        toggleAll={toggleAll}
+        onNextPage={loadNextPage}
+        onPreviousPage={loadPreviousPage}
+        pageInfo={pageInfo}
+        toolbar={
+          <Button color="primary" onClick={() => openModal("unassign-product")}>
+            <FormattedMessage
+              defaultMessage="Unassign"
+              description="unassign products from shipping method, button"
+            />
+          </Button>
+        }
         onZipCodeAssign={() => openModal("add-range")}
         onZipCodeUnassign={id =>
           openModal("remove-range", {
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index a37ba2ea1..897a71360 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -13873,6 +13873,2835 @@ exports[`Storyshots Shipping / Pricing Card loading 1`] = `
 </div>
 `;
 
+exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+  >
+    <div
+      class="CardTitle-root-id"
+    >
+      <span
+        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+      >
+        Excluded Products
+      </span>
+      <div
+        class="CardTitle-toolbar-id"
+      >
+        <button
+          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label-id"
+          >
+            Assign products
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="CardTitle-children-id"
+    />
+    <hr
+      class="CardTitle-hr-id"
+    />
+    <div
+      class="ResponsiveTable-root-id"
+    >
+      <table
+        class="MuiTable-root-id ShippingMethodProducts-table-id"
+      >
+        <thead
+          class="MuiTableHead-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-head-id"
+          >
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-checkboxSelected-id MuiTableCell-paddingCheckbox-id"
+              scope="col"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
+              >
+                <span
+                  class="MuiIconButton-label-id"
+                >
+                  <input
+                    checked=""
+                    class="PrivateSwitchBase-input-id"
+                    data-indeterminate="false"
+                    type="checkbox"
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="currentColor"
+                      height="14"
+                      width="14"
+                      x="5"
+                      y="5"
+                    />
+                    <path
+                      clip-rule="evenodd"
+                      d="M 16.7527 9.33783 L 10.86618 15.7595 L 8 12.32006 L 8.76822 11.67988 L 10.90204 14.24046 L 16.0155 8.66211 L 16.7527 9.33783 Z"
+                      fill="white"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </th>
+            <th
+              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-root-id"
+              colspan="2"
+              scope="col"
+            >
+              <div
+                class="TableHead-container-id"
+              >
+                <div
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                >
+                  Selected 1 items
+                </div>
+                <div
+                  class="TableHead-spacer-id"
+                />
+                <div
+                  class="TableHead-toolbar-id"
+                />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tfoot
+          class="MuiTableFooter-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id MuiTableRow-footer-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+              colspan="3"
+            >
+              <div
+                class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
+              >
+                <div
+                  class="TablePagination-spacer-id"
+                />
+                <div
+                  class="TablePaginationActions-root-id"
+                >
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                    data-test="button-pagination-back"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M14 7l-5 5 5 5V7z"
+                        />
+                        <path
+                          d="M24 0v24H0V0h24z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                    data-test="button-pagination-next"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M10 17l5-5-5-5v10z"
+                        />
+                        <path
+                          d="M0 24V0h24v24H0z"
+                          fill="none"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+        <tbody
+          class="MuiTableBody-root-id"
+        >
+          <tr
+            class="MuiTableRow-root-id"
+          >
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+            >
+              <span
+                aria-disabled="false"
+                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+              >
+                <span
+                  class="MuiIconButton-label-id"
+                >
+                  <input
+                    class="PrivateSwitchBase-input-id"
+                    data-indeterminate="false"
+                    type="checkbox"
+                  />
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      fill="none"
+                      height="14"
+                      stroke="currentColor"
+                      width="14"
+                      x="5"
+                      y="5"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+            >
+              <div
+                class="TableCellAvatar-content-id"
+              >
+                <div
+                  class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                />
+                <div
+                  class="TableCellAvatar-children-id"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body2-id"
+                  >
+                    Apple Juice
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+            >
+              <button
+                class="MuiButtonBase-root-id MuiIconButton-root-id"
+                tabindex="0"
+                type="button"
+              >
+                <span
+                  class="MuiIconButton-label-id"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                    focusable="false"
+                    role="presentation"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Shipping / ShippingMethodProductsAddDialog default 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
+exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+      >
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+        >
+          Price Rate Create
+        </div>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="PageHeader-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Shipping rate name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Order Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id OrderValue-content-id"
+            >
+              <div
+                class="OrderValue-subheader-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-id"
+                        data-indeterminate="false"
+                        name="noLimits"
+                        type="checkbox"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <rect
+                          fill="none"
+                          height="14"
+                          stroke="currentColor"
+                          width="14"
+                          x="5"
+                          y="5"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                  >
+                    There are no value limits
+                    <div
+                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
+                    >
+                      This rate will apply to all orders of all prices
+                    </div>
+                  </span>
+                </label>
+                <div
+                  class="MuiTypography-root-id OrderValue-info-id MuiTypography-caption-id"
+                >
+                  Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
+                </div>
+              </div>
+              <div
+                class="ResponsiveTable-root-id"
+              >
+                <table
+                  class="MuiTable-root-id OrderValue-table-id"
+                >
+                  <thead
+                    class="MuiTableHead-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id MuiTableRow-head-id"
+                    >
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
+                        scope="col"
+                      >
+                        <span>
+                          Channel name
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Min. value
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Max. value
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          channel
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                            data-shrink="false"
+                          >
+                            Min Value
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              min="0"
+                              name="minValue:channel"
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                            data-shrink="false"
+                          >
+                            Max Value
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              min=""
+                              name="maxValue:channel"
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id PricingCard-pricingContent-id"
+            >
+              <div
+                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
+              >
+                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
+              </div>
+              <div
+                class="ResponsiveTable-root-id"
+              >
+                <table
+                  class="MuiTable-root-id PricingCard-table-id"
+                >
+                  <thead
+                    class="MuiTableHead-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id MuiTableRow-head-id"
+                    >
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
+                        scope="col"
+                      >
+                        <span>
+                          Channel name
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Price
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          channel
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
+                            data-shrink="false"
+                          >
+                            Price
+                            <span
+                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
+                            >
+                               *
+                            </span>
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              min="0"
+                              name="price"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                ZIP-Codes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test="add-zip-code-range"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add ZIP-Code range
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ShippingZoneZipCodes-radioContainer-id ShippingZoneZipCodes-hide-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="includeZipCodes"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
+                  >
+                    <span
+                      aria-disabled="true"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          disabled=""
+                          name="includeZipCodes"
+                          type="radio"
+                          value="1"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Exclude ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Added ZIP-codes will be excluded from using this delivery methods. If none are added all ZIP-Codes will be able to use that shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          name="includeZipCodes"
+                          type="radio"
+                          value="0"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Include ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Only added ZIP-codes will be able to use this shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <colgroup>
+                  <col />
+                  <col
+                    class="ShippingZoneZipCodes-colAction-id"
+                  />
+                </colgroup>
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id"
+                      >
+                        2 ZIP-Code ranges
+                      </div>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id ShippingZoneZipCodes-arrow-id ShippingZoneZipCodes-arrowRotate-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <g
+                              style="fill-rule:evenodd"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </g>
+                          </svg>
+                        </span>
+                      </button>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      51-220 - 51-200
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      44-205 - 31-101
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Availability
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
+            >
+              <div
+                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
+              >
+                Available at 1 out of 3 channels
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+              <div
+                class="ChannelsAvailabilityCard-channelItem-id"
+              >
+                <div
+                  class="ChannelsAvailabilityCard-channelName-id"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    channel
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+      >
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+        >
+          Weight Rate Create
+        </div>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="PageHeader-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                  data-shrink="false"
+                >
+                  Shipping rate name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Order Weight
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <label
+                class="MuiFormControlLabel-root-id"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <input
+                      class="PrivateSwitchBase-input-id"
+                      data-indeterminate="false"
+                      name="noLimits"
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <rect
+                        fill="none"
+                        height="14"
+                        stroke="currentColor"
+                        width="14"
+                        x="5"
+                        y="5"
+                      />
+                    </svg>
+                  </span>
+                </span>
+                <span
+                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                >
+                  There are no value limits
+                  <div
+                    class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
+                  >
+                    This rate will apply to all orders
+                  </div>
+                </span>
+              </label>
+              <div
+                class="OrderWeight-grid-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Min. Order Weight
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min="0"
+                      name="minValue"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <label
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
+                    data-shrink="false"
+                  >
+                    Max. Order Weight
+                  </label>
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
+                      min=""
+                      name="maxValue"
+                      type="number"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0.01px"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id PricingCard-pricingContent-id"
+            >
+              <div
+                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
+              >
+                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
+              </div>
+              <div
+                class="ResponsiveTable-root-id"
+              >
+                <table
+                  class="MuiTable-root-id PricingCard-table-id"
+                >
+                  <thead
+                    class="MuiTableHead-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id MuiTableRow-head-id"
+                    >
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
+                        scope="col"
+                      >
+                        <span>
+                          Channel name
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Price
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          channel
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
+                            data-shrink="true"
+                          >
+                            Price
+                            <span
+                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
+                            >
+                               *
+                            </span>
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              min="0"
+                              name="price"
+                              required=""
+                              type="number"
+                              value="5"
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          test
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id MuiFormLabel-required-id MuiInputLabel-required-id"
+                            data-shrink="true"
+                          >
+                            Price
+                            <span
+                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
+                            >
+                               *
+                            </span>
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              min="0"
+                              name="price"
+                              required=""
+                              type="number"
+                              value="6"
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                ZIP-Codes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test="add-zip-code-range"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add ZIP-Code range
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ShippingZoneZipCodes-radioContainer-id ShippingZoneZipCodes-hide-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="includeZipCodes"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
+                  >
+                    <span
+                      aria-disabled="true"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          disabled=""
+                          name="includeZipCodes"
+                          type="radio"
+                          value="1"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Exclude ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Added ZIP-codes will be excluded from using this delivery methods. If none are added all ZIP-Codes will be able to use that shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          name="includeZipCodes"
+                          type="radio"
+                          value="0"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Include ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Only added ZIP-codes will be able to use this shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <colgroup>
+                  <col />
+                  <col
+                    class="ShippingZoneZipCodes-colAction-id"
+                  />
+                </colgroup>
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id"
+                      >
+                        2 ZIP-Code ranges
+                      </div>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id ShippingZoneZipCodes-arrow-id ShippingZoneZipCodes-arrowRotate-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <g
+                              style="fill-rule:evenodd"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </g>
+                          </svg>
+                        </span>
+                      </button>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      51-220 - 51-200
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      44-205 - 31-101
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Availability
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
+            >
+              <div
+                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
+              >
+                Available at 2 out of 3 channels
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+              <div
+                class="ChannelsAvailabilityCard-channelItem-id"
+              >
+                <div
+                  class="ChannelsAvailabilityCard-channelName-id"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    channel
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+              <div
+                class="ChannelsAvailabilityCard-channelItem-id"
+              >
+                <div
+                  class="ChannelsAvailabilityCard-channelName-id"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    test
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
+<div
+  style="padding:24px"
+>
+  <form>
+    <div
+      class="Container-root-id"
+    >
+      <div
+        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
+      >
+        <div
+          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
+        >
+          Price Rate Create
+        </div>
+        <div
+          class="ExtendedPageHeader-action-id"
+        >
+          <div
+            class="PageHeader-root-id"
+          />
+        </div>
+      </div>
+      <div
+        class="Grid-root-id Grid-default-id"
+      >
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                General Information
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id"
+            >
+              <div
+                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+              >
+                <label
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                  data-shrink="false"
+                >
+                  Shipping rate name
+                </label>
+                <div
+                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
+                    disabled=""
+                    name="name"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                    style="padding-left:8px"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-id"
+                      style="width:0.01px"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Order Value
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id OrderValue-content-id"
+            >
+              <div
+                class="OrderValue-subheader-id"
+              >
+                <label
+                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
+                >
+                  <span
+                    aria-disabled="true"
+                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="MuiIconButton-label-id"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-id"
+                        data-indeterminate="false"
+                        disabled=""
+                        name="noLimits"
+                        type="checkbox"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        role="presentation"
+                        viewBox="0 0 24 24"
+                      >
+                        <rect
+                          fill="none"
+                          height="14"
+                          stroke="currentColor"
+                          width="14"
+                          x="5"
+                          y="5"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                  <span
+                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                  >
+                    There are no value limits
+                    <div
+                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
+                    >
+                      This rate will apply to all orders of all prices
+                    </div>
+                  </span>
+                </label>
+                <div
+                  class="MuiTypography-root-id OrderValue-info-id MuiTypography-caption-id"
+                >
+                  Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
+                </div>
+              </div>
+              <div
+                class="ResponsiveTable-root-id"
+              >
+                <table
+                  class="MuiTable-root-id OrderValue-table-id"
+                >
+                  <thead
+                    class="MuiTableHead-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id MuiTableRow-head-id"
+                    >
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
+                        scope="col"
+                      >
+                        <span>
+                          Channel name
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Min. value
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Max. value
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          channel
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                            data-shrink="false"
+                          >
+                            Min Value
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              disabled=""
+                              min="0"
+                              name="minValue:channel"
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
+                            data-shrink="false"
+                          >
+                            Max Value
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              disabled=""
+                              min=""
+                              name="maxValue:channel"
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Pricing
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id PricingCard-pricingContent-id"
+            >
+              <div
+                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
+              >
+                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
+              </div>
+              <div
+                class="ResponsiveTable-root-id"
+              >
+                <table
+                  class="MuiTable-root-id PricingCard-table-id"
+                >
+                  <thead
+                    class="MuiTableHead-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id MuiTableRow-head-id"
+                    >
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
+                        scope="col"
+                      >
+                        <span>
+                          Channel name
+                        </span>
+                      </th>
+                      <th
+                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
+                        scope="col"
+                      >
+                        <span>
+                          Price
+                        </span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody
+                    class="MuiTableBody-root-id"
+                  >
+                    <tr
+                      class="MuiTableRow-root-id"
+                    >
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          channel
+                        </div>
+                      </td>
+                      <td
+                        class="MuiTableCell-root-id MuiTableCell-body-id"
+                      >
+                        <div
+                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                        >
+                          <label
+                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-required-id MuiInputLabel-required-id"
+                            data-shrink="false"
+                          >
+                            Price
+                            <span
+                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
+                            >
+                               *
+                            </span>
+                          </label>
+                          <div
+                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                              disabled=""
+                              min="0"
+                              name="price"
+                              required=""
+                              type="number"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
+                            >
+                              <div
+                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                              >
+                                USD
+                              </div>
+                            </div>
+                            <fieldset
+                              aria-hidden="true"
+                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                              style="padding-left:8px"
+                            >
+                              <legend
+                                class="PrivateNotchedOutline-legend-id"
+                                style="width:0.01px"
+                              >
+                                <span>
+                                  ​
+                                </span>
+                              </legend>
+                            </fieldset>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                ZIP-Codes
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test="add-zip-code-range"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Add ZIP-Code range
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ShippingZoneZipCodes-radioContainer-id ShippingZoneZipCodes-hide-id"
+            >
+              <div
+                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
+              >
+                <div
+                  aria-label="includeZipCodes"
+                  class="MuiFormGroup-root-id"
+                  role="radiogroup"
+                >
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
+                  >
+                    <span
+                      aria-disabled="true"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                      tabindex="-1"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-id"
+                          disabled=""
+                          name="includeZipCodes"
+                          type="radio"
+                          value="1"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Exclude ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Added ZIP-codes will be excluded from using this delivery methods. If none are added all ZIP-Codes will be able to use that shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                  <label
+                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
+                    >
+                      <span
+                        class="MuiIconButton-label-id"
+                      >
+                        <input
+                          checked=""
+                          class="PrivateSwitchBase-input-id"
+                          name="includeZipCodes"
+                          type="radio"
+                          value="0"
+                        />
+                        <div
+                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+                            />
+                          </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                    </span>
+                    <span
+                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
+                    >
+                      <div
+                        class="ShippingZoneZipCodes-option-id"
+                      >
+                        <div
+                          class="MuiTypography-root-id MuiTypography-body1-id"
+                        >
+                          Include ZIP-codes
+                        </div>
+                        <div
+                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
+                        >
+                          Only added ZIP-codes will be able to use this shipping rate
+                        </div>
+                      </div>
+                    </span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id"
+              >
+                <colgroup>
+                  <col />
+                  <col
+                    class="ShippingZoneZipCodes-colAction-id"
+                  />
+                </colgroup>
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <div
+                        class="MuiTypography-root-id MuiTypography-caption-id"
+                      >
+                        2 ZIP-Code ranges
+                      </div>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id"
+                      scope="col"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id ShippingZoneZipCodes-arrow-id ShippingZoneZipCodes-arrowRotate-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <g
+                              style="fill-rule:evenodd"
+                            >
+                              <path
+                                d="M7 10l5 5 5-5z"
+                              />
+                            </g>
+                          </svg>
+                        </span>
+                      </button>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      51-220 - 51-200
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      44-205 - 31-101
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        data-test="delete-zip-code"
+                        data-test-id="1"
+                        disabled=""
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Availability
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              />
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
+            >
+              <div
+                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
+              >
+                Available at 1 out of 3 channels
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+              <div
+                class="ChannelsAvailabilityCard-channelItem-id"
+              >
+                <div
+                  class="ChannelsAvailabilityCard-channelName-id"
+                >
+                  <div
+                    class="MuiTypography-root-id MuiTypography-body1-id"
+                  >
+                    channel
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`Storyshots Shipping / UnassignDialog default 1`] = `
+<div
+  style="padding:24px"
+/>
+`;
+
 exports[`Storyshots SiteSettings / Add key dialog default 1`] = `
 <div
   style="padding:24px"
@@ -34925,13 +37754,195 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -34962,13 +37973,37 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -35508,13 +38543,195 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -35545,13 +38762,37 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -36636,13 +39877,195 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -36673,13 +40096,37 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -37212,13 +40659,195 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -37249,13 +40878,37 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -37793,13 +41446,195 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -37830,13 +41665,37 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -38369,13 +42228,195 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="Metadata-togglable-id"
           >
-            ‌
-          </span>
+            <div
+              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
+            >
+              1 Field
+            </div>
+            <button
+              class="MuiButtonBase-root-id MuiIconButton-root-id"
+              data-test="expand"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label-id"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root-id Metadata-table-id"
+        >
+          <thead
+            class="MuiTableHead-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id MuiTableRow-head-id"
+            >
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colNameHeader-id"
+                scope="col"
+              >
+                Field
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colValue-id"
+                scope="col"
+              >
+                Value
+              </th>
+              <th
+                class="MuiTableCell-root-id MuiTableCell-head-id Metadata-colActionHeader-id"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id"
+              data-test="field"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id Metadata-nameInput-id"
+                      name="name:0"
+                      type="text"
+                      value="integration.id"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colValue-id"
+              >
+                <div
+                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                >
+                  <div
+                    class="MuiInputBase-root-id MuiOutlinedInput-root-id Metadata-input-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      name="value:0"
+                      rows="1"
+                    >
+                      100023123
+                    </textarea>
+                    <textarea
+                      aria-hidden="true"
+                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
+                      readonly=""
+                      style="visibility:hidden;position:absolute;overflow:hidden;height:0;top:0;left:0;transform:translateZ(0)"
+                      tabindex="-1"
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                      style="padding-left:8px"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legend-id"
+                        style="width:0"
+                      >
+                        <span>
+                          ​
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colAction-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                  data-test="deleteField"
+                  data-test-id="0"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label-id"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root-id"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -38406,13 +42447,37 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           class="CardTitle-hr-id"
         />
         <div
-          class="MuiCardContent-root-id"
+          class="MuiCardContent-root-id Metadata-content-id"
+        />
+        <div
+          class="Metadata-emptyContainer-id"
         >
-          <span
-            class="Skeleton-skeleton-id"
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
           >
-            ‌
-          </span>
+            There is no private metadata created for this element.
+          </div>
+          <div
+            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+          >
+            Use the button below to add new metadata field
+          </div>
+        </div>
+        <div
+          class="MuiCardActions-root-id MuiCardActions-spacing-id"
+        >
+          <button
+            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+            data-test="addField"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label-id"
+            >
+              Add Field
+            </span>
+          </button>
         </div>
       </div>
       <div
@@ -195506,7 +199571,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
         <div
           class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
-          Price Rate Create
+          DB Schenker
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -195548,8 +199613,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
                 >
                   Shipping rate name
                 </label>
@@ -195561,7 +199626,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
-                    value=""
+                    value="DB Schenker"
                   />
                   <fieldset
                     aria-hidden="true"
@@ -195570,7 +199635,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                   >
                     <legend
                       class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
+                      style="width:0"
                     >
                       <span>
                         ​
@@ -196162,7 +200227,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                       <div
                         class="MuiTypography-root-id MuiTypography-caption-id"
                       >
-                        2 ZIP-Code ranges
+                        3 ZIP-Code ranges
                       </div>
                     </th>
                     <th
@@ -196206,7 +200271,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      51-220 - 51-200
+                      51-210 - 51-220
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -196242,7 +200307,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      44-205 - 31-101
+                      51-235 - 51-240
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -196250,7 +200315,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                         data-test="delete-zip-code"
-                        data-test-id="1"
+                        data-test-id="2"
                         tabindex="0"
                         type="button"
                       >
@@ -196272,6 +200337,307 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                       </button>
                     </td>
                   </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      51-274
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="2"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Excluded Products
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign products
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id ShippingMethodProducts-table-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
+                      scope="col"
+                    >
+                      Product Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                      colspan="3"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="TablePagination-spacer-id"
+                        />
+                        <div
+                          class="TablePaginationActions-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-next"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+                    >
+                      <div
+                        class="TableCellAvatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                        />
+                        <div
+                          class="TableCellAvatar-children-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body2-id"
+                          >
+                            Apple Juice
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -196349,7 +200715,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
         <div
           class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
-          Weight Rate Create
+          DB Schenker
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -196391,8 +200757,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                 class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                  data-shrink="true"
                 >
                   Shipping rate name
                 </label>
@@ -196404,7 +200770,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                     name="name"
                     type="text"
-                    value=""
+                    value="DB Schenker"
                   />
                   <fieldset
                     aria-hidden="true"
@@ -196413,7 +200779,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   >
                     <legend
                       class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
+                      style="width:0"
                     >
                       <span>
                         ​
@@ -196503,8 +200869,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                 >
                   <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                    data-shrink="true"
                   >
                     Min. Order Weight
                   </label>
@@ -196517,7 +200883,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                       min="0"
                       name="minValue"
                       type="number"
-                      value=""
+                      value="0"
                     />
                     <fieldset
                       aria-hidden="true"
@@ -196526,7 +200892,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -196539,8 +200905,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                 >
                   <label
-                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                    data-shrink="false"
+                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-filled-id"
+                    data-shrink="true"
                   >
                     Max. Order Weight
                   </label>
@@ -196550,10 +200916,10 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     <input
                       aria-invalid="false"
                       class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                      min=""
+                      min="0"
                       name="maxValue"
                       type="number"
-                      value=""
+                      value="80"
                     />
                     <fieldset
                       aria-hidden="true"
@@ -196562,7 +200928,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     >
                       <legend
                         class="PrivateNotchedOutline-legend-id"
-                        style="width:0.01px"
+                        style="width:0"
                       >
                         <span>
                           ​
@@ -196917,7 +201283,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                       <div
                         class="MuiTypography-root-id MuiTypography-caption-id"
                       >
-                        2 ZIP-Code ranges
+                        3 ZIP-Code ranges
                       </div>
                     </th>
                     <th
@@ -196961,7 +201327,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      51-220 - 51-200
+                      51-210 - 51-220
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -196997,7 +201363,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
-                      44-205 - 31-101
+                      51-235 - 51-240
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -197005,7 +201371,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                         data-test="delete-zip-code"
-                        data-test-id="1"
+                        data-test-id="2"
                         tabindex="0"
                         type="button"
                       >
@@ -197027,6 +201393,307 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                       </button>
                     </td>
                   </tr>
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      51-274
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        data-test="delete-zip-code"
+                        data-test-id="2"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Excluded Products
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign products
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id ShippingMethodProducts-table-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
+                      scope="col"
+                    >
+                      Product Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                      colspan="3"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="TablePagination-spacer-id"
+                        />
+                        <div
+                          class="TablePaginationActions-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-next"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+                    >
+                      <div
+                        class="TableCellAvatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                        />
+                        <div
+                          class="TableCellAvatar-children-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body2-id"
+                          >
+                            Apple Juice
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -197104,7 +201771,12 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
         <div
           class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
         >
-          Price Rate Create
+          <span
+            class="Skeleton-skeleton-id"
+            style="width:10em"
+          >
+            ‌
+          </span>
         </div>
         <div
           class="ExtendedPageHeader-action-id"
@@ -197800,154 +202472,6 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
               </table>
             </div>
           </div>
-        </div>
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Availability
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
-            >
-              <div
-                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
-              >
-                Available at 1 out of 3 channels
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-              <div
-                class="ChannelsAvailabilityCard-channelItem-id"
-              >
-                <div
-                  class="ChannelsAvailabilityCard-channelName-id"
-                >
-                  <div
-                    class="MuiTypography-root-id MuiTypography-body1-id"
-                  >
-                    channel
-                  </div>
-                </div>
-              </div>
-              <hr
-                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Storyshots Views / Shipping / Shipping rate no zip codes 1`] = `
-<div
-  style="padding:24px"
->
-  <form>
-    <div
-      class="Container-root-id"
-    >
-      <div
-        class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
-      >
-        <div
-          class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
-        >
-          Price Rate Create
-        </div>
-        <div
-          class="ExtendedPageHeader-action-id"
-        >
-          <div
-            class="PageHeader-root-id"
-          />
-        </div>
-      </div>
-      <div
-        class="Grid-root-id Grid-default-id"
-      >
-        <div>
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                General Information
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id"
-            >
-              <div
-                class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-              >
-                <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                  data-shrink="false"
-                >
-                  Shipping rate name
-                </label>
-                <div
-                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                >
-                  <input
-                    aria-invalid="false"
-                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                  <fieldset
-                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                    style="padding-left:8px"
-                  >
-                    <legend
-                      class="PrivateNotchedOutline-legend-id"
-                      style="width:0.01px"
-                    >
-                      <span>
-                        ​
-                      </span>
-                    </legend>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </div>
           <div
             class="CardSpacer-spacer-id"
           />
@@ -197960,397 +202484,20 @@ exports[`Storyshots Views / Shipping / Shipping rate no zip codes 1`] = `
               <span
                 class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
               >
-                Order Value
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id OrderValue-content-id"
-            >
-              <div
-                class="OrderValue-subheader-id"
-              >
-                <label
-                  class="MuiFormControlLabel-root-id"
-                >
-                  <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                  >
-                    <span
-                      class="MuiIconButton-label-id"
-                    >
-                      <input
-                        class="PrivateSwitchBase-input-id"
-                        data-indeterminate="false"
-                        name="noLimits"
-                        type="checkbox"
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root-id"
-                        focusable="false"
-                        role="presentation"
-                        viewBox="0 0 24 24"
-                      >
-                        <rect
-                          fill="none"
-                          height="14"
-                          stroke="currentColor"
-                          width="14"
-                          x="5"
-                          y="5"
-                        />
-                      </svg>
-                    </span>
-                  </span>
-                  <span
-                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                  >
-                    There are no value limits
-                    <div
-                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
-                    >
-                      This rate will apply to all orders of all prices
-                    </div>
-                  </span>
-                </label>
-                <div
-                  class="MuiTypography-root-id OrderValue-info-id MuiTypography-caption-id"
-                >
-                  Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency
-                </div>
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id OrderValue-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Min. value
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id OrderValue-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Max. value
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Min Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="minValue:channel"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              style="padding-left:8px"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legend-id"
-                                style="width:0.01px"
-                              >
-                                <span>
-                                  ​
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id OrderValue-price-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
-                            data-shrink="false"
-                          >
-                            Max Value
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min=""
-                              name="maxValue:channel"
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              style="padding-left:8px"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legend-id"
-                                style="width:0.01px"
-                              >
-                                <span>
-                                  ​
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                Pricing
-              </span>
-              <div
-                class="CardTitle-toolbar-id"
-              />
-            </div>
-            <div
-              class="CardTitle-children-id"
-            />
-            <hr
-              class="CardTitle-hr-id"
-            />
-            <div
-              class="MuiCardContent-root-id PricingCard-pricingContent-id"
-            >
-              <div
-                class="MuiTypography-root-id PricingCard-caption-id MuiTypography-caption-id"
-              >
-                Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency
-              </div>
-              <div
-                class="ResponsiveTable-root-id"
-              >
-                <table
-                  class="MuiTable-root-id PricingCard-table-id"
-                >
-                  <thead
-                    class="MuiTableHead-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id MuiTableRow-head-id"
-                    >
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colName-id"
-                        scope="col"
-                      >
-                        <span>
-                          Channel name
-                        </span>
-                      </th>
-                      <th
-                        class="MuiTableCell-root-id MuiTableCell-head-id PricingCard-colType-id"
-                        scope="col"
-                      >
-                        <span>
-                          Price
-                        </span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root-id"
-                  >
-                    <tr
-                      class="MuiTableRow-root-id"
-                    >
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          channel
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root-id MuiTableCell-body-id"
-                      >
-                        <div
-                          class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        >
-                          <label
-                            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
-                            data-shrink="false"
-                          >
-                            Price
-                            <span
-                              class="MuiFormLabel-asterisk-id MuiInputLabel-asterisk-id"
-                            >
-                               *
-                            </span>
-                          </label>
-                          <div
-                            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                              min="0"
-                              name="price"
-                              required=""
-                              type="number"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
-                            >
-                              <div
-                                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                              >
-                                USD
-                              </div>
-                            </div>
-                            <fieldset
-                              aria-hidden="true"
-                              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                              style="padding-left:8px"
-                            >
-                              <legend
-                                class="PrivateNotchedOutline-legend-id"
-                                style="width:0.01px"
-                              >
-                                <span>
-                                  ​
-                                </span>
-                              </legend>
-                            </fieldset>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-          <div
-            class="CardSpacer-spacer-id"
-          />
-          <div
-            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
-          >
-            <div
-              class="CardTitle-root-id"
-            >
-              <span
-                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
-              >
-                ZIP-Codes
+                Excluded Products
               </span>
               <div
                 class="CardTitle-toolbar-id"
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-                  data-test="add-zip-code-range"
                   tabindex="0"
                   type="button"
                 >
                   <span
                     class="MuiButton-label-id"
                   >
-                    Add ZIP-Code range
+                    Assign products
                   </span>
                 </button>
               </div>
@@ -198361,161 +202508,12 @@ exports[`Storyshots Views / Shipping / Shipping rate no zip codes 1`] = `
             <hr
               class="CardTitle-hr-id"
             />
-            <div
-              class="MuiCardContent-root-id ShippingZoneZipCodes-radioContainer-id ShippingZoneZipCodes-hide-id"
-            >
-              <div
-                class="MuiFormControl-root-id RadioGroupField-root-id RadioGroupField-rootNoLabel-id"
-              >
-                <div
-                  aria-label="includeZipCodes"
-                  class="MuiFormGroup-root-id"
-                  role="radiogroup"
-                >
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id MuiFormControlLabel-disabled-id"
-                  >
-                    <span
-                      aria-disabled="true"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id PrivateSwitchBase-checked-id MuiRadio-checked-id PrivateSwitchBase-disabled-id MuiRadio-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                      tabindex="-1"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          checked=""
-                          class="PrivateSwitchBase-input-id"
-                          disabled=""
-                          name="includeZipCodes"
-                          type="radio"
-                          value="1"
-                        />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZoneZipCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Exclude ZIP-codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Added ZIP-codes will be excluded from using this delivery methods. If none are added all ZIP-Codes will be able to use that shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                  <label
-                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id RadioGroupField-alignTop-id MuiIconButton-colorPrimary-id"
-                    >
-                      <span
-                        class="MuiIconButton-label-id"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input-id"
-                          name="includeZipCodes"
-                          type="radio"
-                          value="0"
-                        />
-                        <div
-                          class="PrivateRadioButtonIcon-root-id"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-                            />
-                          </svg>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
-                            focusable="false"
-                            role="presentation"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
-                            />
-                          </svg>
-                        </div>
-                      </span>
-                    </span>
-                    <span
-                      class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
-                    >
-                      <div
-                        class="ShippingZoneZipCodes-option-id"
-                      >
-                        <div
-                          class="MuiTypography-root-id MuiTypography-body1-id"
-                        >
-                          Include ZIP-codes
-                        </div>
-                        <div
-                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
-                        >
-                          Only added ZIP-codes will be able to use this shipping rate
-                        </div>
-                      </div>
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
             <div
               class="ResponsiveTable-root-id"
             >
               <table
-                class="MuiTable-root-id"
+                class="MuiTable-root-id ShippingMethodProducts-table-id"
               >
-                <colgroup>
-                  <col />
-                  <col
-                    class="ShippingZoneZipCodes-colAction-id"
-                  />
-                </colgroup>
                 <tbody
                   class="MuiTableBody-root-id"
                 >
@@ -198523,15 +202521,98 @@ exports[`Storyshots Views / Shipping / Shipping rate no zip codes 1`] = `
                     class="MuiTableRow-root-id"
                   >
                     <td
-                      class="MuiTableCell-root-id MuiTableCell-body-id"
-                      colspan="2"
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <span
+                        aria-disabled="true"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        tabindex="-1"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            disabled=""
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                     >
                       <div
-                        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
+                        class="TableCellAvatar-content-id"
                       >
-                        This shipping rate has no ZIP-codes assigned
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+                            />
+                          </svg>
+                        </div>
+                        <div
+                          class="TableCellAvatar-children-id"
+                        >
+                          <span
+                            class="Skeleton-skeleton-id"
+                          >
+                            ‌
+                          </span>
+                        </div>
                       </div>
                     </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -199595,6 +203676,271 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Excluded Products
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign products
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id ShippingMethodProducts-table-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
+                      scope="col"
+                    >
+                      Product Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                      colspan="3"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="TablePagination-spacer-id"
+                        />
+                        <div
+                          class="TablePaginationActions-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-next"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+                    >
+                      <div
+                        class="TableCellAvatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                        />
+                        <div
+                          class="TableCellAvatar-children-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body2-id"
+                          >
+                            Apple Juice
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -200470,6 +204816,271 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
               </table>
             </div>
           </div>
+          <div
+            class="CardSpacer-spacer-id"
+          />
+          <div
+            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+          >
+            <div
+              class="CardTitle-root-id"
+            >
+              <span
+                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
+              >
+                Excluded Products
+              </span>
+              <div
+                class="CardTitle-toolbar-id"
+              >
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Assign products
+                  </span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="CardTitle-children-id"
+            />
+            <hr
+              class="CardTitle-hr-id"
+            />
+            <div
+              class="ResponsiveTable-root-id"
+            >
+              <table
+                class="MuiTable-root-id ShippingMethodProducts-table-id"
+              >
+                <thead
+                  class="MuiTableHead-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-head-id"
+                  >
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colProductName-id"
+                      scope="col"
+                    >
+                      Product Name
+                    </th>
+                    <th
+                      class="MuiTableCell-root-id MuiTableCell-head-id ShippingMethodProducts-colAction-id"
+                      scope="col"
+                    >
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tfoot
+                  class="MuiTableFooter-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id MuiTableRow-footer-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
+                      colspan="3"
+                    >
+                      <div
+                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
+                      >
+                        <div
+                          class="TablePagination-spacer-id"
+                        />
+                        <div
+                          class="TablePaginationActions-root-id"
+                        >
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-back"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M14 7l-5 5 5 5V7z"
+                                />
+                                <path
+                                  d="M24 0v24H0V0h24z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                            data-test="button-pagination-next"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label-id"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root-id"
+                                focusable="false"
+                                role="presentation"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M10 17l5-5-5-5v10z"
+                                />
+                                <path
+                                  d="M0 24V0h24v24H0z"
+                                  fill="none"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tfoot>
+                <tbody
+                  class="MuiTableBody-root-id"
+                >
+                  <tr
+                    class="MuiTableRow-root-id"
+                  >
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <input
+                            class="PrivateSwitchBase-input-id"
+                            data-indeterminate="false"
+                            type="checkbox"
+                          />
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <rect
+                              fill="none"
+                              height="14"
+                              stroke="currentColor"
+                              width="14"
+                              x="5"
+                              y="5"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
+                    >
+                      <div
+                        class="TableCellAvatar-content-id"
+                      >
+                        <div
+                          class="MuiAvatar-root-id MuiAvatar-circle-id TableCellAvatar-avatar-id MuiAvatar-colorDefault-id"
+                        />
+                        <div
+                          class="TableCellAvatar-children-id"
+                        >
+                          <div
+                            class="MuiTypography-root-id MuiTypography-body2-id"
+                          >
+                            Apple Juice
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="MuiTableCell-root-id MuiTableCell-body-id ShippingMethodProducts-colAction-id"
+                    >
+                      <button
+                        class="MuiButtonBase-root-id MuiIconButton-root-id"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label-id"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
+                            focusable="false"
+                            role="presentation"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
         <div>
           <div
diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts
index fb376f2ea..13d89e397 100644
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@@ -1689,6 +1689,10 @@ export interface ShippingMethodChannelListingInput {
   removeChannels?: string[] | null;
 }
 
+export interface ShippingPriceExcludeProductsInput {
+  products: (string | null)[];
+}
+
 export interface ShippingPriceInput {
   name?: string | null;
   minimumOrderWeight?: any | null;