Hanger Icon Placement: Expert Mode
The automatic hanger placement mode works well for the most common themes. If you are using a custom theme there might still arise some issues with the icon placement. In this case you can use the expert mode.
In the expert mode the icon placement can be controlled via several settings which control the way the documents DOM tree is queried and modified in order to place the icons. The placement procedure is the following.
Query the document DOM tree with the
Product Card CSS selectorto find the product card elements the gridFor each product card element
Search the product link in the descendant tree of the product card element. The link is needed to identify the product.
Inject the hanger icon: By default it is injected as child of the is the product card element. Optionally the icons parent element can be queried with the
Optional Hanger Icon Parent CSS selectoron the product card element.Optionally set "position: relative" in the parent elements style
Here a detailed explanation of the settings:
Product Card CSS selector
CSS Selector to query for the product cards.Optional Product Link CSS selector
Optional selector to queryHTMLAnchorElementscontaining the product link. There might be more than oneHTMLAnchorElementmatching per card, as long as they contain the same link. If left empty,a[href *= "/products/"]is used to detect the links.Optional Hanger Icon Parent CSS selector
Selector queried on each product card element to find the parent element into which the hanger icon element is injected as child. If left empty, the product card element is used as icon parent. The element must have the CSS property
position: relativeset to achieve a correct placement. If not so, choose a different element or use the 'Force 'position: relative' on Hanger Icon Parent Element' setting.Force 'position: relative' on Hanger Icon Parent Element
Whether to set 'position: relative' to the style of the icon parent element. Avoid this, since it might have negative effects onto the theme layout.