How to Set Up a Shopping Cart
Watch this tutorial on how to set up a shopping cart, or read the guide below.
You can use shopping cart for selling a selection of goods or a single product or service (for example, you have one offer and need a quantity selector on your product page).
With Tilda, you can create a fully-fledged online store and assign a payment system to it. You will find the blocks you need in the "Store" category.
Let's see how the shopping cart works.
Let's see how the shopping cart works.
1. Add an ST100 block from the "Store" category to your page
If there are several pages on your website and you want the shopping cart to be displayed on all of them, add the shopping cart to the header or footer of your website. Once it is done, the shopping cart will appear on every page of your website.
Wondering how to do it? Here's how to create a header and footer →
Wondering how to do it? Here's how to create a header and footer →
2. Add a block featuring Product cards
A purchase event can be created in any block. If you are using a block from a different category (not the "Store" category), add the link:
#order:Product name =1000
where "Product name" is the name of the product and "1000" is the price of one unit.
#order:Product name =1000
where "Product name" is the name of the product and "1000" is the price of one unit.
If you choose not to use a block from the "Store" category, a product image will not appear in the shopping cart. To add an image, add the link:
#order:Product name =1000:::image=URL
where the URL is the web address of the image. You can use the URL of the image uploaded to Tilda.
You can use the URL of the image uploaded to any image hosting service.
Now you can publish the page, and your store will be ready to go: your customers will be able to add products to the shopping cart and complete purchases. Notifications will be saved in your account.
When a customer adds a product to the shopping cart, a shopping cart icon appears on the page. The icon remains hidden when the shopping cart is empty.
By default, when a customer adds a product to the shopping cart, a pop-up with an order form appears on the page. You can disable the pop-up in the Settings panel of the ST100 block. In this case, when a customer clicks "Buy now", the product will be added to the shopping cart, but no pop-up will appear on the page.
Here is what else you can do:
✓ Set a currency format for your store →
✓ Connect a payment system to accept online payments →
✓ Connect data capture services to receive form submissions via email, Google Drive, Telegram, etc. →
✓ Choose how long an item should be kept in the shopping cart →
✓ Set a minimum order amount →
✓ Add delivery options →
✓ Set up an order form: customize your form and add new fields →
✓ Customize form error messages →
✓ Set a currency format for your store →
✓ Connect a payment system to accept online payments →
✓ Connect data capture services to receive form submissions via email, Google Drive, Telegram, etc. →
✓ Choose how long an item should be kept in the shopping cart →
✓ Set a minimum order amount →
✓ Add delivery options →
✓ Set up an order form: customize your form and add new fields →
✓ Customize form error messages →
Currency
You can change the currency of your store in the Site Settings → Payment Systems → Currency Format. The selected currency format will be applied to the prices in the shopping cart and product cards by default.
Payment Systems
You can connect payment systems to your website in the Site Settings → Payment Systems. Tilda supports multiple payment systems: CloudPayments, PayPal, Stripe, 2Checkout, WayForPay, and more.
Shopping Cart Persistence
If a website visitor adds an item to the shopping cart, then opens another page or even leaves the website, the item stays in the shopping cart for 30 days.
You can specify the amount of time an item stays in the shopping cart in the block settings. If you set it to 0, the shopping cart will be cleared as soon as the website visitor leaves the page.
You can specify the amount of time an item stays in the shopping cart in the block settings. If you set it to 0, the shopping cart will be cleared as soon as the website visitor leaves the page.
How to Set a Minimum Order Amount
You can prevent your customers from paying for an order of less than a certain amount by setting the minimum order amount in the Block Settings.
After that, if a customer tries to place an order of less than the minimum order amount, the shopping cart's "Checkout" button will become inactive, and the customer will see the minimum order amount hint in the shopping cart.
After that, if a customer tries to place an order of less than the minimum order amount, the shopping cart's "Checkout" button will become inactive, and the customer will see the minimum order amount hint in the shopping cart.
Delivery Options
You can set delivery options in the Content panel of the shopping cart block (ST100). Add an input field and set its type to "Delivery variants," then enumerate the delivery variants, each variant on a separate line. If shipping is not free, type "=" and specify the shipping price (numbers only).
Example:
Free Local Pickup
Courier Delivery $20 =20
Example:
Free Local Pickup
Courier Delivery $20 =20
Order Form Customization
When a customer opens the shopping cart, an order form appears. You can customize the order form in the Content and Settings panels of the shopping cart block (ST100). Add new fields, change input titles and subtitles, customize the form, and connect data capture services to receive your customers' orders.
How to Create a Thank You (Success) Page for the Shopping Cart
For the thank you/success page to be displayed after online payment or checkout without payment, you need to specify the thank you page's address in the connected payment system' settings in the Site Settings.
If you have not connected any payment system yet and use the shopping cart to receive orders without online payments, you need to specify the success page's address in the Settings panel of the shopping cart block (ST100) → More → URL Success Page.
Saving contact data in the browser for the next purchase
If customers make regular purchases from your online store, it's convenient to add the option to save contact information. To add that option, go to ST100 Content → Fields and add new input Checkbox: Save data information in browser for next purchase.
At the moment, the option is only available to the testers of new Tilda features. You can participate in the testing by checking the "Opt-in to become a beta-tester and try new features before they are released" box in your account profile.
If your visitor has ticked the box, the data in the cart is saved in the visitor browser. Data is not stored on the server. Visitor can delete it after browser cache clearing.
The data is encrypted with a secret key that is stored on the server, which prevents third parties from intercepting it. All data remains with the visitor side, so there's no need to describe it in your Privacy Policy.
The data is encrypted with a secret key that is stored on the server, which prevents third parties from intercepting it. All data remains with the visitor side, so there's no need to describe it in your Privacy Policy.
System Field and Error Message Language
If you have not set up custom error messages in the Site Settings → Forms → General forms settings, a website visitor will see error messages in the default language of their browser. If the browser's language is Spanish, error messages will be displayed in Spanish. Otherwise, error messages will be displayed in English.
If you have provided the custom text for error messages in the Site Settings → Forms → General forms settings, the phone and email input fields' hints and error messages will contain the custom text.
If you have provided the custom text for error messages in the Site Settings → Forms → General forms settings, the phone and email input fields' hints and error messages will contain the custom text.
How to create an online store or accept payments for single goods and services on Tilda website builder
Using Product Catalog or adding new products manually using blocks from the "Store" category in Tilda Block Library.
This is a step-by-step guide to creating an online store selling different categories of products
A guide to selling single products or services in online stores created on Tilda website builder
Allowing customers to order online and pay later in online stores created on Tilda website builder
Adding several variants of the same product to your online store on Tilda website builder
Setting up gift packaging or other extra services in the online store order on Tilda.
