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 page.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.keystring. Only declare what you use - each entry adds a field to the storefront query. See Metafields. - Transforms:
undefinedmeans “use the default behavior”. Provide a function to override how the value is rendered. Note thataddToCartButtondefaults to showing Swish’s cart buttons - supply it to hide them for particular products. See Transforms. - 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 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 theUiDesignOptionstype expects. See Design for details. - Views: When you provide a
sectionsarray for a view, it replaces the defaults entirely. See Views overview.