How to add or embed the Shopping Cart feature
In this article:
What is a Shopping Cart feature?
The Shopping Cart feature allows customers to select more than one item in your store and then pay for them in one single transaction. This makes it 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.
You can use the Shopping Cart on your Sellfy store or add it to your own website.
What does the Shopping Cart look like?
The Shopping cart will look slightly different, depending on how you use the service. You can use the Shopping cart on the Sellfy.com store or embed a Shopping cart on your own website.
This is what the Shopping Cart looks like for customers visiting your website when you have the shopping cart enabled store.
How to add or remove the Shopping Cart on your store
Important! The Shopping Cart feature does not support subscription products. Subscription products are not added to the cart when a customer clicks "Continue shopping". They must be purchased individually.
To enable or disable this feature to your Sellfy store, follow the instructions below:
- Log in to your Sellfy account
- Open your customizer by going to Store settings > Customization.
- Edit your Navigation module
- Select the Toggle switch next to Shopping cart (Green means this is ON)
- Click Publish to 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.
Embed the shopping cart directly onto your site to let your customers purchase multiple products at once.
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)
- Paste the code into your website HTML
How to manage the Shopping Cart position on your store
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
Important! For creators using Wix websites, the floating shopping cart is not recommended. If you are embedding the shopping cart on a Wix site, you will need to use the in-line type embed.
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
- Select the General Settings section and scroll down to Button styles
- To save the changes click Publish