The app can automatically determine the position of product's images and links for mostly stock themes. However, there would have some themes with special design cause the app does not work. Hence we introduce these setting parameters for you to manually configure if you are confident with HTML and CSS style sheet.
The other way please contact app's developer at freehshopify@gmail.com to get support.
Let's start to configure your theme.
Please navigate to the Settings page and scroll down to see section LABEL in DEFAULT POSITION
Note: by default all values are blank.
Field's explanation:
Selector in Product Page: the value is in jQuery selector format, normally is the HTML element and CSS style sheet class name or identifier.
The value must indicate the <a> tag which links to product page.
For example: your product page includes this HTML to display product image as a slider, pseudo-code is:
<div class="product-slider">
<ul class="image-slider">
<li class="slide-image">IMG tags....</li>
<li class="slide-image">IMG tags....</li>
<li class="slide-image">IMG tags....</li>
</ul>
</div>
Then you can set the value for this field to
- Cover the image's container: .product-slider .image-slider
- Cover every images: .slide-image img
Selector in Collection Page: the value is in jQuery selector format, normally is the HTML element and CSS style sheet class name or identifier.
The value must indicate the outer element of all images (normally is the image slider).
For example, your collection page includes many products which have following pseudo code to present single product:
<div class="product-item">
<a class="product-image" href="LINK_TO_PRODUCT">PRODUCT IMAGE HERE</a>
<div class="product-title">PRODUCT TITLE</div>
</div>
Then you can set the value for this field as .product-item a.product-image
Click Save button to update the changes.
The end.