Custom upsells carousel in product pages using Tailwind CSS and Shopify CLI

Adding custom upsells is a proven way to increase conversions in a store. Even with Shopify offering their “You May Also Like” feature, linking a product to hand-picked upsells is powerful.

Shopify is opinionated about using Tailwind CSS on theme development. Tailwind CSS is a CSS framework that significatively reduces the time it takes to write CSS, and re-use CSS classes, so you keep CSS files small and much more perks.

‍

So, I’ll show you how to create a custom upsell carousel using Tailwind CSS.

Pre-requisites:

- NPM installed.

- Ruby installed.

- Basic knowledge of the command line.

- A theme with jQuery if you use the slick carousel (I'll explain this later).

‍

Step 1: 

‍

Add a metafield of type product->List of products in the product pages (settings->metafields) and name it as you wish. In my case, the namespace and key for that metafield are tonybundles.upsells.

Go to a product and select 5 products in the metafield you just created.

Create a copy of the theme you are modifying. Do it in the Shopify admin dashboard

‍

‍Step 2 (optional):

‍

‍If you have not installed the Shopify CLI in your system, open a command shell and run:

‍

‍

Step 3:

‍

In a command shell, make a directory, change the directory to the created directory, and login into the Shopify store you wish to modify. Replace https://xxxxx.myshopify.com with the URL of the store you want to modify

‍

Again, in the command shell, pull the theme you duplicated in the Shopify admin dashboard to your computer:

‍

‍

With this, in the folder you created (brand_name), you’ll have all the files for the theme you are going to work on.

Run the following command:

‍

‍

Open the URL 127.0.0.1:9292 in your favorite browser, and we are ready to start.

You can check the URL 127.0.0.1:9292 every time you edit the theme locally and you want to see how the changes look.

‍

Step 4:  

Add the following script before the </body> tag in theme.liquid (your local copy of the theme you just pulled).

‍

‍

This script will load the CSS classes Tailwind CSS has to offer. It’s a big file, but we won’t include this script in production.

‍

Find the {{ product.description }} variable in the product page, i.e., product-template.liquid for legacy themes or main-product.liquid for OS 2.0 themes, and add the following code after the variable {{ product.description }}:

‍

‍Note: We are using jQuery because we are using the slick carousel. If you want to use vanilla js, consider using another slider, i.e., flickity or a native slider with overflow: scroll‍Note II: Remember you need to do this in the local theme you pulled before.Note III: Replace tonybundles.upsells for the id of the metafield you created in a previous step of this guide.

‍

‍

Step 5:

‍

In your local theme.liquid file, add the following before the </body> tag:

‍

‍

This will initialize the slick slider for all the products with the metafield active. Feel free to skip the previous step if your theme already installed the slick slider or if you are using another slider, inject it there.

‍

Step 6:

Now, visit 127.0.0.1:9292 and navigate to the product with the metafields you set up in the first steps of this guide; you should see a carousel with upsells under the product description.

Every website and theme is different, so make sure to add Tailwind CSS rules and/or your own CSS to make it look great. 

‍

Carousel features:

• Each upsell is a slide.
• Can choose variants and quantities.
• Image and price changes depending on the variant selected.
• Can add the variant to the cart directly from the carousel.
• Inform the user when an upsell has been added to the cart or if there was an error in adding a variant.
• Disable not available variants.
• Don’t show slides with a product unavailable.
• Keep track of quantities dynamically when an upsell is added, so you can’t add an unavailable product.

‍

Ideas to extend the carousel:

• Add a product’s images slider inside each product slide.
• Wrap each slide around a <a> tag that links to the product.
• Use overflow: scroll on .tony-bundles-wrapper so the carousel won’t require JS.
• Make the carousel a popup that would show after adding a product to the cart.
• Use collections metafields instead of products metafields for stores with a large catalog. 

‍

Step 7 (optional):

‍

Depending on your needs, you may want to open the cart drawer after adding an upsell or redirect directly to the cart. You can do that using the success function of  jQuery.ajax({})

Once you are happy with the look and functionality of the carousel, let’s generate the Tailwind CSS rules.

Step 8:

‍

Create a file named tailwind.config.js in the root directory of the brand_name folder you created and paste the following:

NOTE: DON’T FORGET TO REPLACE  './sections/product-template.liquid' FOR THE PATH OF THE LIQUID FILE WHERE YOU ADDED THE UPSELLS CARROUSEL.

‍

‍

Create a folder in the root directory of brand_name called sources and add a subfolder named CSS.

Inside the folder CSS (/brand_name/sources/css), create a file named application-upsells.css and fill it with the following:

‍

‍

Now, install Tailwind CSS:

‍

And Generate the Tailwind CSS rules:

‍

This will generate a CSS file (brand_name/assets/application-upsells.css) with ONLY the rules you used, making this file fairly small.

‍

Step 9 (final):

Remove the following line you added on the local copy of theme.liquid:

‍

‍

Inside the if statement you added to load the slick slider, add the following to load the Tailwind CSS final styles:

‍

And voila! You just made a upsell carousel made with Tailwind CSS. You can go to any product and set up the appropriate metafield to choose upsells to offer per product.

Don’t forget to push the changes you made to Shopify with the following command:

‍