How to use snippet code to adjust label position on the storefront?
Hello from Fordeer!
Currently, our app uses an automated algorithm to analyze common components in your theme and automatically display labels in the positions you have set.
However, there may be cases where the algorithm cannot properly analyze your theme. In such instances, we highly recommend using Snippet Code as an alternative.
Here’s how you can add the Snippet Code to your theme code by following these steps:
Create a Label Campaign:
- Ensure you have already created or have a label campaign. If not, please click the Create button to create a label campaign successfully.
Copy the Shortcode:
- In the Design section, scroll down and click on the Advanced arrow action to reveal the shortcode. Click Copy code
Identify the Product Image Wrapper:
- Go to your storefront and open the Console section.
- Navigate to the pages where you want to show the label, and identify the outer wrapper of the product image. (Ensure it has position: relative and not position: absolute.)
Edit Your Theme Code:
- Go to Online Store > Themes > Edit code.
- Search for the key code of the outer wrapper of the product image on the pages where you want to add the label. Double-check to ensure you have found the correct one.
- Paste the copied shortcode from the label campaign into the code section.
- Click Save to save the changes.
Verify Label Display:
- Check the label display on the specified pages.
Each label campaign has a specific shortcode. If you have three label campaigns, you need to add three lines of code to your theme code.
This action requires coding skills.
You need to add the shortcode to all the pages where you want the label to display.
For example, if you want to show labels on the homepage, product pages, and collections, you need to add the shortcode to the Liquid code on each page.
After creating the label, please wait 10-15 seconds for our app to load and then check the label display on your product images.
If the label appears, you do not need to add the shortcode to your theme. Use the shortcode only if the label does not show on the storefront.
If you are unsure where to add the code, please use the default position and contact us via live chat for a prompt fix or fill out this form to resolve the theme incompatibility quickly.
Thank you for your patience and support!
If you encounter any issues or have questions during the setup process, feel free to reach out to us via our app's live chat or email us at support@fordeercommerce.io.
We value your feedback as it helps us to improve and support your experience.
👉 Chat with us: Click here to share your thoughts and feedback directly.
👉 Install our apps: Get more Fordeer apps.
👉 Join us: Join Fordeer Commerce Community for fresh app updates, expert tips, and special deals.
We are always listening and eager to assist you!
Currently, our app uses an automated algorithm to analyze common components in your theme and automatically display labels in the positions you have set.
However, there may be cases where the algorithm cannot properly analyze your theme. In such instances, we highly recommend using Snippet Code as an alternative.
Here’s how you can add the Snippet Code to your theme code by following these steps:
Create a Label Campaign:
- Ensure you have already created or have a label campaign. If not, please click the Create button to create a label campaign successfully.
Copy the Shortcode:
- In the Design section, scroll down and click on the Advanced arrow action to reveal the shortcode. Click Copy code
Identify the Product Image Wrapper:
- Go to your storefront and open the Console section.
- Navigate to the pages where you want to show the label, and identify the outer wrapper of the product image. (Ensure it has position: relative and not position: absolute.)
Edit Your Theme Code:
- Go to Online Store > Themes > Edit code.
- Search for the key code of the outer wrapper of the product image on the pages where you want to add the label. Double-check to ensure you have found the correct one.
- Paste the copied shortcode from the label campaign into the code section.
- Click Save to save the changes.
Verify Label Display:
- Check the label display on the specified pages.
Important Notes:
Each label campaign has a specific shortcode. If you have three label campaigns, you need to add three lines of code to your theme code.
This action requires coding skills.
You need to add the shortcode to all the pages where you want the label to display.
For example, if you want to show labels on the homepage, product pages, and collections, you need to add the shortcode to the Liquid code on each page.
After creating the label, please wait 10-15 seconds for our app to load and then check the label display on your product images.
If the label appears, you do not need to add the shortcode to your theme. Use the shortcode only if the label does not show on the storefront.
If you are unsure where to add the code, please use the default position and contact us via live chat for a prompt fix or fill out this form to resolve the theme incompatibility quickly.
Thank you for your patience and support!
If you encounter any issues or have questions during the setup process, feel free to reach out to us via our app's live chat or email us at support@fordeercommerce.io.
We value your feedback as it helps us to improve and support your experience.
👉 Chat with us: Click here to share your thoughts and feedback directly.
👉 Install our apps: Get more Fordeer apps.
👉 Join us: Join Fordeer Commerce Community for fresh app updates, expert tips, and special deals.
We are always listening and eager to assist you!
Updated on: 25/07/2024
Thank you!