Block Circle Menu - Revision history

An at 12:18, 22 May 2025

2025-05-22T12:18:48Z

← Older revision		Revision as of 12:18, 22 May 2025
Line 1:		Line 1:
	{{DISPLAYTITLE:Block: Circle Menu}}		{{DISPLAYTITLE:Block: Circle Menu}}

			==Overview==
	The Circle Menu section lets you add a circle menu, square menu, or pill menu that showcases your featured product collections anywhere in your Shopify store. It turns the collection list into a ‘bubble navigation’ that fits well on any device.		The Circle Menu section lets you add a circle menu, square menu, or pill menu that showcases your featured product collections anywhere in your Shopify store. It turns the collection list into a ‘bubble navigation’ that fits well on any device.

Line 26:		Line 27:
	[[File:Ecb-bubble-nav3.png\|frameless\|800x800px]]		[[File:Ecb-bubble-nav3.png\|frameless\|800x800px]]

			==How to add Circle Menu section==
	=== Watch video tutorial===		=== Watch video tutorial===
	Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, [https://www.youtube.com/watch?v=4U084tqoNqE&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&index=3 click here to watch the video].		Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, [https://www.youtube.com/watch?v=4U084tqoNqE&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&index=3 click here to watch the video].
Line 40:		Line 42:
	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

			==Customize Circle Menu==
	=== Circle Menu global settings ===		=== Circle Menu global settings ===

Line 148:		Line 151:
	[[File:Ecb-circlemenu-optimize.png\|200px\|frameless]]		[[File:Ecb-circlemenu-optimize.png\|200px\|frameless]]

	===Add other content blocks===		==Add other content blocks==
	You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.		You can add many content blocks to a section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.

An: /* Circle Menu settings */

2025-03-27T01:47:46Z

Circle Menu settings

← Older revision		Revision as of 01:47, 27 March 2025
Line 40:		Line 40:
	{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}		{{Note\|''If you are new to our Easy Content Builder, please take a look at the [[Add_section_settings\|Add Sections]] section for detailed instructions on how to add a section to your theme.\|reminder}}

	=== Circle Menu settings ===		=== Circle Menu global settings ===

	{\| class="wikitable"		{\| class="wikitable"
Line 88:		Line 88:
	* '''uk-link-text''': Use this class if you want to apply the default menu style.		* '''uk-link-text''': Use this class if you want to apply the default menu style.
	* '''uk-button-secondary uk-text-light''': Apply these classes to create a button with a colored background and light text.		* '''uk-button-secondary uk-text-light''': Apply these classes to create a button with a colored background and light text.
			* '''uk-button-secondary uk-button''': Apply these classes to create a button with a colored background and light text.
	* Note: If you wish to switch these classes to the primary style, use: '''uk-button-primary uk-text-light'''		* Note: If you wish to switch these classes to the primary style, use: '''uk-button-primary uk-text-light'''
	\|-		\|-

An: /* Circle Menu settings */

2025-01-09T08:21:09Z

Circle Menu settings

← Older revision		Revision as of 08:21, 9 January 2025
Line 55:		Line 55:
	* '''Slider''': presents a horizontal menu displayed in a sliding format. Click the arrow to move to the next menu item.		* '''Slider''': presents a horizontal menu displayed in a sliding format. Click the arrow to move to the next menu item.
	* '''Grid''': organizes the menu items in a grid layout.		* '''Grid''': organizes the menu items in a grid layout.
	* '''~~Linear~~''': offers a horizontally scrollable menu. You can swipe on mobile or scroll on desktop to navigate through the different menu items.		* '''Scroll''': offers a horizontally scrollable menu. You can swipe on mobile or scroll on desktop to navigate through the different menu items.
	\|-		\|-
	\|Item Style		\|Item Style

An: /* What is the Circle Menu section perfect for? */

2025-01-03T08:44:31Z

What is the Circle Menu section perfect for?

← Older revision		Revision as of 08:44, 3 January 2025
Line 15:		Line 15:
	You have various options to use the '''Circle Menu''' section for your Shopify themes:		You have various options to use the '''Circle Menu''' section for your Shopify themes:

	* A visual navigation that highlights your key collections - see an example [https://easy-content-builder-demo.myshopify.com/pages/section-circle-menu here].		* A text-only circle menu (Slider option) - see an example [https://easy-content-builder-demo.myshopify.com/pages/section-circle-menu here]. [[File:Ecb-circle-menu-slider.png\|frameless\|800x800px]]
			* A text-only circle menu (Scrollable menu option) - see an example [https://easy-content-builder-demo.myshopify.com/pages/section-circle-menu here][[File:Ecb-circle-menu-linear.png\|frameless\|800x800px]]
			* A visual navigation that highlights your key collections - see an example [https://easy-content-builder-demo.myshopify.com/pages/section-circle-menu here].
	[[File:Ecb-bubble-nav1.png\|frameless\|800x800px]]		[[File:Ecb-bubble-nav1.png\|frameless\|800x800px]]
	* The circle menu displays the collection names inside the image (with an overlay-opacity)		* The circle menu displays the collection names inside the image (with an overlay-opacity)

An at 08:40, 3 January 2025

2025-01-03T08:40:22Z

← Older revision		Revision as of 08:40, 3 January 2025
Line 3:		Line 3:
	The Circle Menu section lets you add a circle menu, square menu, or pill menu that showcases your featured product collections anywhere in your Shopify store. It turns the collection list into a ‘bubble navigation’ that fits well on any device.		The Circle Menu section lets you add a circle menu, square menu, or pill menu that showcases your featured product collections anywhere in your Shopify store. It turns the collection list into a ‘bubble navigation’ that fits well on any device.

			You can create three distinct styles of Circle Menus:

			# Showcasing menus in a slider format
			# Arranging menus in a grid layout
			# Showcasing text-only menus, which can be either in a slider style or a horizontally scrolling format.
	{{Note\|NOTE: This block is only available for the PRO plan. You can configure this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}		{{Note\|NOTE: This block is only available for the PRO plan. You can configure this block normally in the Theme Editor; however, you need to upgrade your plan to apply them to the front end.\|inline}}

An: /* Circle Menu settings */

2025-01-03T08:25:19Z

Circle Menu settings

← Older revision		Revision as of 08:25, 3 January 2025
Line 44:		Line 44:
	\|-		\|-
	\|Style		\|Style
	\|Select the grid layout or ~~slider option~~.		\|Select the grid layout, slider, or scrollable menu options:

			* '''Slider''': presents a horizontal menu displayed in a sliding format. Click the arrow to move to the next menu item.
			* '''Grid''': organizes the menu items in a grid layout.
			* '''Linear''': offers a horizontally scrollable menu. You can swipe on mobile or scroll on desktop to navigate through the different menu items.
	\|-		\|-
	\|Item Style		\|Item Style

An: /* Circle Menu settings */

2025-01-03T04:35:24Z

Circle Menu settings

← Older revision		Revision as of 04:35, 3 January 2025
Line 45:		Line 45:
	\|Style		\|Style
	\|Select the grid layout or slider option.		\|Select the grid layout or slider option.
			\|-
			\|Item Style
			\|
			* '''Image + Title''': Displays both the featured images of the Collection along with the Collection title as the menu item.
			* '''Title Only''': Only the Collection title is shown, making it ideal for a text-only menu.

			'''Note''': For additional information on customizing the menu item when the '''Title Only''' option is enabled, please refer to the '''Link Style''' field below.
	\|-		\|-
	\|Items per row on Desktop		\|Items per row on Desktop
Line 66:		Line 73:
	* If you enable '''Image Overlay''' and set the '''Overlay Background Color''' as '''Dark''', use this class: '''uk-light'''		* If you enable '''Image Overlay''' and set the '''Overlay Background Color''' as '''Dark''', use this class: '''uk-light'''
	* If you enable '''Image Overlay''' and set the '''Overlay Background Color''' as '''Light''', use these classes: '''uk-link-text uk-text-decoration-none'''		* If you enable '''Image Overlay''' and set the '''Overlay Background Color''' as '''Light''', use these classes: '''uk-link-text uk-text-decoration-none'''
			// '''Link Style''' (when the Item Style > Title Only is enabled):

			* '''uk-link-text''': Use this class if you want to apply the default menu style.
			* '''uk-button-secondary uk-text-light''': Apply these classes to create a button with a colored background and light text.
			* Note: If you wish to switch these classes to the primary style, use: '''uk-button-primary uk-text-light'''
	\|-		\|-
	\|Overlay Background Color		\|Overlay Background Color

An: /* Watch video tutorial */

2024-12-31T13:03:06Z

Watch video tutorial

← Older revision		Revision as of 13:03, 31 December 2024
Line 20:		Line 20:

	=== Watch video tutorial===		=== Watch video tutorial===
	Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, ~~available~~ [https://www.youtube.com/watch?v=4U084tqoNqE&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&index=3 here].		Be sure to watch the step-by-step video tutorials demonstrating how to utilize the sections provided in Posstack Easy Content Builder, [https://www.youtube.com/watch?v=4U084tqoNqE&list=PLZdliUBbfeeGpJ6_zH4FDyF9QvYv1Pz-2&index=3 click here to watch the video].

	=== How to add Circle Menu section ===		=== How to add Circle Menu section ===

An: /* Circle Menu tips */

2024-11-08T04:11:19Z

Circle Menu tips

← Older revision		Revision as of 04:11, 8 November 2024
Line 118:		Line 118:
	If you decide to position the Circle Menu section beneath the main header, here are a few suggestions to improve the menu:		If you decide to position the Circle Menu section beneath the main header, here are a few suggestions to improve the menu:

	1. Consider adding more top padding above the circle menu. You can easily adjust the Padding top value in your Section Settings* to achieve this.		1. Consider adding more top padding above the circle menu. You can easily adjust the '''Padding top''' value in your '''Section Settings''' to achieve this.

	2. For mobile devices, applying a bit of left padding to the circle menu could be beneficial. Try adjusting the Container Max Width to 98% or a value that suits your preference.		2. For mobile devices, applying a bit of left padding to the circle menu could be beneficial. Try adjusting the '''Container Max Width on Mobile''' to 98% or a value that suits your preference.

	[[File:Ecb-circlemenu-optimize.png\|~~300px~~\|frameless]]		[[File:Ecb-circlemenu-optimize.png\|200px\|frameless]]

	===Add other content blocks===		===Add other content blocks===

An: /* Add other content blocks */

2024-11-08T04:10:20Z

Add other content blocks

← Older revision		Revision as of 04:10, 8 November 2024
Line 114:		Line 114:
	\|Sets the vertical spacing between elements.		\|Sets the vertical spacing between elements.
	\|}		\|}

			===Circle Menu tips===
			If you decide to position the Circle Menu section beneath the main header, here are a few suggestions to improve the menu:

			1. Consider adding more top padding above the circle menu. You can easily adjust the Padding top value in your Section Settings* to achieve this.

			2. For mobile devices, applying a bit of left padding to the circle menu could be beneficial. Try adjusting the Container Max Width to 98% or a value that suits your preference.

			[[File:Ecb-circlemenu-optimize.png\|300px\|frameless]]

	===Add other content blocks===		===Add other content blocks===