Echo Product Pages

Fluid Pro Stand-Alone Thumbnails

The product images use the Fluid Pro Stand-Alone thumbnails.
 
Add images through the Fill Panel.
 
Add a custom icon for the hover state by opening the Main Widget Option Panel > Thumbnails > Rollover State. Then add your file beside custom cursor on hover.
 
stand-alone-custom-cursor.jpg
 
 

Shopify Widget

Echo uses the Shopify widget. It is easy to customize the widget. Click here to see the relevant help articles. 
 
See this video for detailed help.
 
 

Table Pro

Table Pro is used for the sizing charts on both product pages. 
 
 
size-women.jpg
size-men.jpg
 
 
The tables are pre-styled so all you have to do is add either your csv file or your google sheet key. 
 
Instructions for table pro can be found here.
 
 

Product content

The product is pinned to top so that it stays fixed while you scroll. For layer order, make sure you keep these at the bottom so that the bottom content scrolls over it.
 
send-to-back.jpg
 
You may notice a white rectangle under the bottom content. This is there so that the bottom content is able to scroll over the product content.
 
 

Hover For Other

Hover For Other is used in both version1 and version2 but in slightly different ways. Full instructions for hover for other can be found here.
 
 
Version 1
The bust, waist, and hips are both used as triggers. When the trigger is hovered over, the hovered object will appear over the image. The hovered objects are 0% opacity for the normal state and then 100% opacity for the rollover state.
 
hover-women.jpg
 
Each group name is applied as a tooltip to each trigger.
 
h-group-names.jpg
 
 
Trigger is added to the tooltip name of bust, waist, and hips.
 
h-trigger.jpg
 
 
Version 2
 
The neck and chest text are both used as triggers. When the trigger is hovered over, the hovered object will get bigger. The hovered object has the same opacity for both normal and rollover state.
 
hover-men.jpg
 
Please note that hover for other does not work for touch devices since you cannot have hover effects on touch devices.
 
 

Tooltips

The tooltips are simple circles on the product 2 page that indicate which image is currently being viewed. To create a new tooltip, simply duplicate one of the existing ones. Add anchors and link them to new tooltips.
 
tooltips.jpg
 
 
Have more questions? Submit a request