Description

Showcase products from any Shopify collection in a horizontally scrollable carousel.

The Products Carousel is designed to highlight products based on a Shopify collection handle and is a true representation of the live data that will shown to customers. 

Each product card includes:

• Product image
• Up to three color swatches (with +X overflow indicator if more)
• Product title
• Product price, including strikethrough styling for sale pricing
• A link to the Product’s details page

Swatches support both hex code values and images, and are styled consistently whether they’re visible in production or shown for layout purposes in the Shipcode layout.

Shopify Prerequisites

There are no special setup steps required in Shopify—just make sure you have a collection created with the products you want to display.

You’ll need the collection handle for the Shipcode configuration step.

Where to find it:

• Go to your collection in Shopify Admin, scroll to the bottom, and look for the Handle at the end of the URL under “Search engine listing.”
• Alternatively, the handle appears in the URL after /collections/ when viewing the collection in your live store.
• • For example, in this URL, https://ridge-supply-store.myshopify.com/collections/outdoor-living, the handle is “outdoor-living” 

Shipcode Configuration

• Adding your component
• • Navigate to the components panel and select the Libraries tab in the header
  • Locate the “Product Carousel” Component 
  • Drag it onto a layout 
• Setting your collection handle
• • With the “Products Carousel by collection” Component selected:
  • • Navigate to the “Interactions” panel in the right sidebar
    • Locate the “Collection Handle” field
    • Change the handle to the desired collection handle
    • Edit the Number of Items value to control how many products in the carousel