Webstore UI Icons

A Sana webstore comes with the default design which includes a theme, user interface (UI) text items and icons.

All default webstore icons, like shopping cart, search, icons of the buttons (arrows, delete, close, clear, etc.), warning and error icons can be easily changed using the file manager. You can see an example of the icons used in the webstore interface on the screenshot below.

You can change the default icons used in the Sana webstore user interface in the webstore theme.

In Sana Admin click: Design & Layout > Themes and then click Edit on your webstore theme. On the Icons tab, you can change webstore icons.

On the Icons page, you can see all default webstore icons and replace any icon you want. You just need to create the icon, find the one that you want to replace, click Select image and upload the new icon using File Manager.

All webstore icons are in SVG file format. That is why we recommend to use icons in SVG format, if you want to replace any default icon used in the Sana webstore. We recommend to create icons of the same size as the size of the default icons not to break the design. For more information, see SVG Icons.

We also recommend to create a separate folder for the webstore icons in the File Manager. In this way, all icons will be stored in one place, and it will be easier to find any icon, if necessary.

The table below provides the information about where to find each icon in the Sana webstore.

Icon Name Icon Image Icon Location in the Sana Webstore
Account icons
Remove button
  • The Create return order page (return order lines)
  • Remove sub-account on the Sub-accounts page
  • Remove sub-account spending limits on the Edit sub-account page
Edit button The Sub-accounts page
Impersonating The header of the webstore (when a customer service representative impersonates a customer and accesses the webstore with customer’s account)
User menu The header of the webstore
Logout Account menu
Represent The Represent an account page
Stop representing The Represent an account page
Menu icons
Open menu Main menu
Close menu Main menu
Open menu item Main menu sticky header
Open menu item (mobile) Main menu in the mobile layout
Close menu item (mobile) Main menu in the mobile layout
Tables icons
Table sorting ascending icon
  • The My subscriptions page
  • Add-ons
Table sorting descending icon
  • The My subscriptions page
  • Add-ons
Table sorting available icon
  • The My subscriptions page
  • Add-ons
Shopping cart icons
Load list The Load list link in the shopping cart details
Empty shopping cart The Empty shopping cart link in the shopping cart details
Save as list The Save as list link in the shopping cart details
Add to list (product already in list) The Add to list (product already in list) button on the product details page
Add to list (product not in list) The Add to list (product not in list) button on the product details page
Recalculate shopping cart The Recalculate shopping cart link in the shopping cart details
Shopping cart miniature The header of the webstore
Add to list The Add to list link in the shopping cart details
Reconfigure button The Reconfigure button for the configurable products in the shopping cart overview
Delete shopping cart line button The Delete shopping cart line button in the shopping cart overview
Add shopping cart line comment The Add comment button in the shopping cart overview
Remove shopping cart line comment The Remove comment button in the shopping cart overview
Remove sales agreement The Remove button in the shopping cart details (for sales agreements)
Change sales agreement The Change button in the shopping cart details (for sales agreements)
Apply sales agreement terms automatically The Apply terms automatically button in the shopping cart details (for sales agreements)
Product list page icons
List view mode Product list page
List view mode (disabled) Product list page
Grid view mode Product list page
Grid view mode (disabled) Product list page
Clear last viewed products icon The Clear list button on the last viewed products page
My list page icons
Tooltip The My lists page
Stock alerts icons
Stock alerts The Set stock alert button displayed on the product details page (the user has not previously created a stock alert for the product)
Stock alerts (already created for product) The Set stock alert button displayed on the product details page (the user has created a stock alert for the product)
Multi-location stock icons
Location The location icon shown on the product details page, product list page, last viewed products, search results page, product compare page, and list details page
Location (disabled) The location icon shown on the product details page, product list page, last viewed products, search results page, product compare page, and list details page
Clear preferred location The Clear preferred location button shown in the Select location pop-up window
Select location button The Select button shown in the Select location pop-up window
Other icons
Search
  • Address selection on the Shipping information checkout step
  • Quick order mode (products are added to the shopping cart directly from the Shopping cart page)
  • The Create return order page
  • The details page of a sales agreement
  • The Represent customer page (customer representation by a sales agent)
  • The Bluetooth barcode scanner pop-up window
  • The Account details page
  • The list details page
  • The subscription creation page
Calendar
  • Date picker
  • The list details page
  • The Subscription settings page
  • The sales document pages (filters)
  • The Authorization history page (filters)
Checked All webstore checkboxes which are selected
Scroll page to top The Scroll to top button
Close
  • Cookiebar
  • Product comparison (on the Compare products page, and in the small window which appear in the left bottom corner of the webstore, when a customer selects products for comparison)
  • Webstore messages
  • Image popup on the product details page
  • All webstore popups
Remove / delete
  • Facetted filters which are already selected
  • Date picker (when date is already selected)
Floating shopping cart summary The floating Add to cart button
List item
  • Thumbnails
  • Image carousel on the product details page
  • Last viewed products
  • The Latest blog articles content element
List item (selected)
  • Thumbnails
  • Image carousel on the product details page
  • Last viewed products
  • The Latest blog articles content element
Medium arrow up
  • Facetted filters on the product details, product list pages, and blog (collapse)
  • The Order overview checkout step
  • Sub-account limits
  • The list details page (when a product group belongs to a list)
  • Main menu
Medium arrow down
  • Facetted filters on the product details, product list pages, and blog (expand)
  • The Order overview checkout step
  • Sub-account limits
  • The list details page (when a product group belongs to a list)
  • Main menu
  • In the shopping cart (sales agreement selection)
Medium arrow left Date picker
Medium arrow right
  • Date picker
  • The Account details page (address book)
Medium double arrow left Date picker
Medium double arrow right Date picker
Big arrow left
  • Image carousel thumbnails on the product details page
  • Product comparison
  • Image slider
Big arrow left (disabled)
  • Image carousel thumbnails on the product details page
  • Product comparison
  • Image slider
Big arrow right
  • Image carousel thumbnails on the product details page
  • Product comparison
  • Image slider
Big arrow right (disabled)
  • Image carousel thumbnails on the product details page
  • Product comparison
  • Image slider
Search button
  • The header of the webstore
  • Blog
Product suggestions The header of the webstore
Phone The header of the webstore
Back link The Back link
Breadcrumb separator Breadcrumbs
Status success
  • The Sub-accounts page
  • The Authorization history page
  • Header of each checkout step which is completed by a customer
  • The My subscriptions page
  • Two-factor authentication (recovery codes)
  • The Invoices history page
Status failed
  • The Sub-accounts page
  • The Authorization history page
  • The My subscriptions page
  • The Invoices history page
Status pending
  • The Authorization history page
  • The Invoices history page
Expand
  • The FAQ page
  • Products grouped in the shopping cart
Collapse
  • The FAQ page
  • Products grouped in the shopping cart
Copy
  • The My subscriptions page
  • The subscription details page
  • Two-factor authentication setup
  • The My lists page
  • The list details page
Pause
  • The My subscriptions page
  • The subscription details page
Skip The subscription details page
Discount The sales document lines
Share
  • The My lists page
  • The list details page
Public
  • The My lists page
  • The list details page
Upload The My lists page
Download The list details page
Set default shipping address
  • The Account details page
  • The Company details page
360 view The media gallery
Clear all quantities in the list The list details page
More
  • The subscription details page
  • The list details page
Refresh The Login details page (two-factor authentication)
Visibility on The Login details page (password fields)
Visibility off The Login details page (password fields)
Add to subscription (product not in subscription) The product details page
Add to subscription (product already in subscription) The product details page