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.
Shopify Widget
Echo uses the Shopify widget. It is easy to customize the widget. Click here to see the relevant help articles.
Table Pro
Table Pro is used for the sizing charts on both product pages.
The tables are pre-styled so all you have to do is add either your csv file or your google sheet key.
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.
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.
Each group name is applied as a tooltip to each trigger.
Trigger is added to the tooltip name of bust, waist, and hips.
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.
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.
