The latest articles on DEV Community by Bootstrap Studio (@bootstrapstudio). https://dev.to/bootstrapstudio https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F763258%2Ffa10a8b0-fe7f-431c-97ad-f34c3b914b5e.png https://dev.to/bootstrapstudio en Bootstrap Studio Sat, 27 Nov 2021 15:25:12 +0000 https://dev.to/bootstrapstudio/building-full-ecommerce-stores-in-bootstrap-studio-58-3m5f https://dev.to/bootstrapstudio/building-full-ecommerce-stores-in-bootstrap-studio-58-3m5f <p><a href="https://bootstrapstudio.io" rel="noopener noreferrer">Bootstrap Studio</a> 5.8 was released earlier this month, and with it came our brand new set of Ecommerce components which you can use to build fully featured online stores.</p> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/8YgF2D7F0Ps"> </iframe> </p> <p>You can list products, let users maintain a shopping cart, enter payment details and checkout. The backend is handled automatically and payments are deposited directly to your PayPal and/or Stripe accounts with zero fees.</p> <p>This is all done with a handful of components that work great together and can be added to any Bootstrap Studio project.</p> <h2> Product </h2> <p>The Product component renders a product page with a name, media gallery, description and an Add to Cart button. All of these can be disabled individually from the settings and can be customized with CSS.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F39d5vj0p6ft0mt8g64qe.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F39d5vj0p6ft0mt8g64qe.png" alt="Product Page"></a></p> <h2> Product List </h2> <p>The Product List component displays a collection of products in a list with optional pagination. You can switch it between list and cards, apply category filters and change the ordering.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdg3bwv5e3a2njir74tu0.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdg3bwv5e3a2njir74tu0.png" alt="Product List"></a></p> <h2> Add to Cart </h2> <p>The Add to Cart component displays a button which lets users add a specific product to their shopping cart. Use it when building custom product pages but wish to leave the add to cart functionality intact.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx6nilul6w4nx4oaoj16.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx6nilul6w4nx4oaoj16.png" alt="Add to Cart"></a></p> <h2> Shopping Cart </h2> <p>The Shopping Cart is where the magic happens. It generates a fully functional shopping cart that lets users edit products and checkout. Payments are transferred to the linked PayPal/Stripe account with zero fees.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wihftfkc01o2fyl1il9.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4wihftfkc01o2fyl1il9.png" alt="Shopping Cart"></a></p> <h2> More is Coming Soon </h2> <p>Here is what we have planned for making Ecommerce even better:</p> <ul> <li>Coupon codes</li> <li>Digital Products</li> <li>Webhooks</li> <li>Translations</li> </ul> <p>We are looking forward to see what you build!</p> webdev tutorial html css