Adding Shoprocket to Unbounce is easy. First, create your account with Shoprocket and head over to the "integration code" tab in your settings page.

Next up, copy the first code block, which will look like this:

Adding Shoprocket Codes to Unbounce

Once you have copied your JavaScript code snippet from your Shoprocket dashboard, in your Unbounce editor, click on the "JavaScript" tag at the bottom of your page, and paste in the code snippet:

Click save and preview your Unbounce site. You should immediately see our shopping cart in the top right corner of your page. (You can move and style this with your own CSS rules!)

Adding a Buy Button to Your Unbounce Page

Next up, you need to add some products to your Unbounce page.
The simplest method is to copy the "buy now" button from within your "edit product" view.

The code looks like this:

You can also add the "add to cart" ability to any existing element in your Unbounce page, such as an existing button or image element. To do this, you need to copy just the href section from your buy button code, like this: **javascript:sraddtocheckout(66237);** and add it into the URL field in "click action" within the right hand sidebar of your Unbounce page:

Adding multiple products to your Unbounce page

You can also add a list of products to your Unbounce page, head over to your "[integration code](https://dashboard.shoprocket.co/settings#set_tab_integration)" tab in your settings page and then copy the **second** code snippet.

This code snippet will render out all of your products into a grid view by default. You can also specify which category of products to display by specifying the category name in the sr-meta="" attribute.

Once you have copied your multiple products code snippet, head back to Unbounce and drag a "custom HTML" into your page and paste the code snippet in.

You can then resize your custom HTML by dragging the corners, to ensure your products fit correctly. Save and preview your page. You should now see the products from your store, rendered into your page:

That's it! You've now added your Shoprocket products to your Unbounce page, and your customers are ready to start buying.

Did this answer your question?