Create an add to cart button or link in Webstudio

Add Sidecart Functionality

To display the sidecart when a customer adds a product to the cart, you need to include the Foxy loader file in your Webstudio project.

Obtain the Foxy Loader Code

1. 1

   Log in to your Foxy admin dashboard.

2. 2

   Navigate to the Settings -> Website & Products

3. 3

   Copy the code snippet from the Foxy loader.js section textarea.

Add the Code in Webstudio

1. 1

   Open your Webstudio project.

2. 2

   Click on the Webstudio logo in the top-left corner and select Project Settings.

3. 3

   In the General section, locate the Custom Code field.

4. 4

   Paste the copied Foxy loader code into this field.

5. 5

   Save your changes.

Add an Add-to-Cart Button or Link

You can use either a Button or Link component in Webstudio to create an Add-to-Cart functionality. Follow these steps for each option:

Button Component

1. 1

   In Webstudio, add a Button component to your page.

2. 2

   Set the button text (e.g., "Add to Cart").

3. 3

   Customize the button's appearance to match your design.

4. 4

   Set the an href attribute for the button to your Foxy product link.

5. 5

   You can use our Link & Form Builder on the Foxy Admin to set up and copy your Direct Link.

   • Example: https://yourstore.foxycart.com/cart?name=Product+Name&price=19.99&code=PRODUCT-CODE.

Link Component

1. 1

   In Webstudio, add a Link component to your page.

2. 2

   Set the link text (e.g., "Add to Cart").

3. 3

   Customize the link appearance as desired.

4. 4

   Set the href attribute for the link to your Foxy product link.

5. 5

   You can use our Link & Form Builder on the Foxy Admin to set up and copy your Direct Link.

   • Example: https://yourstore.foxycart.com/cart?name=Product+Name&price=19.99&code=PRODUCT-CODE.

Both options allow customers to add a product to their cart seamlessly. Choose the component that fits your design and interaction requirements.