How to Set Up a Shopping Cart
Configuring a shopping cart for an online store
Watch this tutorial on how to set up a shopping cart
How to add a shopping cart in an online store
How you can use a shopping cart in an online store
Specific tips of working with a shopping cart
Shopping cart persistence, minimum order amount, and other parameters
Using the shopping cart, a buyer can select options of payment and delivery, fill in their contacts and other additional data.
In Tilda, you can use the shopping cart for selling a selection of goods from the Catalog, as well as a single product or service.
In Tilda, you can use the shopping cart for selling a selection of goods from the Catalog, as well as a single product or service.
For example, you can create an online store with products or promo pages for selling online courses with unique shopping carts for each product. With flexible settings of the shopping cart, you can build the most non-standard sales scenarios on the website.
Adding a shopping cart
To add a shopping cart to the project, go to the Block Library and click on the "Store" category. Select the ST100 "Shopping cart with an order form" block from the list.
How to test whether the shopping cart works
To test if the shopping cart is displayed on the website well, go to the preview and click on the shopping cart icon.
In the preview, the test product is already displayed in the shopping cart by default. This product does not exist in your project, it is used just to be displayed in the preview.
To test if the payment system or delivery service works, you need to publish the page with the shopping cart. On the published page, add a product to the shopping cart, fill in all fields, and submit an order.
If you have just one payment system or product delivery service connected to the shopping cart, the integration title will not be displayed in the shopping cart.
The integrations' titles will be displayed if more than one service is connected to the shopping cart.
The integrations' titles will be displayed if more than one service is connected to the shopping cart.
Usage scenarios for the shopping cart
A shopping cart can be added both to a separate project page and to the whole project.
Placing the shopping cart in the whole project. For multi-page websites, place the shopping cart in the header or footer so it's always visible to customers.
Placing the shopping cart in the whole project. For multi-page websites, place the shopping cart in the header or footer so it's always visible to customers.
Header and footer settings. For detailed information, read the guide.
Placing the shopping cart on a specific page. If you don't work with a product catalog and sell individual items, or you need different shopping cart settings on different pages, you can add a shopping cart block to each page.
For the shopping carts' settings not to overlap when using this option, you need to select the Don't save product in a Cart option when setting up the shopping cart.
To do this, go to Settings, open the More settings tab, and select the Don't save product in a Cart checkbox. When closing the shopping cart, the product will be deleted. If the buyer jumps to another page, the previous shopping cart settings will not be kept in the shopping cart on the other page.
Placing the shopping cart in the header and footer of the online store. In Tilda, you can separately add the header and footer only to product-related pages in the online store. To do this, product cards must open as pages. Detailed guide for working with cards is available at this link.
How the shopping cart works on the page
The shopping cart will only appear on the page after the buyer adds one product at least to it. If no products have been added, the shopping cart icon will not be displayed.
If a shopping cart is added to the header, footer, or page of the website, its icon will always be displayed in the preview. Clicking on the icon will show you a sample product. This shows how the shopping cart works.
Don't worry, neither the icon nor the product will be displayed at once in the published version of the website.
Don't worry, neither the icon nor the product will be displayed at once in the published version of the website.
The shopping cart appears once the "Buy" button is clicked.
When a buyer adds an item to the shopping cart, a pop-up window with the order form appears on the screen.
If you disable the option to show the shopping cart after selecting an item, the item will be added to the shopping cart without completing the order form. The buyer will be able to complete the form later when they go to the shopping cart.
If you disable the option to show the shopping cart after selecting an item, the item will be added to the shopping cart without completing the order form. The buyer will be able to complete the form later when they go to the shopping cart.
In the shopping cart settings, you can also configure the default behavior of deleting products from the shopping cart when it is closed. For more information on why you need this and how to configure it, read the guide below.
Configuring how the shopping cart should open
General settings of the shopping cart and payment
Click on a tag to jump directly to the description of the setting you need in the guide.
Shopping cart persistence
If a website visitor adds an item to the shopping cart on one page, then opens another page or closes the website, the item will be kept in the shopping cart for 30 days. You can change this amount of time in the block settings. If it is set to 0, the product will be deleted from the shopping cart as soon as the shopping cart popup is closed.
Configuring how long an item should be kept in the shopping cart
Connecting payment systems to the shopping cart
By default, there are no payment options in the shopping cart, you need to connect them separately via the website settings. You can connect one and more payment systems. Go to the Site Settings → Payment Systems and select what you need from the list. Detailed information on how to work with payment systems is described here.
The page for configuring the payment system and currency
Saving contact data
For the buyers not to have to fill in their contact data when they repeat purchases from your website, enable the option to save contact information.
To do this, open the ST100 block → Content → Input fields and add a new Checkbox: Save contact data for the next purchase field.
To do this, open the ST100 block → Content → Input fields and add a new Checkbox: Save contact data for the next purchase field.
Enabling the option to save the buyer's contact data
The data in the shopping cart is saved in the buyer's browser, so there's no need to include it in the Privacy Policy on your website. If the buyer wants to delete the data, all they need to do is just to clear their browser cache.
All the data transferred is encrypted and protected from being intercepted by third parties.
All the data transferred is encrypted and protected from being intercepted by third parties.
Minimum order amount
If you want the orders to be submitted starting from a specific amount, such as $10, you can specify the minimum order amount.
If a buyer selects a product for less amount, it is added to the shopping cart but the "Checkout" button will be inactive, and the buyer will see the text hint in the shopping cart.
If a buyer selects a product for less amount, it is added to the shopping cart but the "Checkout" button will be inactive, and the buyer will see the text hint in the shopping cart.
The order forms
Buyers use the order form for submitting their data on your website. To configure it, click on the Content in the ST100 block. Then:
— Add and configure fields for buyers to fill in, assign their titles;
— Select what fields are required;
— Connect data capture services to receive the leads from the form.
You can select the style for the shopping cart and fields in the block settings.
— Add and configure fields for buyers to fill in, assign their titles;
— Select what fields are required;
— Connect data capture services to receive the leads from the form.
You can select the style for the shopping cart and fields in the block settings.
An order form for an online store
Data capture services
By default, the form data is saved in the Leads section for 30 days. You can change this period up to 90 days in the Site Settings → Forms →General form settings.
You can receive leads to email, Google Sheets, or send them to integrated services such as MailChimp, GetResponse, UniSender. You can connect these in the Site Settings → Forms section
Read more in the guide to Data capture services.
You can receive leads to email, Google Sheets, or send them to integrated services such as MailChimp, GetResponse, UniSender. You can connect these in the Site Settings → Forms section
Read more in the guide to Data capture services.
An example of connecting data capture services in the shopping cart
Delivery variants
You can set delivery in the shopping cart using the connected delivery services and built-in "Delivery variants" field. This guide describes how to add delivery services to the project and connect them to the shopping cart.
Below, the Delivery variants field option with no connecting delivery services is described.
To display the delivery variants when placing an order, click on the Content in the ST100 Shopping cart block. Add the Delivery variants field type and, in the Variants field, list the delivery options, each option on a separate line.
If delivery is not free, put the "=" sign and specify the delivery price with no currency:
Below, the Delivery variants field option with no connecting delivery services is described.
To display the delivery variants when placing an order, click on the Content in the ST100 Shopping cart block. Add the Delivery variants field type and, in the Variants field, list the delivery options, each option on a separate line.
If delivery is not free, put the "=" sign and specify the delivery price with no currency:
Free Local Pickup
Courier Delivery $20 =20
Courier Delivery $20 =20
Success page for the shopping cart
If online payments are not provided on the website and the shopping cart is used just to receive leads, you can configure the success page directly in it. Click on the Content in the ST100 block and go to the More tab and then, in the Success page URL field, specify the link to the page you need.
Configuring the success page via the ST100 Shopping cart
If you have the payment system connected to the project, you need to configure the success page in the payment system's settings. To do this, go to the Site Settings → Payments Systems, select the service from the list and specify the success page URL in its settings.
Как начать принимать платежи на сайте за товары или услуги.
Инструкция по размещению товаров на страницу интернет-магазина.
Инструкция по созданию многостраничного интернет-магазина.
Сценарий продажи товара без выбора дополнительных параметров.
Как сделать, чтобы покупатель мог выбрать параметр: цвет, размер, время или другой параметр.
Как передать данные для онлайн-кассы Cloudpayments, Робокасса, ЮKassa
Настройка продажи единичного товара
С Тильдой интегрированы востребованные платежные системы. Можно подключить одну или несколько.
Вы можете предложить варианты доставки и задать для них разные цены.
Как добавить сопутствующие опции, которые покупатель может задать перед оформлением заказа
Как сделать так, чтобы покупатель на сайте только заказал товар, а оплатил потом.
