How to add the Shopping Cart feature
In this article:
What is a Shopping Cart feature?
Note: The Shopping Cart feature is available for Pro and Pro Plus account owners only.
The Shopping cart feature is a great tool if you have multiple products in your store and want to give your customers the option to purchase several products at a time. This feature allows your customers to collect multiple items in your store and proceed to checkout with only having to complete one transaction.
You can use the Shopping Cart on your Sellfy store or add it to your own website.
What does the Shopping Cart look like?
This is what the Shopping Cart looks like for customers visiting your store.
How to add a Shopping Cart to your store
To add this feature to your Sellfy store, follow the instructions below:
- Log in to your Sellfy account
- Navigate to Store Settings → General settings
- Turn on the Toggle switch next to Shopping cart (the toggle color should switch to green)
- Click Save
Once enabled, it will be visible and easily accessible to your customers on your Sellfy store.
How to add a Shopping Cart to your website
Note: this feature is not compatible with other services, and can't be used on its own. The Shopping Cart will only function with the products you've embedded from Sellfy.com on your site. You must use the Sellfy embed option to enable the Shopping Cart feature.
With this feature, you can keep your customers on your site throughout the purchasing process. Embed the shopping cart directly onto your site to let your customers purchase multiple products in one go.
To add this feature to your website, follow the instructions below:
- Log into your Sellfy account
- Navigate to Store settings → Embed options
- Click Buy Now button in the Choose Embed Type section
- Select a product from the drop-down menu
- Scroll down and copy the generated code from the Embed Shopping Cart window (the code will be the same for all products)
How to manage the Shopping Cart display functions
To help you make the most of this feature, it's useful to understand what each part of the code represents. There are three components to consider:
- User ID
- Data type
- Data text
Here's what the code with the three parts looks like in the Sellfy Demo Store:
<span id="sellfy-shopping-cart" data-id="51ecd879db80625eaf0c9e80" data-type="floating" data-text= "Cart"></span>
It is important to copy this part of the code exactly the way it's presented. Do not change this ID. The user ID is the element of the code that is vital for your shopping cart to function properly. It looks like this:
Button position on your site
The data type determines the position of the button on your site. There are two different functions you can choose from:
floating function is the default option and will place the cart button at the top right corner of the page with a 20px x 20px margin from the sides. The button will be in a continuous floating mode while the user is scrolling on your site.
Setting the data type to
inline anchors the button in the particular place you choose on your page. Contrary to the floating function, the button will stay in place.
Floating button display
Here's what the button will look like in
In-line button display
Here's what the button may look like in
How to change the Shopping Cart button text
data-text tag allows you to add custom text to your shopping cart button. We recommend one to three words maximum, but it's totally up to you. The default of this part of the code is set to
Cart, but you may change it to
Shopping Cart or any other title.
Here's an example with the default code from the Sellfy Demo store (do not use this for your own store as the data-id is unique for each store):
- Default text Cart:
- Changed text to Shopping cart:
How to change the shape and color of the Shopping Cart button
Note: These changes will apply both to your Sellfy.com storefront as well as the embedded Shopping Cart button on your website.
To change the color and shape of your Shopping Cart button,
- Log into your Sellfy account
- Go to Store settings → Customization
- Go to the Style section and scroll down to Button style
- Once you've made the changes, click Save at the top