Changing left and right arrows on product details pages

Last updated

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

Apple_2017-10-04_11-28-33.png

How to change left/right arrow images.

1. Grab this image: https://sassme.ecwid.com/static/v1/icons/prevnext.png

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(http://www.example.com/images/my_custom_prevnext.png) center -22px no-repeat;
}

a.ecwid-productBrowser-nav-right {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center -66px no-repeat;	
}

a.ecwid-productBrowser-nav-left:hover,
a.ecwid-productBrowser-nav-left:active {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center 0 no-repeat;
}

a.ecwid-productBrowser-nav-right:hover,
a.ecwid-productBrowser-nav-right:active {
	background: url(http://www.example.com/images/my_custom_prevnext.png) center -44px no-repeat;
}

5. Replace the "http://www.example.com/images/my_custom_prevnext.png" 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, 
a.ecwid-productBrowser-nav-right, 
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, 
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:

text.png

For more details on how to add any CSS code to your store or create a custom CSS theme, refer to this article: Changing store design

Was this article helpful?
0 out of 3 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7