How to create a Circle Menu Collection in Shopify Without APP
tl;dr:
This tutorial teaches you how to create a circle menu collection in Shopify without using an app. It provides step-by-step instructions on customizing your Shopify theme to add a circular menu, including modifying the code and styling it with CSS.
Create a section called circle-menu.liquid
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> {{ 'circle-menu.css' | asset_url | stylesheet_tag }} <div class="circle-menu-section" style=" background-color:{{ section.settings.section_background }}; background-image: {{ section.settings.section_background_gradient }}; --title-color: {{ section.settings.title_color }}; --tag-color: {{ section.settings.tag_color }}; --border-color: {{ section.settings.border_color }}; --tag-background: {{ section.settings.tag_background }}; --tag-background-gradient: {{ section.settings.tag_background_gradient | default: 'none' }}; "> <div class="circle-menu-section-settings"> <div class="circle-menu-slider swiper preview"> <div class="swiper-wrapper"> {% for block in section.blocks %} <div class="swiper-slide circle-menu-item" {{ block.shopify_attributes }}> {% if block.settings.collection %} <a href="{{ block.settings.collection.url }}"> {% endif %} <div class="circle-menu-image"> {% if block.settings.image %} {{ block.settings.image | image_url: width: 400 | image_tag: loading: section.settings.lazy_load | default: 'lazy', widths: '165, 360, 535, 750, 1070, 1500' }} {% endif %} </div> {% if block.settings.tag != blank %} <p class="circle-menu-tag" style="background-color:{{ section.settings.tag_background }}; background-image: {{ section.settings.tag_background_gradient }};">{{ block.settings.tag }}</p> {% endif %} {% if block.settings.title != blank %} <p class="circle-menu-title">{{ block.settings.title }}</p> {% endif %} {% if block.settings.collection %} </a> {% endif %} </div> {% endfor %} </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script> function circleMenu() { document.querySelector('.circle-menu-slider').classList.remove('preview') new Swiper('.circle-menu-slider', { spaceBetween: {{ section.settings.gap }}, slidesPerView: 'auto', breakpoints: { 320: { slidesPerView: {{ section.settings.mobile_visible_items }}, spaceBetween: {{ section.settings.gap_mobile }} }, 768: { slidesPerView: {{ section.settings.desktop_visible_items }}, spaceBetween: {{ section.settings.gap }} } } }); } document.addEventListener('DOMContentLoaded', circleMenu); if (Shopify.designMode) { document.addEventListener('shopify:section:unload', circleMenu); document.addEventListener('shopify:section:load', circleMenu); } </script> {% schema %} { "name": "Circle Menu", "settings": [ { "type": "header", "content": "Layout Settings" }, { "type": "range", "id": "max_width", "label": "Max Container Width", "min": 800, "max": 1800, "step": 50, "default": 1200, "unit": "px" }, { "type": "range", "id": "image_size", "label": "Image Size (Desktop)", "min": 80, "max": 300, "step": 10, "default": 150 }, { "type": "range", "id": "mobile_image_size", "label": "Image Size (Mobile)", "min": 60, "max": 200, "step": 10, "default": 100 }, { "type": "header", "content": "Slider Settings" }, { "type": "range", "id": "desktop_visible_items", "label": "Slides to show", "min": 2, "max": 10, "step": 1, "default": 5 }, { "type": "range", "id": "mobile_visible_items", "label": "Slides to show - mobile", "min": 1, "max": 5, "step": 1, "default": 2 }, { "type": "range", "id": "gap", "label": "Gap", "min": 0, "max": 80, "step": 1, "unit": "px", "default": 24 }, { "type": "range", "id": "gap_mobile", "label": "Gap - mobile", "min": 0, "max": 50, "step": 1, "unit": "px", "default": 16 }, { "type": "header", "content": "Item Settings" }, { "type": "range", "id": "border_thickness", "label": "Border thickness", "min": 0, "max": 10, "step": 1, "unit": "px", "default": 0 }, { "type": "header", "content": "Tag Settings" }, { "type": "checkbox", "id": "tag_custom_font", "label": "Use custom font", "default": false }, { "type": "font_picker", "id": "tag_font", "label": "Font family", "default": "helvetica_n4" }, { "type": "range", "id": "tag_font_size", "label": "Font size", "min": 0, "max": 48, "step": 1, "unit": "px", "default": 14 }, { "type": "range", "id": "tag_font_size_mobile", "label": "Font size - mobile", "min": 0, "max": 48, "step": 1, "unit": "px", "default": 12 }, { "type": "range", "id": "tag_line_height", "label": "Line height", "min": 50, "max": 200, "step": 5, "unit": "%", "default": 120 }, { "type": "range", "id": "tag_padding_vertical", "label": "Padding vertical", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 4 }, { "type": "range", "id": "tag_padding_vertical_mobile", "label": "Padding vertical - mobile", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 4 }, { "type": "range", "id": "tag_padding_horizontal", "label": "Padding horizontal", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 12 }, { "type": "range", "id": "tag_padding_horizontal_mobile", "label": "Padding horizontal - mobile", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 8 }, { "type": "range", "id": "tag_roundness", "label": "Roundness", "min": 0, "max": 40, "step": 1, "unit": "px", "default": 20 }, { "type": "checkbox", "id": "tag_bottom_position", "label": "Bottom position", "default": true }, { "type": "header", "content": "Title Settings" }, { "type": "checkbox", "id": "title_custom_font", "label": "Use custom font", "default": false }, { "type": "font_picker", "id": "title_font", "label": "Font family", "default": "helvetica_n4" }, { "type": "range", "id": "title_font_size", "label": "Font size", "min": 0, "max": 48, "step": 1, "unit": "px", "default": 16 }, { "type": "range", "id": "title_font_size_mobile", "label": "Font size - mobile", "min": 0, "max": 48, "step": 1, "unit": "px", "default": 14 }, { "type": "range", "id": "title_line_height", "label": "Line height", "min": 50, "max": 200, "step": 5, "unit": "%", "default": 120 }, { "type": "header", "content": "Colors" }, { "type": "color", "id": "title_color", "label": "Title color", "default": "#ffffff" }, { "type": "color", "id": "tag_color", "label": "Tag color", "default": "#000000" }, { "type": "color", "id": "border_color", "label": "Border color", "default": "#ffffff" }, { "type": "color", "id": "tag_background", "label": "Tag background color", "default": "#ffffff" }, { "type": "color_background", "id": "tag_background_gradient", "label": "Tag background gradient", "default": "linear-gradient(125deg, #be8c3c, #d3b15f 14%, #faf0a0 36%, #ffffb0 43%, #faf0a0 53%, #d3b15f 73%, #be8c3c 84%, #b17b32 90%, #a4692a)" }, { "type": "header", "content": "Section Colors" }, { "type": "color", "id": "section_background", "label": "Section background color", "default": "#212121" }, { "type": "color", "id": "section_border_color", "label": "Section border color", "default": "#000000" }, { "type": "header", "content": "Section Settings" }, { "type": "checkbox", "id": "full_width", "label": "Full width", "default": false }, { "type": "range", "id": "section_content_width", "label": "Section content width", "min": 0, "max": 400, "step": 4, "unit": "rem", "default": 80 }, { "type": "range", "id": "section_border_thickness", "label": "Border thickness", "min": 0, "max": 50, "step": 1, "unit": "px", "default": 0 }, { "type": "range", "id": "section_roundness", "label": "Section roundness", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 }, { "type": "checkbox", "id": "lazy_load", "label": "Lazy load", "default": true }, { "type": "header", "content": "Section Margin" }, { "type": "range", "id": "margin_top", "label": "Margin top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 }, { "type": "range", "id": "margin_bottom", "label": "Margin bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 0 }, { "type": "range", "id": "margin_sides", "label": "Margin sides", "min": 0, "max": 30, "step": 0.5, "unit": "rem", "default": 0 }, { "type": "range", "id": "margin_sides_mobile", "label": "Margin sides mobile", "min": 0, "max": 15, "step": 0.5, "unit": "rem", "default": 0 }, { "type": "header", "content": "Section Padding" }, { "type": "range", "id": "padding_top", "label": "Padding top", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 40 }, { "type": "range", "id": "padding_bottom", "label": "Padding bottom", "min": 0, "max": 100, "step": 1, "unit": "px", "default": 40 }, { "type": "range", "id": "padding_sides", "label": "Padding sides", "min": 0, "max": 30, "step": 0.5, "unit": "rem", "default": 2 }, { "type": "range", "id": "padding_sides_mobile", "label": "Padding sides mobile", "min": 0, "max": 15, "step": 0.5, "unit": "rem", "default": 1 } ], "blocks": [ { "type": "menu_item", "name": "Menu Item", "settings": [ { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "text", "id": "tag", "label": "Item Tag", "default": "Best Seller" }, { "type": "text", "id": "title", "label": "Item Title", "default": "Category Name" }, { "type": "collection", "id": "collection", "label": "Collection Link" } ] } ], "presets": [ { "name": "Circle Menu", "category": "Navigation", "blocks": [ { "type": "menu_item" }, { "type": "menu_item" }, { "type": "menu_item" }, { "type": "menu_item" }, { "type": "menu_item" } ] } ] } {% endschema %}
Create circle-menu.css
go to assets and create this file
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(https://fonts.gstatic.com/s/josefinsans/v32/Qw3PZQNVED7rKGKxtqIqX5E-AVSJrOCfjY46_DjRbMZhKSbpUVzEEQ.woff) format("woff"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .circle-menu-section { border-top: solid #000000 0px; border-bottom: solid #000000 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0rem; margin-right: 0rem; border-radius: 0px; overflow: hidden; } .circle-menu-section-settings { margin: 0 auto; padding-top: 27px; padding-bottom: 27px; padding-left: 1.5rem; padding-right: 1.5rem; } .circle-menu-slider { margin-left: -1.5rem !important; margin-right: -1.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .circle-menu-item { padding-top: 5px; box-sizing: border-box !important; text-decoration: none; text-align: center; position: relative; } .circle-menu-image { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--border-color); padding: 4px; aspect-ratio: 1 / 1; box-sizing: border-box; position: relative; } .circle-menu-image img, .circle-menu-image svg { display: block; border-radius: 50%; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: cover; margin: 0; aspect-ratio: 1 / 1; position: absolute; top: 4px; left: 4px; } .circle-menu-image svg { background-color: #a0a0a0; } .circle-menu-details { text-align: center; } .circle-menu-tag { position: absolute; left: 50%; transform: translateX(-50%); z-index: 10; margin: 0; font-size: 10px; line-height: 150%; padding: 2px 10px; border-radius: 4px; color: var(--tag-color); background-color: var(--tag-background); background-image: var(--tag-background-gradient, none); text-transform: unset; word-wrap: break-word; display: inline-block; width: 100%; max-width: max-content; } .circle-menu-title { margin: 0; display: block; text-transform: unset; word-wrap: break-word; font-size: 10px; line-height: 150%; color: var(--title-color); } @media (min-width: 1024px) { .circle-menu-section { margin-top: 0px; margin-bottom: 0px; margin-left: 0rem; margin-right: 0rem; border-radius: 0px; } .circle-menu-section-settings { padding: 0 5rem; padding-top: 36px; padding-bottom: 36px; padding-left: 5rem; padding-right: 5rem; } .circle-menu-slider { margin-left: 0px !important; margin-right: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } .circle-menu-tag { font-size: 16px; } .circle-menu-title { font-size: 14px; } .circle-menu-tag { font-size: 16px; padding: 2px 16px; } } .circle-menu-section-settings { max-width: 120rem; } .circle-menu-tag { top: 0; } .circle-menu-title { margin-top: 4px; } @media (min-width: 1024px) { .circle-menu-title { margin-top: 4px; } } .circle-menu-slider.preview .swiper-wrapper { display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .circle-menu-slider.preview .circle-menu-item { width: 100%; } .circle-menu-slider.preview .circle-menu-item:not(:first-child) { margin-left: 16px; } @media (min-width: 1024px) { .circle-menu-slider.preview .circle-menu-item:not(:first-child) { margin-left: 24px; } .circle-menu-slider.preview .circle-menu-item { width: calc(100% / 5 - (24px \* 4)); } } .circle-menu-item a { text-decoration: none; color: inherit; display: block; }