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.
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?
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
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
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.
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.
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.
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
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 !
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
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!
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.
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!
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?
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 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.
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
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.
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.
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?
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.
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
@@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.
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
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!
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!
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?
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..
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.
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?
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?
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.
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
What about search filters? If for example I have a real estate agent client and I need to set a custom property search filter, can you teach me how to do this?
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...
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?
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
Finally a decent CMS tutorial - I need to build a project site, this makes sense now - Thank you
Happy to help!
one of the best cms tutorials
Sheeesshh! This is the exact tutorial that I'm looking for. Love you buddy!
Subscribed because this is one of the most advanced stuff I've seen done with framer.
Thanks brother!
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?
the only perfect framer cms video.
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.
Thanks buddy! Yes it’s just the external link, or you can add their native integrations like Gumroad or lemonsqueezy!
@@BuildwithOmar it would be great if you can cover this in a video
the fees for the native integrations are ridiculous. @@BuildwithOmar
@@BuildwithOmar Would be awesome if you cover this in a video!
I was looking for framer ecom tutorial and omg you really did it. This is 🔥
Thanks dude!
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?
You will have to connect Framercommerce.com, this is the only way. A bit pricey though!
Great tutorial! I followed it minute by minute. Worked perfectly. Thank you for taking them time to walk us through this process!
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
Wow, this is fantastic! Ran Segall has built the best community on Webflow, and you will be the man for Framer. :)
Haha I hope so buddy 🧡🙏🏽
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
Totally agree, got the same feedback before. Will make sure I do this moving forwards!
Yeah great content but I'm literally dizzy.
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.
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.
Thanks Omar bro!
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
bro thanks for this tutoriual you just saved client without knowing it :)
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.
Thanks for sub and feedback! Appreciate you!
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
Thanks 🙏🏽! Still planning but nothing out yet!
@@BuildwithOmar Thanks a ton, I learned a lot from this video. Will be awaiting the next one!
@@BuildwithOmar Awesomely put together ! Could this in any way be connected to shopify ? or even exported & imported to Shopify as a theme ? Thanks !
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.
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 !
We are in the process of figuring this part out!
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
what screen recording software do you use? I love it
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!
Like a review in the product page? There are some decent preset components framer offers.
Could you make another video about the payment method, just like you proposed 🙏😊?
Yes please, we need payment method. show us omar!!!
Top top explanation! deserves all the likes and the subscriptions
Best video of the week, Helped me so much with my blog/Review site!
Happy to help!
Can you create something with checkout process. I love to see those~
Its rare to find videos in this quality omar keep it up :) may allah bless you
Thanks buddy! More coming 🙌
Is there a way to add customer review section and checkout page with customized functions, thank you!!
Nice work! Are you able to do a tutorial on building a dashboard/web app on Framer?
Coming soon, with a template for knowledge base for SaaS
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!
Thank you so much, you saved us a fortune, keep up!
Happy to help bro!
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.
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!
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?
Thanks, Omar!
Happy to help!
you just blew my mind, thank you so much 🤯
Thanks buddy 🙌 More coming!
Man, thank you very much for the video! This is going to help me a great deal!
Glad you found value, Thanks man!
This is awesome! Omar, thanks for sharing. Any plans to share how to design your Blog wit Framer CMS?
Thanks buddy, I’m hoping to do more soon!
Straight up FIRE!
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.
Thanks buddy. I address exactly that in this chapter: ruclips.net/video/ccRbK-uucSk/видео.html
@@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.
Great video. I was looking into bigcommerce. Whats the benefit of using something like framer over bigcommerce?
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?
Wowwwww! Totally awesome video
Amazing video... I wanted to ask how to create the login and sign up section
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
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?
Coming Soon!
@@BuildwithOmar Hi, is possible intégrate shipping car and the payments?
Awesome content!
Very very good video
Great info. great tutorial. product attributes like size or color? any thought
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.
great tutorial. thank you. learned a ton
fantastic video
what about search
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.
How do you record the tutorials, these look soooo good. What is the application you are using ?
great tutorial
Amazing, Can you make a video on how to make a store for a one product?
I’ll try my best!
Amazing content bro!
*Based on a similar CMS, is it possible to create, for example, a wish list for a store?*
So helpful, thank you !
This was very good! thank you!
what do you use for recording the videos? the zoom ins and outs and the screen without the iOS top bar looks cool
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.
The dizzyness is real.
What an amazing tutorial! Thank you so much :D
Happy to help! 🙏🏽
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?
Yes but you need to use an integrated component available in their library or use a tool like getmagicform.Com
Thank you for this tutorial! And how do you add a gateway payment? Would using a Stripe payment link be the best option?
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.
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
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.
You would have to create a mobile variant. When you say slide as in slide left right? over scroll?
@@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.
Thanks for such quick reply.@@BuildwithOmar
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
Hey! Could you share resources on the pop up shopify payment gateway. Also what would it cost me?
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!
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!
Great tutorial. Thanks so much. The screen moves and zooms too much. Makes one giddy.
Haha is that a good thing or bad thing?
@@BuildwithOmar Please move the screens slowly. have to watch the video at .75x to stop my head from spinning :))
@@DesignDen673 will keep that in mind thanks 🙏🏽
Thank you so much!!
excellent
Thank you very much 👏
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?
Screen.studio - Link in the description!
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..
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.
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?
Thanks buddy! Don’t need to pay for the features in this video
Can u make a checkout process video?
Thank you for this
Shokran.
please sir 1 video on how to add payment in this ,, pleaseeee
great, but it doesn't go over problems with e-commerce problems like checkout and inventory management.
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?
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.
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?
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
How do i Link payment system to this site we created, show us how to integrate the payment system, please!
What about search filters? If for example I have a real estate agent client and I need to set a custom property search filter, can you teach me how to do this?
Amazing 🔥
thanks dude
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?
can we have an "add to cart" functionality?
How can we add shipping methods and checkout and payment methods etc. Is there something like woocommerce in framer??
i love this but bro i cant build a restaurant site on framer bc my menu has over 150 items...
Amazing
Thanks dude!
mashallah< loved so much
Is it possible to have an add to cart feature to this site?
Can i build it using the mini Framer plan ?
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...
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?
Must be a layer thing? Try Z indexing your image higher.
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
Can we add a few pictures for a product in CMS?