As you are using the Shopify platform to show products and pretty sure that you not only use our app as a tool for promoting your products. To avoid confliction with other apps and enhance the displaying of labels on your store, we are pleased to introduce this new feature to allow the individual labels to display on custom positions on the Collection page and Product page.
This feature affects the individual label means you may have mixed displaying option of the label: on the Product Image (default) or on Other (customizable).
Example Collection page:
Example Product page:
Let's start to configure your label.
Step 1: Select Edit a label and navigate to tab Choose Image > Position
Set the value for Label Position on Collection Page: Other
Set the value for Label Position on Product Page: Same as Collection Page or Other
Note: The label would best work with fixed-size option, please update your label's size accordingly.
Click the Save button to update the changes of your label.
Note: This step only indicates the label to display on Other position, you need to configure the position for this label in the Settings page. See the next step to configure position parameters.
Step 2: Navigate to the Settings page and scroll down to the section LABEL in OTHER POSITION
Note: Default values for all fields are blank. You need to set value for each field to match your needs.
Note: The given sample values beneath the text boxes are ready to use.
All fields are inserted with sample value.
Field's explanation:
- Selector in Product Page: the value is jQuery selector format, normally is the HTML element and CSS style sheet class name or identifier.
Sample value: form[action="/cart/add"] which means the label would be appended after the Add to Cart button on the Product page. However, if your theme has been customized, this value may not work and you need to insert a different value.
How to set a different value in this field? For instance, you want to display label after the product's title, and the HTML structure is bellow:
<div class="product-main">
<div class="product-title"> THIS IS SAMPLE PRODUCT </div>
... other HTML Tags
</div>
Then the selector would be:
.product-main .product-tile
Please contact the app's developer at freehshopify@gmail.com if you are not confident and mention clearly the position on the page where you want to display the label would help faster support and response.
- CSS class name in Collection Page: is a name without special characters and spaces. Can use sample value to avoid collision with stylesheet naming in your theme.
Sample value:
fhs-coll
To be used in Collection Page.
- CSS Style in Collection Page: is the CSS style sheet value to align the label on your collection page.
Sample value:
.fhs-coll {display:block;padding:5px;position:relative;} .fhs-coll>div,.fhs-coll>a{height: 50px!important; text-align: bottom;}
- CSS class name in Product Page:
is a name without special characters and spaces. Can use sample value to avoid collision with stylesheet naming in your theme.
Sample value:
fhs-ext
To be used in Product Page.
- CSS Style in Product Page: is the CSS style sheet value to align the label on your Product page.
Sample value:
.fhs-ext {display:inline-block;padding:5px;position:relative;} .fhs-ext>div,.fhs-ext>a{height: 50px!important; text-align: bottom;}
Click the Save button to update changes.
Step 3: View your store to see the result.
You may need to adjust the CSS Style sheet to get the label display properly.
Please do not hesitate to contact to app's developer at freehshopify@gmail.com to get support.
The end.