How to Use a Custom Cart/Basket Icon/Image

Updated on 20th June 2023 in Customisations

Introduction:

In this tutorial, we will guide you through the process of using a custom cart/basket icon or image in Shoprocket.io. By following these steps, you will be able to personalise your online store's cart icon to match your branding. Let's get started!

Step 1: Log in to your Shoprocket.io Dashboard:

To begin, log in to your Shoprocket.io account using your credentials. Once logged in, you will be directed to the dashboard.

Step 2: Access Sales Channels:

From the dashboard, navigate to the "Sales Channels" section. This section allows you to manage the various channels through which you sell your products.

Step 3: Choose Your Sales Channel:

In the "Sales Channels" section, you will find two options: "Hosted Store" and "Existing Website." Choose the appropriate option based on your website setup.

a) Hosted Store:

If you are using the Shoprocket.io hosted store, click on the "Hosted Store" option. This option allows you to customise your store within the Shoprocket.io platform.

b) Existing Website:

If you have an existing website and want to integrate Shoprocket.io into it, select the "Existing Website" option. This option provides you with embed codes that you can add to your website to enable Shoprocket.io functionality.

Step 4: Configure the Cart Icon/Image:

After selecting your sales channel, locate the "Cart" option. Click on it to access the cart configuration settings.

Step 5: Choose "Styles":

Within the cart settings, look for the "Styles" tab or option. Click on it to proceed.

Step 6: Upload Your Icon/Image:

In the "Styles" section, you will find various options to customise the appearance of your cart. Look for the "Basket Icon" or "Cart Icon" field and click on it to upload your custom icon or image.

Step 7: Upload Your Custom Icon/Image:

A file upload dialog box will appear. Select the file containing your custom cart/basket icon or image from your computer and click "Open" or "Upload" to proceed.

Step 8: Save Your Changes:

Once you have uploaded your custom icon/image, click on the "Save" or "Apply" button to save your changes.

Step 9: For Existing Websites:

If you chose the "Existing Website" option, you will now need to copy the new cart embed code provided by Shoprocket.io.

a) Copy the Cart Embed Code:

In the cart settings page, look for the cart embed code. Select the entire code and copy it to your clipboard.

b) Paste the Cart Embed Code:

Go to your existing website's code editor or content management system (CMS). Paste the cart embed code into the desired location of your website's code, preferably in the footer section, so that the cart is accessible on every page of your site.

Step 10: Finalise and Test:

Save the changes to your website's code and ensure it is published. Visit your website and navigate to a page where the cart icon should be displayed. Verify that your custom cart/basket icon or image is now visible and functions correctly.

Conclusion:

Congratulations! You have successfully used a custom cart/basket icon or image in Shoprocket.io. Your online store now has a personalised touch that aligns with your branding. If needed, you can always return to the Shoprocket.io Dashboard to update or modify your cart icon/image.

Can’t find what you’re looking for?

Chat with us 👋

or contact us on [email protected]


as featured in