Shopify Circle Menu Section

Description of the Section

The Circle Menu section is a versatile and visually engaging component designed to enhance the user experience on your Shopify store. It allows you to display images or videos in a circular format, creating an attractive and organized layout for showcasing products, collections, or any other relevant content. The circles can contain media such as images and videos, with optional text and links, making it ideal for dynamic and interactive displays.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Circle Menu"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Display: Use the Circle Menu to showcase featured products, new arrivals, or top-selling items in an eye-catching circular grid. Each circle can link directly to the product page, helping to drive sales.

2. Collections Overview: Highlight different collections within your store, with each circle representing a distinct collection. Users can click on the circles to navigate to the respective collection pages.

3. Branding and Promotion: Incorporate promotional videos or images with relevant text to highlight sales events, discounts, or new product launches. The circular design adds an element of novelty to your promotional content.

4. Customer Testimonials: Display customer reviews and testimonials in a visually appealing circular format. Embed short video clips or images of happy customers along with their testimonials to build trust and credibility.

5. Event Highlights: If your store is involved in events or trade shows, use the Circle Menu to display highlights, photos, and videos from these events. This can help build community engagement and showcase your brand's active involvement.

Overview of the Configuration Settings

1. Font:

   • Override theme fonts: Checkbox to use custom fonts instead of theme fonts.
   • Text Font: Select the font for text within circles.

2. Text:

   • Text Size: Adjust the text size in pixels.

3. Colors:

   • Text Color: Choose the color of the text.
   • Background: Set the background color or gradient for the section.
   • Button Background Color: Choose the background color for the buttons.

4. Design:

   • Circle Alignment: Adjust the alignment of the circles (left, center, right).

5. Dimensions:

   • Circle Size: Set the diameter of the circles in pixels.
   • Max Width of Section: Define the maximum width of the entire section in pixels.
   • Grid Gap: Adjust the gap between the circles in pixels.
   • Padding: Set padding values for the top, bottom, left, and right of the section.

6. Mobile Dimensions:

   • Mobile Circle Size: Set the diameter of the circles for mobile view.
   • Mobile Grid Gap: Adjust the gap between the circles in pixels for mobile view.

7. Blocks:

   • Image Block:
     • Ring Color: Set the background color of the ring around the image.
     • Image Picker: Choose an image to display.
     • Optional Text: Add text to display below the image.
     • Optional Link: Add a URL to link the image.
   • Video Block:
     • Ring Color: Set the background color of the ring around the video.
     • Video: Upload a video to display.
     • Optional Text: Add text to display below the video.
     • Optional Link: Add a URL to link the video.
     • Video Options: Choose to play inline, autoplay, loop, show controls, or mute the video.

This comprehensive set of options allows you to precisely tailor the Circle Menu section to match your store's branding and functional requirements.