Customise the Cart Style & Position

Customising your shopping cart on Shoprocket.io is a crucial step in ensuring your e-commerce platform aligns with your brand and creates a seamless customer experience. Here's how to do it:

1. Log In and Navigate to the Cart Embed Page

Log in to your Shoprocket account. From your dashboard, navigate to the Sales Channels section and click on 'Existing Website'. You'll see an option for 'Embed'. Click on it, then choose 'Basket'. This will bring you to the cart settings page. From here, you can click the "Styles" link in the left hand sidebar.

2. Customise Basket Position

Here, you'll be presented with different positioning options for your cart, which include:

• Top Left
• Top Right
• Middle Left
• Middle Right
• Bottom Left
• Bottom Right

Choose the position that suits your website's design and user interface best. Click on your preferred position to select it.

3. Selecting the Basket Style

Next, choose between the 'Bubble' or 'Sidebar' style for your cart. The bubble style typically provides a compact, unobtrusive view, while the sidebar style offers more detail and is typically more visible. Choose the one that complements your overall website design and meets your customers' expectations.

4. Adjusting the Basket X Axis Offset

You can adjust the horizontal positioning of your cart by altering the 'Basket X Axis Offset' value. This value is measured in pixels (px). Increase or decrease the value according to your preferences.

5. Adjusting the Basket Y Axis Offset

Just like the X axis offset, you can change the vertical positioning of your cart by changing the 'Basket Y Axis Offset' value. This can be beneficial for fine-tuning the cart's location on your webpage.

6. Customising the Basket Icon

Shoprocket also provides an option to upload your own image for the cart icon. This is a great opportunity to maintain brand consistency throughout your website. Simply click on the upload icon and select the image you'd like to use from your device.

After you've made all your desired changes, it's important to make sure these changes are applied correctly.

7. Updating Your Website With the New Cart Settings

To ensure your website reflects the changes you've made to your Shoprocket cart, you'll need to copy the updated embed code. You'll find this code on the same page where you've made all your adjustments.

Once you've copied the code, navigate to your website's backend. Look for the site's HTML, and find the footer section. Paste the updated embed code into the footer. This will ensure that your updated cart is available on every page of your website.

Remember, the ultimate goal of customizing your cart is to provide your customers with a seamless and enjoyable shopping experience. So, ensure your changes are both aesthetically pleasing and user-friendly.