Configuration Guide
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 [email protected] to get support.
Let's start to configure your theme.
Configure 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.
Pre-Configured Shopify Themes
We’ve put together instructions for many popular Shopify themes.
If you can’t find your theme, see if your theme is similar to one of these. Many themes follow a similar pattern.
Choose your theme below:
- Debut - by Shopify
- Venture - by Shopify
- Brooklyn - by Shopify
- Atlantic
- Boost
- Testament
- Parallax
- Responsive
- Prestige
- Blockshop
- Boostcommerce
- Konversion
- Impulse
- Motion
- Gecko 3.1
Theme Debut - by Shopify
Product page selector: Automated
Collection page selector: Automated
Theme Venture - by Shopify
Product page selector:
.product-single__photo img
Collection page selector: Automated
Theme Brooklyn - by Shopify
Product page selector: Automated
Collection page selector: Automated
Theme Atlantic
Product page selector: Automated
Collection page selector:
figure > a
Theme Boost
Product page selector:
.rimage-wrapper img
Collection page selector:
.bc-sf-filter-product-item-image > a
Theme Testament
Product page selector:
.product-main-image img
Collection page selector:
.product-index > a
Theme Parallax
Product page selector:
.image__container
Collection page selector: Automated
Theme Responsive
Product page selector:
.flexslider ul img
Collection page selector: Automated
Theme Prestige
Product page selector:
.Product__Gallery img
Collection page selector: Automated
Theme Blockshop
Product page selector:
.product-page--image img
Collection page selector: Automated
Theme Konversion
Product page selector:
.product-images__image .slick-list .slick-track
Collection page selector:
a.product-card__image
Theme Impulse
Product page selector:
.product-image-main .image-wrap
Collection page selector:
a.grid-product__link
Theme Motion
Product page selector:
.product__main-photos .slick-slider .slick-list .product-image-main
Collection page selector:
a.grid-product__link
Theme Gecko 3.1
Product page selector:
.slick-slide > a
Collection page selector:
.jas-product-img-element.jas-pr-image-link
Theme boostcommerce with filter & sear
Product page selector: Automated
Collection page selector:
a.productitem--image-link
The end.