Theme Section - Collection Circles

The Collection Circles theme section in Vitals allows you to display your collections in a modern, visually appealing format.

✔ Highlight your collections with a sleek, circular design

✔ Mobile-friendly layout for seamless shopping on any device

✔ Fully customizable to match your store’s branding

Enhance your store’s browsing experience and make it easier for customers to discover your products with Collection Circles!

💡 Want to see this theme section in action? Go to our demo store at shop.vitals.co to experience this intuitive theme section, along with our other Vitals apps!

Installing the Collection Circles section to your Shopify theme

Before going to the Shopify Theme Editor to insert this theme section, you would first need to install it first 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 Circles:

Defining a collection for the Collection Circles Theme Section

  • To designate the proper collection to show in one of the circles, simply click on a Collection circle in the left sidebar:


  • Once selected, simply choose the collection you would like to appear in the selected collection Circle.


  • By default, the first product's image will appear in the Collection Circle. However, you can change this through its setting on the sidebar, as it allows you to change the image both for desktop view and mobile view.

Customizing the Collection Circles Theme Section

Customization is simple and intuitive through Shopify’s Theme Editor:

  1. Select the Section

    • In the left sidebar, click on the newly added Collection Circles section.

      Adjust Settings

    • The customizable settings for the section will appear in the right sidebar.

      Preview Your Changes

    • Use the live preview to ensure the section fits perfectly on your storefront.

You can also add multiple collections by clicking the + widget that appears when pointing over the section in the left sidebar.

Here are some of the settings that can be changed:

General

  • Heading - The text that will act as the Heading
  • Heading Size - Small, Medium, Large
  • Heading Style - Regular or Bold
  • Heading Alignment - Left, Center, or Right
  • Collection Name Size - Extra Small, Small, Medium, Large

Collections on Desktop

  • Layout - Grid or Carousel
  • Collections Per Row

Collections on Mobile

  • Layout - Grid or Carousel
  • Collections Per Row

Layout

  • Section Width
  • Custom max width (optional)
  • Top and bottom padding for Desktop
  • Top and bottom margin for Desktop
  • Top and bottom padding for Mobile
  • Top and bottom margin for Mobile

Design

  • Section Background Color (via a Color Palette)
  • Heading Color (via a Color Palette)
  • Collection Name Color (via a Color Palette)
  • Border Color (via a Color Palette)

Custom CSS

Get Started with Collection Circles Today!

The Collection Circles theme section is a powerful way to showcase your collections and improve your store’s visual appeal. With full customization and mobile-friendly design, it helps create a seamless shopping experience for your customers.

🚀 Start using Collection Circles now and make your collections stand out!


Need help? Check out our Help Center or contact our support team anytime.

Is this resource helpful? Thanks for the feedback There was a problem submitting your feedback. Please try again later.