How to use the side cart with PageFly

Wide Hello!

In this article we will see how to open the side cart on PageFly when a customer adds a WideBundle offer to his cart.

Before we start, you should know that you need to have a side cart, either through your theme or through an application.

WideBundle will not create a cart on the side itself.

Let's get started!

If you prefer to have the explanation in video you can watch it right here 👇

1) Add the variant selector, the add-to-cart button and the quantity selector

The first step is to add various elements on PageFly that are necessary for the cart to work properly on the side. WideBundle needs to synchronize with the following elements: The variants selector, the quantity button, the add-to-cart button.

Once added, WideBundle will detect them and will hide them automatically so they don't appear in double with WideBundle!

1. Open your page on PageFly where you have WideBundle
2. Click on the left on the Shopify icon "Elements" then click on "Shopify"

3. Click on the "Product Variants" block for the variant selector, then drag the second module right above WideBundle

4. Click on the "Product Add To Cart" block for the add-to-cart button, then drag the first module just above WideBundle

5. Click on the "Product Quantity" block for the quantity selector, then drag the first module under the variant selector (above the add-to-cart button)

2) Configure your add-to-cart button to open the cart on the side

Now we need to configure the PageFly add-to-cart button to open the cart on the side.

We will then make sure that the add-to-cart button opens the cart on the side without WideBundle.

1. Click on the add-to-cart button module you added
2. Set the "Stay on the same page" action after clicking on the add-to-cart button

3. Save and Publish your page.

3) Test opening the cart on the side without WideBundle

We will now make sure that the sidebar opens without WideBundle before continuing.

1. Open the WideBundle application
2. Disable the display of WideBundle for a few minutes (to test the opening of the side cart without WideBundle)

3. Go to your store and open the product page where you added the variant selector, the add-to-cart button and the quantity selector
4. Try to add the product to the cart and see if the cart on the side opens as configured

4) Configure WideBundle to open the sidebar

1. Go back to the WideBundle application
2. Activate WideBundle again

3. Click on Settings & Design in the left panel

4. Click on Add to Cart Button.

5. Change the redirection of the add-to-cart button to "Side Cart"!

And that's it!

You can test again but there should be no problem

Updated on: 23/11/2024