How to add or embed the Shopping Cart feature

In this article:

What is a Shopping Cart feature?

What does the Shopping Cart look like?

How to add or remove the Shopping Cart on 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?

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 feature in two ways:

1. in your Sellfy store
2. on your own website

Using the shopping cart with a Sellfy store

This is what the Shopping Cart looks like when you add or enable it on your Sellfy store.

This is what the Shopping Cart looks like for customers visiting your website when you have the shopping cart enabled store.

Using the shopping cart with your own website

If you're embedding Sellfy onto your existing website, the position of the cart depends on how you use the embed code. Head to the next section for more details.

If you don't embed the shopping cart onto your website, the checkout is condensed to 2 steps; Checkout > Payment. Customers are immediately redirected to the Payment page after clicking the Buy now button. 

This checkout solution was specifically designed for sellers who sell single products and want to offer a faster checkout experience for their customers.

How to add or remove the Shopping Cart on your store

To enable or disable this feature to your Sellfy store, follow the instructions below:

1. Log in to your Sellfy account
2. Open your customizer by going to Store settings > Customization.
3. Edit your Navigation module
4. Select the Toggle switch next to Shopping cart (green means this is ON)
5. 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

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:

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)
6. 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>

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:

• Changed text to Shopping cart:

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

To change the color and shape of your Shopping Cart button:

1. Log into your Sellfy account
2. Go to Store settings > Customization
3. Select the Store stlye section and scroll down to Button styles
4. To save the changes click Publish