How to add the Shopping Cart feature

In this article:

What is a Shopping Cart feature?

What does the Shopping Cart look like?

How to add a Shopping Cart to your Sellfy.com store

How to add a Shopping Cart to your own website

How to manage the Shopping Cart position on your store

How to change the Shopping Cart button text

How to change the shape and color of the Shopping Cart button


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:

  1. Log in to your Sellfy account
  2. Navigate to Store Settings → General settings
  3. Turn on the Toggle switch next to Shopping cart (the toggle color should switch to green)
  4. 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:

  1. Log into your Sellfy account
  2. Navigate to Store settings → Embed options
  3. Click Buy Now button in the Choose Embed Type section
  4. Select a product from the drop-down menu
  5. 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>

User ID

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:

  data-id="[YOUR-ID]" 

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
  • In-line

The  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  floating mode:

In-line button display

Here's what the button may look like in   Inline mode:


How to change the Shopping Cart button text

The 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:
<span id="sellfy-shopping-cart" data-id="51ecd879db80625eaf0c9e80" data-type="floating" data-text= "Cart"></span>
  • Changed text to Shopping cart:
<span id="sellfy-shopping-cart" data-id="51ecd879db80625eaf0c9e80" data-type="floating" data-text=" Shopping cart"></span>


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,

  1. Log into your Sellfy account
  2. Go to Store settings → Customization
  3. Go to the Style section and scroll down to Button style
  4. Once you've made the changes, click Save at the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us