Tag: How To

If you are wondering how to add a product carousel on your Shopify Homepage, look no further!

by James Byrne, Information Architect (USMC VET)
After Dark Grafx

Depending on your Shopify Theme, you will need to adjust the code accordingly.

NOTE: The below integration requires a paid app. If you are interested in adding a home page product carousel to Debut, Brooklyn or any theme that uses SLICK then we offer a different integration for $85.00 that does not require an app – Contact Us Here.

Today, we are going to describe How To Add A Product Carousel Slider on a Shopify Homepage utilizing the VENUE THEME, found in the Shopify Theme Store.

This integration is for an advanced developer so be sure to backup your code before beginning this integration.

We will be editing the main theme liquid code of Shopify, uploading a few files then changing the way the template shows a featured collection on the homepage.

All themes are different, so you can use this information and code to troubleshoot your own theme or HIRE US and we will do it for you. There are many apps in the Shopify App Store but you have to pay for them or subscribe and pay for them on a monthly basis.

THEME: VENUE
CODE INTEGRATION: Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)
CODEPEN TESTING: Click here to see BASIC integration for HTML

We are assuming that you have a Shopify Account – if not, you can signup for one here. We are also assuming that you have purchased and installed the VENUE THEME.

STEP 1: Download Flickity – Use Free for Personal Use or Pay the Commercial Integration (Recommended)

Under DOWNLOADS on the page above right click and SAVE-AS and save these files to your computer. We usually start with the NON-MINIFIED versions so that we can edit them if needed. (note: screenshot below – you will have to go to the website above to download)

STEP 2: LOGIN TO SHOPIFY AND UPLOAD THESE FILES
a) Left side in Admin click on SETTINGS
b) Then click on FILES
c) Then upload all files

d) Copy each of the new links https://cdn.shopify….. to a new text document as you will need these later in this post.

STEP 3: Go to your theme and add the code references

a) On left click ONLINE STORE
b) On right click on the ACTIONS dropdown and select EDIT CODE
c) Under LAYOUT on the left fine theme.liquid (it is usually best to make a backup of this code before editing it.)

Scroll to the bottom of this file and paste for CDN referenced files below:

Do not use # as these were placed in this post to hide the numbers from our files 🙂 Just paste YOUR CDN files that you copied from STEP 2 above

Right above the closing </BODY>

STEP 4: Remember, we are using the VENUE THEME so finding where to make the following edits will be dependent on your theme.

Under SECTIONS on the left, find home-collection.liquid

Around line 31 find this code and ADD THE BOLD ITEMS IN BELOW

<div class=”home-products__grid”>
<div class=”o-layout o-layout–center{% if settings.product_grid_masonry %} o-layout–masonry{% endif %}{% if section.settings.grid == 8 %} o-layout–small{% endif %} layout-slider js-layout-slider js-layout-slider-{{ section.id }} carousel” data-flickity='{ “groupCells”: true }’>
{% for product in collection.products limit: product_limit %}
<div class=”o-layout__item {{ grid_item_width }} carousel-cell”>
{% include ‘product-grid-item’, grid_image_width: image_size, page: ‘home’ %}
</div>

Save the File.

STEP 5: ADD FEATURED COLLECTION TO HOMEPAGE

a) Click on ONLINE STORE on the left
b) Click on CUSTOMIZE BUTTON on the right
c) Scroll Down on the left and select ADD SECTION only is the FEATURED COLLECTION is not showing on the theme.

d) Select FEATURED COLLECTION
e) Select the FEATURED COLLECTION that you just added and name it to whatever you want.
d) Change the PRODUCTS per row to whatever you want
e) Change the ROWS to the maximum number. I chose 5.