> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.widebundle.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use WideBundle with GemPages?

**Wide Hello!** 😁

If you are using GemPages, installing WideBundle is a bit different than installing it on a classic theme.

So let's see how to do it!

Start by installing GemPages [by clicking here](https://gempages.net/?ref=iszw1fe6) 

Make sure you've followed the tutorial to get started with WideBundle beforehand (if you haven't, [click here](https://help.widebundle.com/en/article/getting-started-with-widebundle-9zb0t0/))

Then come back to this article when you are asked to do so.

If you prefer to watch a video, you can watch it below 👇

${youtube}[Video Tutorial](Xx3JFqGNQs4)

Are you ready? Here we go!

## 1️⃣ Open the product page on GemPages

Start by opening the product page you are interested in on GemPages

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_xt5wap.png)

## 2️⃣ Add the variants selector, quantity button and add to cart button

These elements are necessary to 

* Add the "Variants" module

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_8tjo9a.png)

* Add the "Quantity" module

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_zy87pp.png)

* Add the "Add to cart button" module

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_1w8q8w5.png)

## 3️⃣ Add the WideBundle module

When it's done, scroll down the list of items on the left

At the very bottom, you will find the "Other items" category, click on **Add item**

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_2a6gea.png)

Then type "WideBundle" in the search bar

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_1avwmom.png)

Click on it and then click on **Add Element** !

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_86mkr1.png)

You can leave the small window

## 4️⃣ Place the WideBundle module on your page

Now that the element is added, move it next to the "Add to cart button" module

![](https://storage.crisp.chat/users/helpdesk/website/59d08aea42fadc00/image_f2wwe7.png)

## 5️⃣ Save and exit

And that's it! Everything is installed, now you can save the page and publish it.

Then, go back to the tutorial "Getting started with WideBundle" if you were reading it

See you soon! 😁