Shopify themes, liquid, logos, and UX
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 products.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.
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
@UmairA @KetanKumar
Here are the store url
https://the-corner-store-go.myshopify.com/
thanks but i can't see this lable do you have same theme or different?
@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
i can see this view
sorry but i can't see i have check all browsers are you sure this live theme do you have add code?
or if possible to add me on staff so i will check and update
@KetanKumar Sorry for the inconvenience.
There was some CORS issue which I fixed.
wow great
thanks for an update here.
@KetanKumar I am waiting for your reply. Also, I am available on skype.
I have already messaged you on skype.
if possible to add me staff account so i will check code
@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.
Yes, current all theme and store are different code so make your you have dynamic code so work all theme
if you can give me access so i will check your code and let you know
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.
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024