Changing left and right arrows on product details pages

Last updated

You might want to modify the arrows showing on product details pages:


In this article:

How to change left/right arrow images.

1. Grab this image:

It is a CSS sprite, so it actually has four button images merged into one: 

  • left arrow in mouse-over state
  • left arrow in regular state
  • right arrow in mouse-over state
  • right arrow in regular state.

2. Edit this image in any image editor. Change the look of the buttons.

3. Upload this image to your server or to any image hosting.

Important: the image should be publicly accessible via URL.

4. Add the following CSS code to your custom CSS theme:

a.ecwid-productBrowser-nav-left {
	background: url( center -22px no-repeat;

a.ecwid-productBrowser-nav-right {
	background: url( center -66px no-repeat;	

a.ecwid-productBrowser-nav-left:active {
	background: url( center 0 no-repeat;

a.ecwid-productBrowser-nav-right:active {
	background: url( center -44px no-repeat;

5. Replace the "" with the real absolute URL to the modified image. That's all.

How to set text labels instead of icons for prev/next links.

By default, text labels for the next/previous links are empty, so you see only the arrow pictures in your storefront. You can consider displaying the text labels there instead of images. Here is how you can do it:

1. You can change the text labels with the help of the "Storefront Label Editor" app

Change the values "Next product" and "Previous product" as you want. Please refer to the following for the details on how to apply custom translations: How can I change or translate any text in my storefront?

2. Add a CSS code to your custom CSS theme for hiding the arrows and customizing the layout of text links. For example, this code will hide the images and set text alignment for the links:

/* Prev/next links in text mode */
a.ecwid-productBrowser-nav-left:hover, a.ecwid-productBrowser-nav-left:active,
a.ecwid-productBrowser-nav-right:hover, a.ecwid-productBrowser-nav-right:active {
  background: transparent;
  padding: 10px;
  white-space: nowrap; 
a.ecwid-productBrowser-nav-right:hover, a.ecwid-productBrowser-nav-right:active {
 text-align: right;
font-size: 15px; } a.ecwid-productBrowser-nav-left, a.ecwid-productBrowser-nav-left:hover, a.ecwid-productBrowser-nav-left:active { text-align: left;
font-size: 15px; }

The result looks like this:


Back to top
Was this article helpful? 1 out of 5 found this helpful