ฝัง
- เผยแพร่เมื่อ 11 ต.ค. 2024
- In this video i will show you how to add custom HTML section in Shopify using a custom liquid script that would add html code section on theme customizer.
Adding custom HTML section in Shopify is a must now because as you may already know, Shopify is a great platform for creating and managing an online store, it offers many features that make it easy to create a beautiful shop with minimal effort.
One of Shopify most useful features is its ability to add custom HTML sections into your Shopify store's pages, this allows you to add extra functionality or design elements with a simple HTML code that are not available through other parts of Shopify's interface giving your store an even more unique look and feel! For example, if you want to include special promotional banners on certain pages or display customer reviews from other sites, this can be easily done by adding some simple code snippets into these custom html sections.
Adding and using these custom html sections also makes it much easier for developers who are working on making changes/updates/additions to your Shopify store as they don't have dig around trying find where each element should go, they can easily do that by using the custom HTML sections in Shopify.
Code : pastebin.com/r...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this TH-cam channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#custom #html #shopify
Another guy was charging for a similar code, you saved me $35 and this was really easy to follow. Thanks so much!
Can I add HTMl and JavaScript together? Because I have an html code and it won't be of any use unless I can run JavaScript with it
Thank you so much! your video was easy to follow and explained thoroughly. I felt a little overwhelmed at first because i never added code but it was simple. I used this to add my affiliate codes to my shopify website. and you saved me money 50 $
Hi. Thank you for your videos, have been most helpful. Question on the JS. Can you give us an example of adding JS to it. I can't find any videos on how to add JS functionality to a specific section like you say we can do here. Thx.
With the HTML section, I'm trying to add an PNG image to my store. But it adds a shadow to it. How can I remove this?
How you put this background in the header of the home page? 😮
Can you explain that please?
It starts at 3:09
I need help, would you be able to do one on one consulting? How would I get a hold of you?
Just ran across the channel and love your style of presentation. However, the code did not work. I was able to create the raw.liquid file but when i go into the theme to add the new section, i do not see that new section in the list to choose from. Might there be a simple explanation for this? Thank you!
Scratch that, it DID work. But, i had to exit completely out of my theme and re-enter. Once i did that, i was able to see it. I've left this comment up for others who might experience the same as I did.
I was able to add this section no problem, but after adding content to it and using it, I can't get the normal popups for sections in the CMS to work now. They show for half a second out of position and then vanish. If I delete the section, they work again. Any ideas what's going on?
Hey Annas, i want to put it in a blok at another section. Can you pleassee help me?
Can I add Vanilla Javascript to it using tags ?
Hello @Anas! For some reason, it didn't work for me. Any clue what could be wrong? When I paste my HTML code in the Raw Text area, nothing shows up, the section becomes invisible. I converted design to html from Adobe XD and grabbed HTML from the chrome HTML. Seems like some tags are not right? :-( I see many positive reviews, so it must be something I'm doing. It's a cheap site for a friend so I'm trying to save money and not pay assistant dev.
Hey, If i had to guess that would probably be an issue with the exported code from adobe xd, try testing it with a different and simple html code that you can easily find online to make sure its a code issue.
Let me know in a new comment, its hard to find replies.
Cheers
How can I add a description in a collapsible content row for each product. When I add a collapsible row and information it automatically adds it to all products
my friend, i need to make google console account and it asks me for verification to copy paste the html tag on the head of my shopify before the main area. i have dawn theme as well. i copy paste it on the header but it isnt working; where should i put it? thank youuuu
Hi there, pastebin does not respond. I appreciate if you add a google doc or share the code through some other media.
HELLO? IS IT POSSIBLE TO ADD A QUIZ TO ANY SHOPIFY STORE? I WANT TO ADD ONE TO HELP MY CUSTOMERS PICK THE RIGHT PRODUCT FOR THEM
Hey, yeah there is some apps that can do that for you easily.
Cheers
@@OnHOWGuy thank you
@@mindfullmavericks Anytime
Thanks a alot ❤ but Text alignment doesn’t work - stays on left side, no matter what you choose
You need to add the following CSS code to the RAW Element section for it to recognize it. Hope this helps.
.pxs-rich-text-alignment-left {
text-align: left;
}
.pxs-rich-text-alignment-center {
text-align: center;
}
.pxs-rich-text-alignment-right {
text-align: right;
}
Can I also add CSS to this section?
will this allow you to add a autoplay video?
Yes, anything as long as its in html.
Cheers
Can you add it also at bloks?
It is giving me an error: Invalid preset "RAW Element": cannot include blocks in preset because there are no blocks defined.
Same
I had the same problem.
I just try some option and finally finde a way.
1. At first you copy the Code
2. Then you create the raw liquid
3. delet everything and klick save
than its past themselvs but i dont know why.
-----
And the Raw Luiquid is only showing, if you edit it in the theme bibliothek (in my case)
Hey, yeah this a bug from their end but i found a work around it.
Create that video-background section then copy and paste in the code from a section thats already available on your theme like featured-blog.liquid just like if you want to duplicate it then click save and once its saved then now simply remove that code from video-background and paste my code from the description and it will be saved now without any error.
Cheers
Thank you for this, really helped a lot ))
You're very welcome and glad i could help.
Cheers
@@OnHOWGuy Can you help me with the problem I described above?
Is this still working? Wasn't able to get it on my end.
What theme/version are you using ?
Please let me know in a new comment as its difficult for me now to see the replies.
Cheers
Great video. Very helpful and useful. Thank you for the code
You're welcome, glad i could help.
Cheers
only html? can't we add inline css style to it?
It worked for me
Can you share how to add scrolling bar using HTML code please ?? 😢
OMGOMGOMG THIS VIDEO SAVED MY LIFE!!!! I've been SCOURING the internet to figure out how the actual HELL to put a button that goes direct to my checkout on my shopify website. I couldnt figure out where to put the stupid code and I was seriously tearing my hair out and then i found THIS VIDEO WITH THE GOLDEN CUSTOM HTML CODE!!!! You're amazing, Thank you so so so so soooo much for making the code free and making this tutorial for us stupid people. When the code costs money I'm always wary that it will even do what I need. YOURE A GOD SEND!!
It didn't work for me. Any clue what could be wrong? When I paste my HTML code in the Raw Text area, nothing shows up, the section becomes invisible. I converted design to html from Adobe XD and grabbed HTML from the chrome HTML. Seems like some tags are not right? :-(
how can I add alt tag dynamic in my code
you are the best Anas, i have a problem i don't know how to add PayPal credit and debit cards to my store can you help me with this brother I will really appreciate you this
Thanks, i appreciate that.
What you mean by PayPal credit and debit cards ? you mean the bardges or the payment gateway, if its the later then you just need PayPal payment gateway thats it because they already cards processing.
Cheers
How to add Shop Now on Video in Store
How to add custom class on any h4 tag?
Followed every step but it’s coming under footer why?
Lifesaver! Works like a charm! :)
WHEN i click to get the code the page always show loading
You mean the pastebin ? try with vpn.
Cheers
Appreciate your channel. You are truly amazing 😊😊😊😊😊
That’s really amazing 🤩
Thanks, glad you think so.
Cheers
I have a test and it is for getting me a job but I am unable to make a move at some point
can you help out
If you asked a question i will be happy to help out but you said nothing, Whats the issue ?
Unfortuntely this did not work for me. using baseline theme
Thank you sir It is working.
it dosn't work ....
thanks
W
👍👍
We don’t need to see you talking, people need zoom in too see what your doing !
Hey, Isn't clearly visible ? and i do zoom in actually on the important stuff as well.
Cheers