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.