We can do this by setting the Product Link option to /product.html?product=, so the parameter is product. Now the only thing left to do is make every product in the list link to its product page. To achieve this layout, in the Product List options we'll switch the Layout to Cards, and also remove the excerpt by switching Show Excerpt off. Now let's customize the way our Product List looks. If your store doesn't have any products yet, Product List will show fake (mock) data so you can create your design. The Product List shows all products in your store, and gives you a lot of customization options. We also add a Heading and give it the text 'Products'.

Building index.htmlįor the index, we drop a Product List from the Component Panel into the Column component. We can now proceed with adding ecommerce components to each of the pages. Right click the Container, and also choose Copy to > Multiple, but this time 'Link copies' should be off.Be sure to enable the 'Link copies' switch so that the Navbars are linked to each other and are edited in sync. Right click the Navbar and choose Copy to > Multiple, and copy it to the other pages.Let's save ourselves some time, and copy this structure to all other pages:

Then, in index.html, we will create the following structure by dragging and dropping a Navbar and a 1 Row 1 Column into the Body. cancel.html - this is where users will be redirected to if a payment error arises.success.html - this is where users will be redirected to after they complete their purchase.

cart.html - this page will contain our Shopping Cart.

product.html - this page will contain a dynamic Product component.

index.html - this page will contain a Product List.

Inside it, create five empty pages (index.html will exist by default): Creating pagesĬreate a new Blank design in Bootstrap Studio. Connecting ReflowĪfter you have an account, connect Reflow to your design and choose the store you just created from the dropdown. You will have to configure a payment method (opens new window) in order for the Shopping Cart to work.

Bootstrap studio examples