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
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
Shopping cart icons
Load list The Load list link in the shopping cart
Empty shopping cart The Empty shopping cart link in the shopping cart
Save as list The Save as list link in the shopping cart
Recalculate shopping cart The Recalculate shopping cart link in the shopping cart
Shopping cart miniature The header of the webstore
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
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)
Calendar Date picker
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)
Sticky shopping cart summary The floating Add to cart button
List item

  • Thumbnails

  • Image carousel on the product details page

  • Last viewed products
List item (selected)

  • Thumbnails

  • Image carousel on the product details page

  • Last viewed products
Medium arrow up

  • Facetted filters on the product details and product list pages (collapse)

  • The Order overview checkout step

  • Sub-account limits
Medium arrow down

  • Facetted filters on the product details and product list pages (expand)

  • The Order overview checkout step

  • Sub-account limits
Medium arrow left Date picker
Medium arrow right Date picker
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

  • Tabs on the product details page

  • Image slider
Big arrow left (disabled)

  • Image carousel thumbnails on the product details page

  • Product comparison

  • Tabs on the product details page

  • Image slider
Big arrow right

  • Image carousel thumbnails on the product details page

  • Product comparison

  • Tabs on the product details page

  • Image slider
Big arrow right (disabled)

  • Image carousel thumbnails on the product details page

  • Product comparison

  • Tabs on the product details page

  • Image slider
Search button The header of the webstore
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
Status failed

  • The Sub-accounts page

  • The Authorization history page
Status pending The Authorization history page
Expand

  • The FAQ page

  • Products grouped in the shopping cart
Collapse

  • The FAQ page

  • Products grouped in the shopping cart
Location Webstore pages where stock information is available, but not all. On webstore pages that display multiple products, like product group pages, the multi-location stock information can be shown without the location icon to save space.