> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Full defaults

> Copy-paste reference with every option and its default value.

This page shows every relevant option with its resolved default value. Copy the block below, delete what you don't need, and change the values you want to override.

> [!NOTE]
>
> The app embed handles `storefront` and `context` automatically, and sets
> `auth.tokenUrl` and `ui.baseUrl` for you - they are shown below only because
> headless and self-hosted setups need them. `translations` is documented
> separately on the [Translations](https://swish.app/docs/guides/customize/translations.md) page.

```js theme={null}
window.SwishOptions = {
  // =====================================================================
  // Auth
  // On Shopify themes the default app proxy endpoint is correct. Headless
  // storefronts point this at their own auth proxy route.
  // =====================================================================

  auth: {
    tokenUrl: "/apps/wishlist/api/profiles/token",
  },

  // =====================================================================
  // Metafields
  // =====================================================================

  metafields: {
    product: [],
    productVariant: [],
  },

  // =====================================================================
  // Transforms
  // Each transform falls back to default behavior when omitted. See the
  // Transforms guide for signatures and examples.
  // =====================================================================

  transforms: {
    productTitle: undefined,
    productSubtitle: undefined,
    productDescription: undefined,
    productBadges: undefined,
    productPrice: undefined,
    addToCartButton: undefined,
    linkToProductPage: undefined,
    variantTitle: undefined,
    optionValues: undefined,
    combinedListingParent: undefined,
    hideOption: undefined,
    recommendations: undefined,
  },

  // =====================================================================
  // Intents (behaviour)
  // =====================================================================

  intents: {
    saveProduct: {
      promptVariantIfMissing: true,
      promptVariantIfPresent: false,
      saveBeforeVariantPrompt: true,
      showFeedback: true,
    },
    unsaveProduct: {
      selectList: true,
      confirm: true,
      showFeedback: true,
    },
    editSavedProduct: {
      promptVariantChange: true,
      showFeedback: true,
    },
    initiateQuickBuy: {
      promptVariantIfPresent: false,
    },
    createCartLine: {
      afterComplete: undefined,
    },
    removeCartLine: {
      saveCartLine: true,
    },
    saveCartLine: {
      confirm: false,
      showFeedback: true,
      destination: "saved-from-cart",
      afterComplete: undefined,
    },
  },

  // =====================================================================
  // Placements
  // =====================================================================

  placements: [],

  // =====================================================================
  // UI
  // =====================================================================

  ui: {
    // The app embed sets `baseUrl` to the CDN matching the SDK version it
    // loaded. Only override it when self-hosting the UI assets.
    baseUrl: "https://swish.app/cdn",
    css: [],
    images: { baseTint: true },
    toasts: { autoHideDuration: 5000 },

    wishlist: {
      // "classic-page" replaces the drawer: navigation intents redirect to
      // `context.routes.listDetailPagePath` and multi-list is off with it.
      experience: "drawer",

      // `false` keeps the drawer but gives each customer one list, so nothing
      // prompts for one on save or unsave. Implied by "classic-page" above.
      multipleLists: true,
    },

    // The view the drawer opens on, and the one Back returns to.
    // `view:home` resolves to it.
    defaultView: "home",

    // Applies to every product card. Both are unset by default so the layer
    // below decides.
    productCard: {
      // `false` hides the quick-buy button on every card while leaving Add to
      // cart on the product detail view alone. A hard off switch: a section's
      // own `showQuickBuyButton: true` cannot override it.
      showQuickBuyButton: undefined,

      // The only per-card link setting: no section has its own.
      // `transforms.linkToProductPage` decides when this is unset.
      linkToProductPage: undefined,
    },

    // -------------------------------------------------------------------
    // Design tokens
    // Values shown are the CSS defaults from theme.css. Pass any subset
    // to override - omitted keys keep their defaults.
    // -------------------------------------------------------------------

    design: {
      sizes: {
        buttonHeight: "48px",
        iconButtonSize: "32px",
        formInputHeight: "48px",
        iconSize: "20px",
        imageCardAspectRatio: "2 / 3",
        imageSliderAspectRatio: "4 / 5",
        thumbnailAspectRatio: "1 / 1",
        imageFit: "cover",
      },

      rounding: {
        borderRadiusScale: 1,
        badgeBorderRadius: "calc(var(--swish-theme-border-radius-scale) * 5px)",
        buttonBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 15px)",
        iconButtonBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 50px)",
        dialogBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 24px)",
        formInputBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 15px)",
        imageCardBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 10px)",
        imageSliderBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 16px)",
        thumbnailBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * 10px)",
      },

      // RGB values are space-separated, e.g. "255 255 255"
      colors: {
        backgroundRgb: "255 255 255",
        textColorRgb: "0 0 0",
        textColorDangerRgb: "240 64 64",
        headingColorRgb: "0 0 0",
        primaryButtonBackgroundRgb: "0 0 0",
        primaryButtonColorRgb: "255 255 255",
        neutralButtonBackgroundRgb: "242 244 245",
        neutralButtonColorRgb: "0 0 0",
        dangerButtonBackgroundRgb: "240 64 64",
        dangerButtonColorRgb: "255 255 255",
        statusDotBackgroundRgb: "240 64 64",
        badgeBackgroundRgb: "0 0 0",
        badgeColorRgb: "255 255 255",
        overlayBackground: "rgba(0, 0, 0, 0.4)",
      },

      typography: {
        // Headings
        headingFontFamily: "inherit",
        headingTextTransform: "none",
        headingFontSize: "20px",
        headingLetterSpacing: "normal",
        headingLineHeight: 1.2,
        headingFontWeight: 600,

        // Body text
        textFontFamily: "inherit",
        textTextTransform: "none",
        textFontSize: "16px",
        textLetterSpacing: "normal",
        textLineHeight: 1.2,
        textLineHeightParagraph: 1.4,
        textFontWeight: 400,

        // Buttons
        buttonFontFamily: "inherit",
        buttonTextTransform: "none",
        buttonFontSize: "16px",
        buttonLetterSpacing: "1px",
        buttonLineHeight: 1,
        buttonFontWeight: 500,

        // Badges
        badgeFontFamily: "inherit",
        badgeTextTransform: "none",
        badgeFontSize: "12px",
        badgeLetterSpacing: "normal",
        badgeLineHeight: 1,
        badgeFontWeight: 500,
      },

      productCard: {
        productCardTitleFontSize: "12px",
        productCardTitleFontWeight: 500,
        productCardTitleColor: "var(--swish-theme-text-color)", // rgb(0 0 0)
      },

      // Drawer footer bar
      navigation: {
        navHeight: "62px",
        navBackground: "rgba(246, 246, 246, 1)",
        navShadow: "0px 0px 21px 0px rgba(0, 0, 0, 0.11)",
        navLabelFontSize: "10px",
        navLabelTextTransform: "none",
        navLabelLetterSpacing: "normal",
        navActiveIndicatorColor: "var(--swish-theme-text-color)", // rgb(0 0 0)
      },

      // Variant selectors
      optionPill: {
        optionPillHeight: "40px",
        optionPillBorderRadius:
          "calc(var(--swish-theme-border-radius-scale) * var(--swish-theme-option-pill-height) / 2)", // 20px
        optionPillBackground: "var(--swish-theme-neutral-button-background)", // rgb(242 244 245)
        optionPillBorderColor: "transparent",
        optionPillFontSize: "inherit",
        optionPillPadding: "calc(var(--swish-theme-spacing) * 2)", // 8px
        optionPillSelectedBackground:
          "var(--swish-theme-option-pill-background)",
        optionPillSelectedColor: "var(--swish-theme-neutral-button-color)", // rgb(0 0 0)
        optionPillSelectedBorderColor:
          "var(--swish-theme-neutral-button-color)",
      },

      drawer: {
        drawerWidth: "480px",
        drawerMobileTopOffset: "48px",
      },

      imageSlider: {
        imageSliderDotColorSelected:
          "rgb(var(--swish-theme-background-rgb) / 1)", // rgb(255 255 255)
      },

      // Save buttons, one set per look. No token has a default: an unset
      // token keeps the look's preset, noted after each name. The drawer and
      // wishlist page hearts follow the On image set.
      saveButtonOnImage: {
        // saveButtonOnImageIconColor (#121212), saveButtonOnImageSavedIconColor (#121212),
        // saveButtonOnImageIconFill (none), saveButtonOnImageSavedIconFill (the outline color),
        // saveButtonOnImageBackground (#ffffff), saveButtonOnImageSavedBackground (#ffffff),
        // saveButtonOnImageBackgroundSize (32px), saveButtonOnImageIconSize (20px),
        // saveButtonOnImageIconThickness (1.2px)
      },
      saveButtonOnPage: {
        // saveButtonOnPageColor (#ffffff), saveButtonOnPageSavedColor (#ffffff),
        // saveButtonOnPageIconFill (none), saveButtonOnPageSavedIconFill (the outline color),
        // saveButtonOnPageBackground (#121212), saveButtonOnPageSavedBackground (#121212),
        // saveButtonOnPageIconSize (20px), saveButtonOnPageIconThickness (1.2px)
      },
    },

    // -------------------------------------------------------------------
    // Icons
    // Override any key with a custom SVG string. Omitted keys use the
    // built-in SVG icons.
    // -------------------------------------------------------------------

    icons: {
      "arrow-left": "", // ArrowLeftIcon
      "arrow-right": "", // ArrowRightIcon
      back: "", // BackIcon
      bookmark: "", // BookmarkIcon
      cart: "", // CartIcon
      "check-circle": "", // CheckCircleIcon
      check: "", // CheckIcon
      "chevron-down": "", // ChevronDownIcon
      "chevron-left": "", // ChevronLeftIcon
      "chevron-right": "", // ChevronRightIcon
      "chevron-up": "", // ChevronUpIcon
      clipboard: "", // ClipboardIcon
      delete: "", // DeleteIcon
      edit: "", // EditIcon
      external: "", // ExternalIcon
      heart: "", // HeartIcon (save button)
      "alert-circle": "", // AlertIcon
      "menu-horizontal": "", // MenuHorizontalIcon
      minus: "", // MinusIcon
      notification: "", // NotificationIcon
      person: "", // PersonIcon
      "plus-circle": "", // PlusCircleIcon
      plus: "", // PlusIcon
      private: "", // LockIcon
      public: "", // PublicIcon
      select: "", // SelectIcon
      share: "", // ShareIcon
      x: "", // XIcon (close)

      // Large icons (drawer footer navigation)
      "large-chat": "", // LargeChatIcon
      "large-heart": "", // LargeHeartIcon (saves tab)
      "large-home": "", // LargeHomeIcon
      "large-list": "", // LargeListIcon
      "large-notification": "", // LargeNotificationIcon
      "large-order": "", // LargeOrderIcon
      "large-profile": "", // LargeProfileIcon
    },

    // ===================================================================
    // Views
    // ===================================================================

    drawer: {
      sections: [
        {
          type: "drawer-header",
          options: {
            title: "",
            logo: { url: "", altText: "" },
            headerStyle: "logo",
            guestGreeting: "",
            useCloseButton: false,
            accountButton: true,
            accountButtonUrl: "profile",
            notificationButton: true,
          },
        },
        {
          type: "drawer-footer",
          hidden: false,
          options: {
            displayType: "docked",
            showIcons: false,
            showText: true,
            fontScale: 1,
            items: [
              { id: "home", enabled: true, intent: "view:home" },
              { id: "saves", enabled: true, intent: "view:saves" },
              { id: "lists", enabled: false, intent: "view:lists" },
              {
                id: "notifications",
                enabled: true,
                intent: "view:notifications",
              },
              { id: "orders", enabled: true, intent: "view:orders" },
              { id: "profile", enabled: true, intent: "view:profile" },
            ],
          },
        },
      ],
    },

    home: {
      sections: [
        { type: "sign-in", hidden: false, options: { message: "" } },
        { type: "notifications", hidden: false },
        { type: "recently-viewed", hidden: false },
        { type: "saved-from-cart", hidden: false },
        { type: "saved-items", hidden: false },
        { type: "lists", hidden: false },
        {
          type: "mini-menu",
          hidden: true,
          items: [
            {
              title: "t:drawer.home.miniMenu.shipping",
              url: "/policies/shipping-policy",
            },
            {
              title: "t:drawer.home.miniMenu.returns",
              url: "/policies/refund-policy",
            },
            {
              title: "t:drawer.home.miniMenu.contactUs",
              url: "/pages/contact",
            },
          ],
        },
      ],
    },

    saves: {
      sections: [
        { type: "sign-in", hidden: false, options: { message: "" } },
        {
          type: "lists-section",
          hidden: false,
          options: { display: "myLists", layout: "slider" },
        },
        {
          type: "lists-section",
          hidden: false,
          options: { display: "forYouLists", layout: "slider" },
        },
        {
          type: "all-items-grid",
          hidden: false,
          options: {
            layout: "gallery",
            showVendor: true,
            showSaveButton: true,
            showQuickBuyButton: false,
            showBuyButton: false,
            showVariantTitle: true,
            enableVariantChange: false,
            showVariantOptionNames: true,
            hideCompareAtPrice: false,
            showImageToggle: false,
          },
        },
      ],
    },

    lists: {
      sections: [
        { type: "sign-in", hidden: false, options: { message: "" } },
        {
          type: "lists-grid",
          hidden: false,
          options: { displayType: "slider" },
        },
      ],
    },

    listDetail: {
      sections: [
        {
          type: "list-items-grid",
          hidden: false,
          options: {
            layout: "gallery",
            showVendor: true,
            showBuyButton: false,
            showQuickBuyButton: false,
            showQuantityInput: false,
            showVariantTitle: true,
            showVariantOptionNames: false,
            enableVariantChange: false,
            hideCompareAtPrice: false,
            showImageToggle: false,
            showExpandButton: false,
          },
        },
      ],
    },

    orders: {
      sections: [{ type: "orders-list", hidden: false }],
    },

    orderDetail: {
      sections: [
        { type: "order-info", hidden: false },
        { type: "order-items", hidden: false },
        { type: "order-actions" },
      ],
    },

    productDetail: {
      sections: [
        {
          type: "image-slider",
          hidden: false,
          options: { flush: true, loop: false },
        },
        {
          type: "product-info",
          hidden: false,
          options: {
            descriptionMaxLines: 4,
            variantSelectDisplayType: "pills",
            hideSingleValueOptions: true,
            images: { baseTint: true },
          },
        },
        {
          type: "buy-buttons",
          hidden: false,
          options: { shopPay: false },
        },
        {
          type: "complementary-products",
          hidden: false,
          options: { showQuickBuyButton: false, showSaveButton: true },
        },
        {
          type: "related-products",
          hidden: false,
          options: { showQuickBuyButton: false, showSaveButton: true },
        },
      ],
    },

    profile: {
      sections: [{ type: "profile-form", hidden: false }],
    },

    notifications: {
      sections: [{ type: "notifications-list", hidden: false }],
    },

    // -------------------------------------------------------------------
    // Standalone full-page list detail (outside the drawer)
    // -------------------------------------------------------------------

    listDetailPage: {
      sections: [
        {
          type: "list-items-grid",
          hidden: false,
          options: {
            layout: "gallery",
            showVendor: true,
            desktopColumns: 4,
            showBuyButton: false,
            showQuickBuyButton: false,
            showQuantityInput: false,
            showVariantTitle: true,
            showVariantOptionNames: false,
            enableVariantChange: true,
            hideCompareAtPrice: false,
          },
        },
      ],
    },
  },
};
```

## Notes

* **Metafields:** Declare each metafield as a `namespace.key` string. Only declare what you use - each entry adds a field to the storefront query. See [Metafields](https://swish.app/docs/guides/customize/metafields.md).
* **Transforms:** `undefined` means "use the default behavior". Provide a function to override how the value is rendered. Note that `addToCartButton` defaults to showing Swish's cart buttons - supply it to hide them for particular products. See [Transforms](https://swish.app/docs/guides/customize/transforms.md).
* **Icons:** Each key defaults to a built-in SVG component. To override, pass a custom SVG string (e.g. `"<svg>...</svg>"`). Omit or set to `""` to keep the default. See [Icons](https://swish.app/docs/guides/customize/appearance/icons.md) for the full list.
* **Design tokens:** Values shown are from the base CSS theme. Design tokens that reference `var(--swish-theme-*)` derive from other tokens - the resolved values at defaults are shown in comments. Tokens are grouped (`sizes`, `rounding`, `colors`, `typography`, `productCard`, `navigation`, `optionPill`, `drawer`, `imageSlider`); the groups are what the `UiDesignOptions` type expects. See [Design](https://swish.app/docs/guides/customize/appearance/design.md) for details.
* **Views:** When you provide a `sections` array for a view, it replaces the defaults entirely. See [Views overview](https://swish.app/docs/guides/customize/views/overview.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.