View Single Post
  #2  
Old 12-16-2014, 09:46 AM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Greg Tetz View Post
I've integrated the Ecwid Muse themes widget into Muse.. But my products required a large number of options.. which pushes the Thumbnails waaaaaay down the page.. I'm trying to find a way to move the thumbnails up to be centred below the main product image.. is this possible? also maybe hover options on the main photo?

here is an example of my site

http://m7designsco.businesscatalyst....egory=11564453
Hello Greg,
In your case I'd like to suggest choosing one of several options.

It is possible to place image gallery thumbnails below the main product image. In order to achieve this, you should use the following Javascript code, which should be inserted in the source code of the web page where Ecwid is installed:
Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == "PRODUCT") {       jQuery("div.ecwid-productBrowser-details-GalleryPanel").insertAfter(".ecwid-productBrowser-details-thumbnail");
    }
})
</script>
This script has jQuery function, so you should install jQuery and jQuery libraries to your website. Place following code before </head> tag on the source page of your site/template:
Code:
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Once you add this code the image gallery thumbnails will be moved under main product image.

After that you can move gallery thumbnails to the right with the help of the following CSS code:
Code:
.ecwid-productBrowser-details-GalleryPanel {
	padding-left: 210px !important;
}
Place the code into the custom CSS theme: open your Ecwid control panel > System settings > Design page. Click "New CSS theme" button and place the code in the field. Then activate the theme and save changes.

Please, let me know how this approach works.

Alternatively, you can create custom image gallery with the help of 3-d party solution: https://www.magictoolbox.com/magicthumb/modules/ecwid/

There is another option, which may help to achieve your goal: add a slideshow in product description. Please find the instruction and the example in the following thread: http://www.ecwid.com/forums/showthread.php?t=28719#2
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.