Build an E-com Store with Framer CMS

[@elysiumcore]

Finally a decent CMS tutorial - I need to build a project site, this makes sense now - Thank you

[@BuildwithOmar]

Happy to help!

[@gouthamdhanabalan5388]

one of the best cms tutorials

[@akbarbadsha25]

Wow, this is fantastic! Ran Segall has built the best community on Webflow, and you will be the man for Framer. :)

[@BuildwithOmar]

Haha I hope so buddy 🧡🙏🏽

[@raunakhajela]

I was looking for framer ecom tutorial and omg you really did it. This is 🔥

[@BuildwithOmar]

Thanks dude!

[@USAIDFAHAD]

the only perfect framer cms video.

[@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]

Thanks buddy! Yes it’s just the external link, or you can add their native integrations like Gumroad or lemonsqueezy!

[@chaitanyabidkar]

@@BuildwithOmar it would be great if you can cover this in a video

[@makerbiz]

the fees for the native integrations are ridiculous. @@BuildwithOmar

[@MICloops]

@@BuildwithOmar Would be awesome if you cover this in a video!

[@eklipsia]

@@chaitanyabidkar omg yes please Omar do it!

[@johnpagley]

Great tutorial! I followed it minute by minute. Worked perfectly. Thank you for taking them time to walk us through this process!

[@andraeugene6435]

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

[@melanie.7]

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?

[@lorenzosarmiento-eb1nx]

Sheeesshh! This is the exact tutorial that I'm looking for. Love you buddy!

[@omotayotaiwo4375]

Subscribed because this is one of the most advanced stuff I've seen done with framer.

[@BuildwithOmar]

Thanks brother!

[@alexanderdiwa]

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]

You will have to connect Framercommerce.com, this is the only way. A bit pricey though!

[@otaviocampos6734]

Is there a way to add customer review section and checkout page with customized functions, thank you!!

[@Harshkumar-i6y]

So helpful. Thanks so much Omar.

[@mohammedaimannshaik9487]

what screen recording software do you use? I love it

[@impierrefrancois]

Super helpful, thanks Omar!

[@eddiegustafsson1533]

Best video of the week, Helped me so much with my blog/Review site!

[@BuildwithOmar]

Happy to help!

[@CarlosHernandez-dn5zh]

Top top explanation! deserves all the likes and the subscriptions

[@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]

Thanks for sub and feedback! Appreciate you!

[@thevisuallaboratory]

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

[@mdabdullahalnoman7620]

Thanks Omar bro!

[@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?

[@ksiddharth14]

Thank you so much, you saved us a fortune, keep up!

[@BuildwithOmar]

Happy to help bro!

[@devmoudgill2903]

bro thanks for this tutoriual you just saved client without knowing it :)

[@julianTrichardson]

Straight up FIRE!

[@Amo-p2z]

Its rare to find videos in this quality omar keep it up :) may allah bless you

[@BuildwithOmar]

Thanks buddy! More coming 🙌

[@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]

Totally agree, got the same feedback before. Will make sure I do this moving forwards!

[@jeffbeaudoin4544]

Yeah great content but I'm literally dizzy.

[@AnimeRick86]

Man, thank you very much for the video! This is going to help me a great deal!

[@BuildwithOmar]

Glad you found value, Thanks man!

[@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]

Thanks 🙏🏽! Still planning but nothing out yet!

[@siva_nesh_24]

​@@BuildwithOmar Thanks a ton, I learned a lot from this video. Will be awaiting the next one!

[@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 !

[@tadeu.garcia]

you just blew my mind, thank you so much 🤯

[@BuildwithOmar]

Thanks buddy 🙌 More coming!

[@mahmoudabdullah6647]

Thanks, Omar!

[@BuildwithOmar]

Happy to help!

[@patriciataylor1925]

Wowwwww! Totally awesome video

[@weareojo]

Could you make another video about the payment method, just like you proposed 🙏😊?

[@kujo2662]

Yes please, we need payment method. show us omar!!!

[@des7638]

great tutorial. thank you. learned a ton

[@shilhh3688]

So helpful, thank you !

[@amaycieng_]

Can you create something with checkout process. I love to see those~

[@mr.chinaski2613]

Awesome content!

[@Adullam-TheSecretplace]

This was very good! thank you!

[@techguy8305]

This is awesome! Omar, thanks for sharing. Any plans to share how to design your Blog wit Framer CMS?

[@BuildwithOmar]

Thanks buddy, I’m hoping to do more soon!

[@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]

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.

[@gauravgiri6081]

Well it's been one year and I tell you are wrong my friend...

[@tfdesign4072]

Amazing content bro!

[@64-bit63]

great tutorial

[@manishmalli13]

What an amazing tutorial! Thank you so much :D

[@BuildwithOmar]

Happy to help! 🙏🏽

[@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]

Like a review in the product page? There are some decent preset components framer offers.

[@Zaindkir]

Very very good video

[@zeydanwar]

Nice work! Are you able to do a tutorial on building a dashboard/web app on Framer?

[@BuildwithOmar]

Coming soon, with a template for knowledge base for SaaS

[@yessaelparra1065]

Thank you so much!!

[@shahilgupta1690]

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.

[@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.

[@Hamzahharoon]

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!

[@theverticalmoviess]

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]

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!

[@MCbyGracjan]

*Based on a similar CMS, is it possible to create, for example, a wish list for a store?*

[@james.kaloki]

fantastic video what about search

[@dotuidesign]

The best!

[@mgferrigno]

Great info. great tutorial. product attributes like size or color? any thought

[@BuildwithOmar]

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.

[@rumiguho9640]

Amazing video... I wanted to ask how to create the login and sign up section

[@creatoratplay]

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?

[@raulcerda7652]

what do you use for recording the videos? the zoom ins and outs and the screen without the iOS top bar looks cool

[@stephenfahey-y7k]

Great video. I was looking into bigcommerce. Whats the benefit of using something like framer over bigcommerce?

[@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?

[@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]

We are in the process of figuring this part out!

[@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

[@drdistic]

How can we add shipping methods and checkout and payment methods etc. Is there something like woocommerce in framer??

[@amaycieng_]

Thank you for this

[@Seyfettin0]

Thank you very much 👏

[@kujo2662]

How do i Link payment system to this site we created, show us how to integrate the payment system, please!

[@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.

[@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

[@adityaagarwal2193]

Hey! Could you share resources on the pop up shopify payment gateway. Also what would it cost me?

[@abahvictor5130]

Is it possible to have an add to cart feature to this site?

[@kujo2662]

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]

You would have to create a mobile variant. When you say slide as in slide left right? over scroll?

[@kujo2662]

@@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]

Thanks for such quick reply.@@BuildwithOmar

[@kujo2662]

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

[@FahadKiani1]

can we have an "add to cart" functionality?

[@cozyalive]

Amazing, Can you make a video on how to make a store for a one product?

[@BuildwithOmar]

I’ll try my best!

[@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]

Thanks buddy. I address exactly that in this chapter: kzbin.info/www/bejne/mZS1k35jqtqWic0

[@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.

[@madhavanand756]

How do you record the tutorials, these look soooo good. What is the application you are using ?

[@David.Belley]

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?

[@sanskaragarwal7651]

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!

[@Shaaiene]

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?

[@viceduv]

Can i build it using the mini Framer plan ?

[@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]

Coming Soon!

[@Rodrigueznjr]

​@@BuildwithOmar Hi, is possible intégrate shipping car and the payments?

[@officiallycyph]

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]

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.

[@AbbasOmoloriMuhammad]

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

[@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]

Yes but you need to use an integrated component available in their library or use a tool like getmagicform.Com

[@Jonathasdesign]

excellent

[@aryan.thecreator]

Can u make a checkout process video?

[@itsabdullahafzal]

What software you use for this type of zoom effect and to record screen recording video

[@mishasound]

Can we add a few pictures for a product in CMS?

[@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]

Must be a layer thing? Try Z indexing your image higher.

[@Frieren-san]

Can this be hosted like a normal website?

[@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]

Screen.studio - Link in the description!

[@accountdua9375]

The dizzyness is real.

[@bricii5077]

Amazing 🔥

[@BuildwithOmar]

thanks dude

[@SendelStudio]

How can I add a shopping cart, a cart where all the products selected will appear to purchase all the products at once !

[@sdumo59]

can I know what you just built now is it a 1 cms collection or a 4 cms collection?

[@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]

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.

[@metadataerror]

i love this but bro i cant build a restaurant site on framer bc my menu has over 150 items...

[@sbeck9205]

How about product variants how would you go about doing that?

[@josepdevillaret]

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

[@ClimbHighWithAI]

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]

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.

[@TheTiko300]

Can we add a login functionality on Framer?

[@jeddanel]

How do you create a cart if user wants to buy several items?