Theme Section - Collection Products Carousel

Our Collection Products Carousel theme section lets you display products from any collection in a dynamic, fully customizable carousel.

Perfect for your homepage or any other page, this feature allows you to showcase collections in an engaging, interactive format that captures visitors' attention.

Installing the Collection Products Carousel theme section to your Shopify theme

Before going to the Shopify Theme Editor to insert this theme section, you would first need to install it from the Vitals app.

For a complete list of instructions, you may refer to this article: How to Add a Theme Section to Your Shopify Store

Once you have successfully installed the theme section, you can now go to the Shopify Theme Editor and insert it by clicking Add section > ❤️ Vitals - Collection Products Carousel:

(It will contain empty products at first, as no collection has been selected yet)

Adding the desired collection to the Collection Products Carousel Theme Section

For the Collection Products Carousel theme section to work effectively, you must select the collection that you would like to showcase in the section.

This can be done by selecting the "[ ] Products" block in the left sidebar (part of that theme section) and clicking the Select Collections button on the right sidebar.

Once you have selected your desired collection/s, press the Save button at the bottom right to save the changes.

Customizing the Collection Products Carousel Theme Section

Customizing this theme section is easy, as all its appropriate settings are already found inside the theme editor. You just need to click on a specific element of the theme section (on the left sidebar), and its customizable settings will appear on the right sidebar.

Here are some of the settings that can be changed:

Collection Products Carousel - Main Element

• Product Card Settings
  • Image Aspect Ratio - Original, Square, Portrait, or Landscape
  • Alignment - Left, Center, or Right
  • Product card corner radius
  • Background color
  • Border Color
  • Text Color
  • Discounted Price Color
  • Show second image on hover - When enabled, adds more dynamic behavior to the displayed products by showing the second image of a product when the mouse pointer moves over it.
  • Show vendor
  • Show Add to Cart button - When enabled, provides an easy-to-access Add to Cart button below each product, allowing your visitors to add them with ease directly on the Featured Products theme section without going to the product pages
  • Button Style - Outline or Filled
  • Button Corner Radius
  • Button Text Color
  • Button Color
  • Show Product Rating - If the products have reviews in the Vitals Product Reviews app, the star ratings will appear under the product title.
  • Space between product cards
• Section Settings
  • Background color
  • Arrows and bar color
  • Products per row (desktop) - up to 5 products
  • Products per row (mobile) - up to 2 products
  • Padding top
  • Padding bottom
  • Section Max Width
  • Make Full Width - When enabled, the Featured Products theme section will fill the full width of the page.
• Custom CSS - If the native customization settings above are not enough and you are familiar with CSS, You can customize the elements even further.

Removing a Theme Section

Removing an unwanted theme section is as easy as clicking the Remove section button after selecting a theme section:

The Collection Products Carousel is a powerful way to spotlight your collections and enhance your store’s visual appeal. With easy customization options, you can ensure it complements your brand and engages your customers. If you have any questions or need further assistance, our support team is here to help. Enjoy showcasing your products in style!