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:



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.