Mouseover hover text in product catalog.

  • 1
  • Question
  • Updated 5 years ago
  • Answered
I was wondering how to change the hover text to say "quick view" instead of just copying the title text in my product catalog in Yola silver.
Photo of Randy Wilson

Randy Wilson

  • 4 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Randy

I'd need to look at this in your Yola account specifically. Can you please
  • provide your URL

  • tell me if "product catalog" refers to Yola Online Store or

  • to a navigation menu link on your Yola website?
Photo of Randy Wilson

Randy Wilson

  • 4 Posts
  • 0 Reply Likes
My page is at: www.twistednatures.com
I'm trying to get the products in my Yola Online Store to have hover text when moused over that says "quick view" so that people know they can click on the product picture to get a larger picture and description of that product.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Randy,

There is a mechanism which can be implemented to expand the catalogue image when hovered so that this is a cue to the fact that the specific product can be reviewed.

I'm not quite sure what you mean by having the facility of quick view but can look at this if you can give me further description.
Photo of Randy Wilson

Randy Wilson

  • 4 Posts
  • 0 Reply Likes
Ok then how do I implement this mechanism? and can I have a caption on the expanded picture that says "click for more info " or "quick view" so they know to click there to go to that items page?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

To zoom your images on hoverover add this CSS to your store CSS (Not the site CSS)

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

td.ecwid-productBrowser-productsGrid-cell img {
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

td.ecwid-productBrowser-productsGrid-cell img:hover {
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}


To add this to your Store CSS navigate to:

Online Store > Advanced Options > System Settings > Design > CSS Themes

You can pick from pre-defined schemes or create your custom version. You can find the list of all styles used by Ecwid at the gray "Base CSS Theme" window at the page bottom.

- Click "New CSS Theme"
- paste the above code into the CSS window
- Name and activate your scheme.
- Save changes
- Reload your live site if it's open in your browser. You don't need to republish for this to work.

There is nothing published as a method to add hover text to the store product images so unable to help you with this.
Photo of Randy Wilson

Randy Wilson

  • 4 Posts
  • 0 Reply Likes
ok thanx a bunch.