Тёмный

Build an E-com Store with Framer CMS 

Omar Farook | Building Tech Startups
Подписаться 11 тыс.
Просмотров 81 тыс.
50% 1

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 224   
@elysiumcore
@elysiumcore 9 месяцев назад
Finally a decent CMS tutorial - I need to build a project site, this makes sense now - Thank you
@BuildwithOmar
@BuildwithOmar 9 месяцев назад
Happy to help!
@USAIDFAHAD
@USAIDFAHAD 2 месяца назад
the only perfect framer cms video.
@omotayotaiwo4375
@omotayotaiwo4375 8 месяцев назад
Subscribed because this is one of the most advanced stuff I've seen done with framer.
@BuildwithOmar
@BuildwithOmar 8 месяцев назад
Thanks brother!
@raunakhajela
@raunakhajela Год назад
I was looking for framer ecom tutorial and omg you really did it. This is 🔥
@BuildwithOmar
@BuildwithOmar Год назад
Thanks dude!
@johnpagley
@johnpagley Месяц назад
Great tutorial! I followed it minute by minute. Worked perfectly. Thank you for taking them time to walk us through this process!
@katoetonic
@katoetonic Год назад
Fantastic video Omar. I didn't realize Framer was so flexible and that an e-commerce store was possible. I'd like to see how the payment integrates with the store you built. Thanks for sharing.
@BuildwithOmar
@BuildwithOmar Год назад
Thanks buddy! Yes it’s just the external link, or you can add their native integrations like Gumroad or lemonsqueezy!
@chaitanyabidkar
@chaitanyabidkar Год назад
@@BuildwithOmar it would be great if you can cover this in a video
@makerbiz
@makerbiz Год назад
the fees for the native integrations are ridiculous. @@BuildwithOmar
@MICloops
@MICloops 9 месяцев назад
@@BuildwithOmar Would be awesome if you cover this in a video!
@fedorfilon8984
@fedorfilon8984 Год назад
Don't get me wrong but it's not a process of building e-commerce website. It's just a design of a store template, just like Figma. If someone want to build a web store he need information about payment gates, CEO, customers feedback. As I understand, frames don't have anything like this from the box. It's just like figma with publish button.
@BuildwithOmar
@BuildwithOmar 6 месяцев назад
It is a functional e-com site if you're selling through external platforms like LemonSqueezy or Gumroad. Yes it's better for digital products, you could also link products to your external Shopify site too, and interlink both web domains. So Framer becomes more front facing experience and Shopify could be your checkout experience. If you want a native checkout experience check out framercommerce.com. They're platform will allow you to make an actual check out system directly on your Framer site.
@ropl
@ropl Год назад
Great Video, little Feedback on the screen recording though. Big fan of Screen Studio but I would suggest you to decrease the size of the frame and decrease the zoom level a little bit. Right now it seems very hectic as it jumps from edge to edge and always includes this frame
@BuildwithOmar
@BuildwithOmar Год назад
Totally agree, got the same feedback before. Will make sure I do this moving forwards!
@jeffbeaudoin4544
@jeffbeaudoin4544 Месяц назад
Yeah great content but I'm literally dizzy.
@alexanderdiwa
@alexanderdiwa 6 месяцев назад
Omar, there are no words to express how grateful I am for this video. Before I stumbled across your video I was losing all motivation in building my store. I switched from Shopify to Framer because Shopify lacks design & UX/UI I’m looking for. I’m in the luxury high ticket niche so having an attractive website is a necessity. Again, thanks for sharing! Also, when will you go over on how to link payments? Or in general, how to integrate Shopify?
@BuildwithOmar
@BuildwithOmar 6 месяцев назад
You will have to connect Framercommerce.com, this is the only way. A bit pricey though!
@andraeugene6435
@andraeugene6435 2 месяца назад
I am in the Discord server, saw this video, and decided to view it. Wow. So much value in a tutorial. Framer looks like a great UX tool while Glorify would be a great UI tool. Both apps would make an unstoppable e-commerce force
@akbarbadsha25
@akbarbadsha25 Год назад
Wow, this is fantastic! Ran Segall has built the best community on Webflow, and you will be the man for Framer. :)
@BuildwithOmar
@BuildwithOmar Год назад
Haha I hope so buddy 🧡🙏🏽
@thevisuallaboratory
@thevisuallaboratory 4 месяца назад
This is so valuable! Already made my first ecommerce and it looks fire. Thank you so much and would love to see the checkout pop-up you mentioned
@melanie.7
@melanie.7 6 месяцев назад
Amazing video. So helpful. Thanks so much Omar. Quick question: How would I go on creating the add to cart flow that connects with shopify?
@dp_figma1875
@dp_figma1875 Год назад
Omar, I just discovered your channel. Aside from the content.. your presentation style is something I've never seen. You keep the interface large and the view chases your cursor movement. It's taking me a minute to get used to the continual movement - but I love not having to squint to figure out where you are. Looking forward to spending more time on your channel. Yes I've subscribed.
@BuildwithOmar
@BuildwithOmar 7 месяцев назад
Thanks for sub and feedback! Appreciate you!
@CarlosHernandez-dn5zh
@CarlosHernandez-dn5zh 3 месяца назад
Top top explanation! deserves all the likes and the subscriptions
@weareojo
@weareojo Год назад
Could you make another video about the payment method, just like you proposed 🙏😊?
@kujo2662
@kujo2662 6 месяцев назад
Yes please, we need payment method. show us omar!!!
@devmoudgill2903
@devmoudgill2903 Год назад
bro thanks for this tutoriual you just saved client without knowing it :)
@jeromedebruyne4091
@jeromedebruyne4091 Год назад
Very Nice vidéo . However without any checkout page and login management page it can not really be considered as a store page . Just saying that I ll be really happy to see the next step of your video . Great content so far !
@BuildwithOmar
@BuildwithOmar Год назад
We are in the process of figuring this part out!
@otaviocampos6734
@otaviocampos6734 Год назад
Me too, appreciate the efforts to show those functions, i wanna change to Framer, just wanna make sure it is capable of making the whole eco system of a store page, thank you for the opportunity
@amaycieng_
@amaycieng_ Год назад
Can you create something with checkout process. I love to see those~
@otaviocampos6734
@otaviocampos6734 Год назад
Is there a way to add customer review section and checkout page with customized functions, thank you!!
@musafirun5771
@musafirun5771 Год назад
awesome vid, was looking for something like this for a while! are you still planning on doing the payment checkout vid? would absolutely love to see that happening
@BuildwithOmar
@BuildwithOmar Год назад
Thanks 🙏🏽! Still planning but nothing out yet!
@siva_nesh_24
@siva_nesh_24 Год назад
​@@BuildwithOmar Thanks a ton, I learned a lot from this video. Will be awaiting the next one!
@f_vale
@f_vale Год назад
@@BuildwithOmar Awesomely put together ! Could this in any way be connected to shopify ? or even exported & imported to Shopify as a theme ? Thanks !
@shahilgupta1690
@shahilgupta1690 11 месяцев назад
It was too Helpful Omar, Thanks a Lot🙌🏻. Can you please make a tutorial on how to make a e-commerce store in Framer with Shopify please.
@cassquesada3504
@cassquesada3504 Год назад
I'm interested in adding a recommendation section to the product page. Do you have a tutorial on how to do this? By the way, this tutorial is awesome!
@BuildwithOmar
@BuildwithOmar Год назад
Like a review in the product page? There are some decent preset components framer offers.
@ksiddharth14
@ksiddharth14 Год назад
Thank you so much, you saved us a fortune, keep up!
@BuildwithOmar
@BuildwithOmar Год назад
Happy to help bro!
@eddiegustafsson1533
@eddiegustafsson1533 Год назад
Best video of the week, Helped me so much with my blog/Review site!
@BuildwithOmar
@BuildwithOmar Год назад
Happy to help!
@Amo-p2z
@Amo-p2z 9 месяцев назад
Its rare to find videos in this quality omar keep it up :) may allah bless you
@BuildwithOmar
@BuildwithOmar 7 месяцев назад
Thanks buddy! More coming 🙌
@mohammedaimannshaik9487
@mohammedaimannshaik9487 6 месяцев назад
what screen recording software do you use? I love it
@julianTrichardson
@julianTrichardson Год назад
Straight up FIRE!
@Hamzahharoon
@Hamzahharoon 5 месяцев назад
Awesome Video Omar, any possibility you can teach how to make an add to cart feature in Framer, which actually works and has backend stuff to it? I am guessing you are mostly a front end designer but let me know if you can do something like that. Thanks for the video again!
@AnimeRick86
@AnimeRick86 8 месяцев назад
Man, thank you very much for the video! This is going to help me a great deal!
@BuildwithOmar
@BuildwithOmar 7 месяцев назад
Glad you found value, Thanks man!
@tadeu.garcia
@tadeu.garcia 7 месяцев назад
you just blew my mind, thank you so much 🤯
@BuildwithOmar
@BuildwithOmar 7 месяцев назад
Thanks buddy 🙌 More coming!
@AbbasOmoloriMuhammad
@AbbasOmoloriMuhammad 6 месяцев назад
Hi omar, salaam alaikum, I love your video its easy to follow. Can you please make a video on how to include chat systems and game integrations( maybe chess) and video calls using framer and firebase. This will mean alot thanks
@zeydanwar
@zeydanwar Год назад
Nice work! Are you able to do a tutorial on building a dashboard/web app on Framer?
@BuildwithOmar
@BuildwithOmar Год назад
Coming soon, with a template for knowledge base for SaaS
@HenryJuliano-w1p
@HenryJuliano-w1p Год назад
Amazing video Omar. Really helped me out, is there any video on the "built in"/"integrated" check-out you talked about towards the end of the video? Thanks for a quality tutorial.
@BuildwithOmar
@BuildwithOmar 11 месяцев назад
Framer have released a few native integrations, like LemonSqueezy and Gumroad. However you can technically use their Custom HTML component and paste any code in there as a . I’ll try release a tutorial soon!
@techguy8305
@techguy8305 Год назад
This is awesome! Omar, thanks for sharing. Any plans to share how to design your Blog wit Framer CMS?
@BuildwithOmar
@BuildwithOmar Год назад
Thanks buddy, I’m hoping to do more soon!
@coachpeterwilliam
@coachpeterwilliam Год назад
I love how you did the the zoom in effects and your image in the bottom at 1:00 in, for the actual video I mean! Could you share how did that? Some editor plug-in?
@ismaelespana701
@ismaelespana701 Год назад
That was nice! But how do you set the sizes for your shoes? Without size selecction I don´t find any solution for a ecommerce with framer. Only the Home page can be done nicely.
@des7638
@des7638 Год назад
great tutorial. thank you. learned a ton
@ridhwwan
@ridhwwan 7 месяцев назад
I had to download your video a few months ago and just watched it so you won't be getting the view time reward. But I just, want you to know, this VIDEO WAS AWESOME AND INFORMATIVE
@BugsVsHumans
@BugsVsHumans Год назад
Hello bro, amazing content. However, if you make new pages for every category, would that load a bit slow? Can you make a tutorial, where you would only use buttons to filter CMS items? Thank you.
@BuildwithOmar
@BuildwithOmar Год назад
Thanks buddy. I address exactly that in this chapter: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ccRbK-uucSk.html
@BugsVsHumans
@BugsVsHumans Год назад
@@BuildwithOmar Do you need to create separate pages for each category? What if you would like to make some changes on one of the category pages? Do you have to update each one of those category page? Wouldn't it be cumbersome and impractical? Can't you at least make it a component if it is repeatable yet bound to change? Thanks.
@cozyalive
@cozyalive Год назад
Amazing, Can you make a video on how to make a store for a one product?
@BuildwithOmar
@BuildwithOmar Год назад
I’ll try my best!
@manishmalli13
@manishmalli13 Год назад
What an amazing tutorial! Thank you so much :D
@BuildwithOmar
@BuildwithOmar Год назад
Happy to help! 🙏🏽
@Adullam-TheSecretplace
@Adullam-TheSecretplace Год назад
This was very good! thank you!
@rumiguho9640
@rumiguho9640 10 месяцев назад
Amazing video... I wanted to ask how to create the login and sign up section
@stephenfahey-y7k
@stephenfahey-y7k 5 месяцев назад
Great video. I was looking into bigcommerce. Whats the benefit of using something like framer over bigcommerce?
@MCbyGracjan
@MCbyGracjan Год назад
*Based on a similar CMS, is it possible to create, for example, a wish list for a store?*
@shilhh3688
@shilhh3688 Год назад
So helpful, thank you !
@patriciataylor1925
@patriciataylor1925 Год назад
Wowwwww! Totally awesome video
@adityaagarwal2193
@adityaagarwal2193 29 дней назад
Hey! Could you share resources on the pop up shopify payment gateway. Also what would it cost me?
@mahmoudabdullah6647
@mahmoudabdullah6647 Год назад
Thanks, Omar!
@BuildwithOmar
@BuildwithOmar Год назад
Happy to help!
@creatoratplay
@creatoratplay 21 день назад
This is so helpful; thank you!! If the buy buton tkaes you to a shopify link, how does that work? Are customers just taken to the shopify store?
@faisalmaroof5098
@faisalmaroof5098 Год назад
Great video. Learned a lot from this tutorial. Would it be possible to make a video on how to integrate payments like stripe to framer?
@BuildwithOmar
@BuildwithOmar Год назад
Coming Soon!
@Rodrigueznjr
@Rodrigueznjr Год назад
​@@BuildwithOmar Hi, is possible intégrate shipping car and the payments?
@kesman9381
@kesman9381 11 месяцев назад
Is it possible to have multiple (sub) filters in each other? For example in this video, Men -> T-Shirts -> Jeans -> Hats -> Size - Color. Looking forward for your response!
@Sma-v4y
@Sma-v4y Год назад
but how much will cost the hosting of this e-magazine? Great tutorial and I am currently searching can Framer help me with my work.
@sanskaragarwal7651
@sanskaragarwal7651 3 месяца назад
Hi Omar! Had a question - This website on phone lists all the products one below the other. Is there a way so that it only shows the first product and the other come on swiping it, like their carousel functionality? Amazing video btw!
@mgferrigno
@mgferrigno 8 месяцев назад
Great info. great tutorial. product attributes like size or color? any thought
@BuildwithOmar
@BuildwithOmar 8 месяцев назад
Happy it helped! Yes there is custom field for color and for size I guess use text or number,-but if you want a color/size to switch the product preview I think you need to use 2 CMS's embedded inside each other. I'll try to find out soon.
@james.kaloki
@james.kaloki 9 месяцев назад
fantastic video what about search
@olenakitsak37
@olenakitsak37 9 месяцев назад
Thank you so much!
@64-bit63
@64-bit63 5 месяцев назад
great tutorial
@Seyfettin0
@Seyfettin0 Год назад
Thank you very much 👏
@kujo2662
@kujo2662 5 месяцев назад
How do i Link payment system to this site we created, show us how to integrate the payment system, please!
@amaycieng_
@amaycieng_ Год назад
Thank you for this
@tfdesign4072
@tfdesign4072 Год назад
Amazing content bro!
@mr.chinaski2613
@mr.chinaski2613 Год назад
Awesome content!
@devmoudgill2903
@devmoudgill2903 Год назад
Hey, mate quick question how would I make a cart if I had to ever. Is there any plugins or any way of making it in framer?
@drdistic
@drdistic Год назад
How can we add shipping methods and checkout and payment methods etc. Is there something like woocommerce in framer??
@DesignDen673
@DesignDen673 Год назад
Great tutorial. Thanks so much. The screen moves and zooms too much. Makes one giddy.
@BuildwithOmar
@BuildwithOmar Год назад
Haha is that a good thing or bad thing?
@DesignDen673
@DesignDen673 Год назад
@@BuildwithOmar Please move the screens slowly. have to watch the video at .75x to stop my head from spinning :))
@BuildwithOmar
@BuildwithOmar Год назад
@@DesignDen673 will keep that in mind thanks 🙏🏽
@accountdua9375
@accountdua9375 Год назад
The dizzyness is real.
@raulcerda7652
@raulcerda7652 11 месяцев назад
what do you use for recording the videos? the zoom ins and outs and the screen without the iOS top bar looks cool
@considercaption
@considercaption 23 дня назад
great, but it doesn't go over problems with e-commerce problems like checkout and inventory management.
@SaadAlShiekhAli-sg4dl
@SaadAlShiekhAli-sg4dl 3 месяца назад
mashallah< loved so much
@madhavanand756
@madhavanand756 Год назад
How do you record the tutorials, these look soooo good. What is the application you are using ?
@utkarshkhandelwal3292
@utkarshkhandelwal3292 Год назад
please sir 1 video on how to add payment in this ,, pleaseeee
@khalilbenaoumeur4234
@khalilbenaoumeur4234 Год назад
thanks for the video, I was looking for this kind of videos, however, I have a question about how to make the horizontal scroll effect on the product section in the home page, like I want the products in one line and have an arrow on the right and the left sides
@thesneakypeeker1982
@thesneakypeeker1982 7 месяцев назад
Can I add multiple variations of a single product ? And can I add a dropdown menu for the quantity of items added to the cart?
@Zaindkir
@Zaindkir 3 месяца назад
Very very good video
@kujo2662
@kujo2662 6 месяцев назад
Hey Omar, loved the video, although how can I wrap the product cards for mobile version as i want to slide to see new product cards.
@BuildwithOmar
@BuildwithOmar 6 месяцев назад
You would have to create a mobile variant. When you say slide as in slide left right? over scroll?
@kujo2662
@kujo2662 6 месяцев назад
@@BuildwithOmar YESSSS! like i want to show product cards when i swipe left to right on mobile devices. So it don't show elongated version of images as it gets too big and scrolly for users.
@kujo2662
@kujo2662 6 месяцев назад
Thanks for such quick reply.@@BuildwithOmar
@kujo2662
@kujo2662 6 месяцев назад
Also, i have multiple category of different items, let's say shirts, pants, trousers for men, women, kids. how would i create a "CMS shop" for all of them ? @@BuildwithOmar
@bhorie6926
@bhorie6926 Год назад
Amazing videos Omar, just one question when working on these features like the CMS part, do you need to be on the paid plan on framer, or this is available on the free plan as well?
@BuildwithOmar
@BuildwithOmar Год назад
Thanks buddy! Don’t need to pay for the features in this video
@QuentinPersegol
@QuentinPersegol 5 месяцев назад
Thank you for all ! The only issue that I see is that you can use this tutorial to sell 'one size and on one quantity' product, so I really hope that framer is going to move in the ecommerce direction.. because it's pretty limited for now. Please let me know if anyone have any suggestion/solution for 'quantity' and 'size' issue.
@teviall
@teviall Год назад
Hi, very cool video, learned a lot of useful things for myself. It also looks cool. What do you use to capture the screen so it's that smooth and big arrow?
@BuildwithOmar
@BuildwithOmar Год назад
Screen.studio - Link in the description!
@aryan.thecreator
@aryan.thecreator Год назад
Can u make a checkout process video?
@officiallycyph
@officiallycyph 11 месяцев назад
Great tutorial… Quick question,if I were to link the second product card to the second CMS content in that collection, how would I go about it? Because, in as much as the 2nd Product card reflects the second CMS content, when clicked on takes the user to the 1st CMS content..
@BuildwithOmar
@BuildwithOmar 11 месяцев назад
I’m not sure how you’ve set yours up, but when using a CMS collection in your layer with a card component inside. it auto creates all the variations of your card component with based on each CMS item that exists.
@DanielMeszarosProd
@DanielMeszarosProd Год назад
great video! is it possible to create a fillable form section in the store page, where customers can write their notes regarding the purchase, or is it best to use Paperform for form based ecom sites?
@BuildwithOmar
@BuildwithOmar Год назад
Yes but you need to use an integrated component available in their library or use a tool like getmagicform.Com
@demonsrun3010
@demonsrun3010 Год назад
thanks for your video. I really love Framer but I'm confused about is Framer really work like a real website? and any thing else like performence, SEO, GG ads...
@magicperfume3897
@magicperfume3897 Год назад
Thank you for this tutorial! And how do you add a gateway payment? Would using a Stripe payment link be the best option?
@BuildwithOmar
@BuildwithOmar Год назад
Yep exactly (link externally)! Although there is a way to add code overrides to integrate payment gateways like stripe directly on a pop up, embed/. We did this with Lemon Squeezy on this site Radbali.com.
@eudesjonathas2051
@eudesjonathas2051 5 месяцев назад
excellent
@FahadKiani1
@FahadKiani1 Год назад
can we have an "add to cart" functionality?
@josepdevillaret
@josepdevillaret 7 месяцев назад
Little question Omar. I am making an e-commerce for a business and i am currently using your CMS method in order to manage the catalogue. If i add for example a stripe checkout method, will the price change depending on the product that the buyer persona chooses in the framer page? Thanks in advance
@abahvictor5130
@abahvictor5130 3 месяца назад
Is it possible to have an add to cart feature to this site?
@sale7680
@sale7680 2 месяца назад
Why in all cms fils have a contact with each other If u resize image in one of them it will update in all of them ?! My question about design?! And image size
@FredrikDammen
@FredrikDammen Год назад
Amazing! One question, i cant seem to get the product link on the image to work when I'm in the store page. It works fine on the home page. Any idea why?
@BuildwithOmar
@BuildwithOmar Год назад
Must be a layer thing? Try Z indexing your image higher.
@jeeiee_com
@jeeiee_com Год назад
I have a great understanding of what is possible with Framer. The only issue is that, based on this video, it seems quite challenging to implement it for 50k products with multiple categories. If you could create a video on bulk import, I would greatly appreciate it. Currently, we are using WordPress but are considering switching to Framer if it has all the features we need.
@numanxaziz
@numanxaziz Год назад
not sure about the statement 100%, however you can import the csv file that has your products data
@brunoescoto9630
@brunoescoto9630 Год назад
50k products? da fuk are you selling?
@chaya973
@chaya973 Год назад
Can you finish this up and set up a payment? I haven't seen anything anywhere about how to connect payment on Framer.
@bricii5077
@bricii5077 Год назад
Amazing 🔥
@BuildwithOmar
@BuildwithOmar Год назад
thanks dude
@abdullahafzal7665
@abdullahafzal7665 4 месяца назад
What software you use for this type of zoom effect and to record screen recording video
@aiyoh23
@aiyoh23 2 месяца назад
Hi Omar, I know this video has been some time. I would like to ask if this method can be integrated with Shopify. Thanks!
@BuildwithOmar
@BuildwithOmar 2 месяца назад
There is a few custom plugin components, I’ll probably make a video soon!
@viceduv
@viceduv 7 месяцев назад
Can i build it using the mini Framer plan ?
@blackboostIT
@blackboostIT Год назад
Hi, My biggest doubt here is, Can we create a fully customized website like woocomerce ? With cart, checkout, my account , login and regsiter pages, Also is it possible to have orders captured and manage stock etc ?
@ClimbHighWithAI
@ClimbHighWithAI 9 месяцев назад
Hey, Great video, but about the payment processing, you need to put a link for each price for each product? lets say 1 product is 5$ and the second one is 15$, do i need to put a different processing link in order to get paid? is there any way to automate that? so that it will tell the customer what his buying and that the prices will be correlated with the product price and details? and is there any way to add a cart? so that customer can buy multipole products at once? because if i need to add a new payment link for each product with a specific price, then how can i charge clients for differnt prices?
@BuildwithOmar
@BuildwithOmar 9 месяцев назад
As mentioned in the video, this approach does have limitations, so yes you will need to create an external checkout system on a platform like LemonSqueezy, Stripe, Gumroad or Shopify, and link the checkout process outside your site or try within an . Unfortunately there wont be a checkout process unless you take them to another site (maybe a subdomain) from the main CTAs.
@sale7680
@sale7680 2 месяца назад
Really amazing 🩵
Далее
Why I switched to Framer from Webflow
12:17
Просмотров 164 тыс.
Why Beautiful Websites Don’t Convert
12:57
Просмотров 166 тыс.
Women’s Goalkeepers + Men’s 🤯🧤
00:20
Просмотров 1,4 млн
НЮША УСПОКОИЛА КОТЯТ#cat
00:43
Просмотров 916 тыс.
Top 5 tools for Framer
6:34
Просмотров 7 тыс.
How to Code a Figma Design in 2 Hours using HTML CSS
2:05:35
world's shortest Framer course
6:33
Просмотров 50 тыс.
I redesigned YOUR websites
20:44
Просмотров 30 тыс.
I tried every website builder. This is the BEST
19:31
Просмотров 128 тыс.