How to add custom icon and label on Shopify pages with all themes using script tag api

zerrick
Shopify Partner
16 0 5

Hey,

I am building a Shopify App in which I am trying to add icons and labels on Shopify pages(Collections, product details page, etc) using script tag js on productsScreenshot (7).png.See the below image with custom icons and labels for this store theme. I am facing an issue to add icons and labels on other themes. Because I am not able to find a unique HTML element to add this. Please tell me how I can find a unique element for add icons and labels? Or any other useful information for achieving this.

 

 

 

Replies 17 (17)

UmairA
Shopify Partner
1106 101 225

Hey there @zerrick,

Can you please include the URL of your store? I'll take a look for you before I can offer any solution/guidance. Thanks

zerrick
Shopify Partner
16 0 5
KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

thanks but i can't see this lable do you have same theme or different?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@Ketan I am looking for generalize solution which will work on all themes.
As I mentioned above I am building a Shopify app and I need a way(may be HTML class or id) so I can find where that product is in theme.
Then with the help of javascript, I can put label on theme and it should work on all themes.

Here is the example store where I added a script tag
https://the-great-gambler.myshopify.com/collections/all

zerrick_0-1619337470134.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

i can see this view

KetanKumar_0-1619347926185.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@KetanKumar 
You should see this label. Please reload the page and try again.

zerrick_0-1619355741758.png

 

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

sorry but i can't see i have check all browsers are you sure this live theme do you have add code?

KetanKumar_0-1619379145346.png

 

or if possible to add me on staff so i will check and update

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@KetanKumar Sorry for the inconvenience.
There was some CORS issue which I fixed.

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

wow great 

thanks for an update here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@KetanKumar I am waiting for your reply. Also, I am available on skype.
I have already messaged you on skype.

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

if possible to add me staff account so i will check code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@KetanKumar I am not sure how it will help you to add you to the staff account.
I need to ask my superior about this.

Just want to clear my requirement again, I am building a Shopify App in which I need to add labels over the product image.
As per my experience, every theme on Shopify has different HTML elements and classes, so I cannot find a unique element in all themes to identify where the product image is showing in the DOM.

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

Yes, current all theme and store are different code so make your you have dynamic code so work all theme

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
zerrick
Shopify Partner
16 0 5

@KetanKumar Did not understand you here.
My question is how I can achieve this?

 

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

if you can give me access so i will check your code and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KetanKumar
Shopify Partner
36839 3635 11972

@zerrick 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Jason
Shopify Expert
11190 225 2282

How to add custom icon and label on Shopify pages with all themes using script tag api

You won't be able to. This assumes incorrectly that each theme displays and loads the product in the same way, with the same html and css base. That's not the case. A theme could be as is from a theme marketplace, customised to all sorts of levels, or just custom built from the ground app. 

One theme is way easier but also keep in mind that theme will have different versions depending on its age.

You will be able to make an app but you might need to rely on a compromised approach where the user has to add at least a teeny bit of code to define where the product is. Also making a series of guides for popular themes could be useful.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★