A shopping bag helps customers see how many items they’ve added to their order and proceed to checkout. When you embed your online store, separate products, or “Buy now” buttons to a website, the shopping bag icon will appear on that page automatically as soon as at least one product is added to the cart.
You also have an option to add an additional shopping bag to other pages on your website or put it in the website header. This icon will let website visitors know that you have an online store where they can shop. Also, you can modify the design of the shopping bag: choose the icon, the info to display (number of items, subtotal, etc.), set the position where it will display, etc.
Adding a shopping bag to a website
You can add a shopping bag to your website pages so that customers can go to the cart page from any page on your website. Also, a shopping bag icon will remind customers that they’ve added products to their cart encouraging them to complete the purchase.
To add a shopping bag to website pages:
Go to your store admin → Website.
Scroll down to the "Add your store to one more website" section and click Pick Platform → Other platforms and site builders.
Click Add shopping bag. The shopping bag code for your store will be copied to the clipboard.
Go to your website editor and open the page where you want to add the shopping bag.
Paste the code to the source code of the page. That may be HTML or source tab or a separate button to add codes. That varies depending on the website builder you use.
Save and publish the page changes.
The additional shopping bag icon will appear on your website.
Customizing shopping bag design
You can customize the design of the shopping bag to make it match your website design better. To change the default shopping bag design, you need to change the default code of the shopping bag and add a new piece of code that will make the desired change. You will see the codes for different design changes below.
To change the design of your shopping bag icon:
Select the desired design change below.
Copy the code under the desired design change.
Replace VALUE with one of the suggested values and STORE_ID with the ID of your store that you can copy in your store admin, in the bottom left corner.
Go to the editor of your website and open the page where you want to add the shopping bag.
Paste the code to the source code of the page. That may be HTML or source tab or a separate button to add codes. That varies depending on the website builder you use.
Save and publish the changes.
Layout
Here is a code to change the shopping bag layout:
where:
VALUE is the name of the layout that you want to apply to your shopping bag icon. Copy it from the left column in the table above.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
Icon
Here is a code to change the shopping bag icon:
where:
VALUE must be replaced with BAG, CART, or BASKET depending on what icon you want to use.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
To add a custom image as a shopping bag icon, use this code:
where:
VALUE is either a URL to the custom icon file or an SVG markup. To get an URL to your icon, upload your image to any image hoster where you can get a direct link to an image.
STORE_ID is the ID of your store that you can copy in your store admin, in the bottom left corner.
Border shape
To change the shape of the border around the shopping bag icon, use this code:
where:
VALUE must be replaced with NONE for no border, RECT for a rectangle border, or PILL for a rounded rectangle border.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Position
Here is a code to change the shopping bag position:
where:
VALUE must be replaced with one of the values from the table above depending on what position you want to apply to your shopping bag.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Animation
You can show or disable the animation effect when an item is added to the cart by using the following code:
where:
VALUE must be replaced with TRUE for showing the animation or FALSE for disabling it.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Use the same shopping bag design on all devices
The shopping bag icon adapts to the screen width and may look differently on devices with different screen width. To force the shopping bag to use the same design on all devices, use this code:
where:
VALUE must be replaced with TRUE for the cart to automatically adapt to different screen sizes or FALSE for the cart to have the same design on different screen sizes.
STORE_ID must be replaced with the ID of your store that you can copy in your store admin, in the bottom left corner.
Adding a shopping bag to WordPress pages
You can add your online store to a WordPress website using the Online Store plugin. This plugin also allows you to add a shopping bag icon and change its layout and design.
To add a shopping bag to a WordPress website:
Go to your WordPress Dashboard → Appearance → Customize.
Click Online Store in the sidebar menu.
Click Shopping Cart Widget.
Select where you want to display the shopping cart, set the layout, the icon, and other settings on that page.
Select the Show when empty option if you want to display the cart icon even when there are no products in the cart.
Customizing shopping bag appearance on WordPress
To change the appearance of the shopping cart icon added to a WordPress site:
Go to your WordPress Dashboard → Appearance → Customize.
Click Online Store in the sidebar menu → Shopping cart widget.
Play around with the cart widget settings. The cart widget appearance changes in the preview as you choose new settings.
Once you find your preferred view, click Publish.
TIP: To hide the shopping cart widget that is added by default, select “Do not show” in the first design option. If you want to emphasize your store to all site visitors, select “Show on all pages”. The cart icon conveys the site has a store.