Block Tab - Revision history

An at 12:28, 22 May 2025

2025-05-22T12:28:52Z

← Older revision		Revision as of 12:28, 22 May 2025
Line 4:		Line 4:
	{{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}}

	=== What is the Tab section perfect for? ===		== What is the Tab section perfect for? ==
	You have various options to use the Tab section for your Shopify themes:		You have various options to use the Tab section for your Shopify themes:

Line 16:		Line 16:
	:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]		:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]

	=== How to add Tab section ===		== How to add Tab section ==

	*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Tab''' section.		*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Tab''' section.
Line 28:		Line 28:
	{{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 Tab section==
	=== Tab global settings ===		=== Tab global settings ===
	From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.
Line 61:		Line 62:
	\|}		\|}

			==Use cases==
	=== Display the Product Description as a Tab section===		=== Display the Product Description as a Tab section===

Line 102:		Line 104:


	===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: /* Tab settings */

2025-03-27T01:57:16Z

Tab settings

← Older revision		Revision as of 01:57, 27 March 2025
Line 28:		Line 28:
	{{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}}

	=== Tab settings ===		=== Tab global settings ===
	From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.

An: /* Tab settings */

2024-11-07T04:22:09Z

Tab settings

← Older revision		Revision as of 04:22, 7 November 2024
Line 15:		Line 15:
	* Vertical tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/clothing here].		* Vertical tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/clothing here].
	:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]		:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]

			=== How to add Tab section ===

			*'''Step 1''': Add a '''Section Settings''' section that allows you to control the global settings of the '''Tab''' section.

			:In this special section, you can specify multi-column layouts, activate full width, determine the section's maximum width, choose a background color, and set global margins and padding, among other options.

			:{{Note\|Note: If you include the '''Tab''' in the core product information, skip the step for adding '''Section Settings'''. Just add the '''Tab'''. [[File:Ecb add section core product info.jpg\|800px\|frameless]]\|reminder}}

			*'''Step 2''': Add a '''Tab''' section and customize the settings according to your preferences.
			:[[File:Block tab.png\|1200x1200px]]
			{{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}}

	=== Tab settings ===		=== Tab settings ===
	From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.

	~~[[File:Block tab.png\|1200x1200px]]~~

	~~{{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}}~~
	{\| class="wikitable"		{\| class="wikitable"
	!Section settings		!Section settings

An: /* General Configuration */

2024-06-13T09:50:25Z

General Configuration

← Older revision		Revision as of 09:50, 13 June 2024
Line 16:		Line 16:
	:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]		:[[File:Ecb-tab-demo2.png\|border\|frameless\|800x800px]]

	=== ~~General Configuration~~ ===		=== Tab settings ===
	From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.		From the Shopify theme editor, click on '''Tabs''' on the sidebar to view the details of settings.

An: /* General Configuration */

2024-05-31T09:15:01Z

General Configuration

← Older revision		Revision as of 09:15, 31 May 2024
Line 21:		Line 21:
	[[File:Block tab.png\|1200x1200px]]		[[File:Block tab.png\|1200x1200px]]

	{{Note\|''If ~~you’re~~ new to our Easy Content Builder, please ~~refer to section~~ [[~~Section Settings~~\|Add ~~App~~ Sections]] ~~and [[Add Blocks\|Add ECB Blocks]]~~ for ~~more details~~ on how to ~~create and edit~~ a section ~~or a block~~.''\|~~info~~}}		{{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}}
	{\| class="wikitable"		{\| class="wikitable"
	!Section settings		!Section settings

An at 03:38, 27 May 2024

2024-05-27T03:38:22Z

← Older revision		Revision as of 03:38, 27 May 2024
Line 1:		Line 1:
			{{DISPLAYTITLE:Block: Tab}}

	This block lets you divide your content into tabs vertically.		This block lets you divide your content into tabs vertically.
	{{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: /* Display the Product Description as a Tab section */

2024-02-27T03:53:28Z

Display the Product Description as a Tab section

← Older revision		Revision as of 03:53, 27 February 2024
Line 50:		Line 50:
	\|}		\|}

	=== Create Tab metaobjects ===		=== Display the Product Description as a Tab section===

			Here are steps:

			'''Step 1''': Create or update a product description

			*From your Shopify admin, click '''Products''' to go to the Products page.
			*From the Products page, click '''Add Product'''.
			*Enter a product title and product description, along with additional details.
			:[[File:Tab-product-desc2.jpg\|frameless\|800x800px]]
			*Click '''Save''' product.

			'''Step 2''': Load the product description in a Tab

			Suppose that you already created a template using Easy Content Builder. Then, follow the steps below to edit that template and add the Description to the Tab section:

			{{Note\|If you've no template created by Easy Content Builder, create a new one by following [[Get_Started#Adding_your_first_template\|this guide]].\|inline}}

			*From your Shopify admin, click '''Apps''' > '''Easy Content Builder'''.
			*From the Easy Content Builder dashboard, click '''Manage Templates'''. Find the template that you want to edit, and then click '''Customize'''.
			* From the theme editor, click '''+ Add Section''' in the sidebar.
			*Scroll down the list of available blocks prebuilt by the Easy Content Builder and click '''Tabs'''.
			*Open the Tabs configuration panel and enter the item title. To display the product descriptions in a tab, enter the shortcode into the body field: '''[description]'''
			:[[File:Tab-show-product-desc.jpg\|frameless\|800x800px]]

			*Click '''Save'''.

			===Create Tab metaobjects===
	{{Note\|NOTE: The Tab metaobject feature is only available for the PRO plan. \|inline}}		{{Note\|NOTE: The Tab metaobject feature is only available for the PRO plan. \|inline}}

	===== When to use Tab metaobjects =====		=====When to use Tab metaobjects=====
	Metaobjects are handy when you want to add fully custom Tab content per product/page using a single template. That means some (or all) products/pages have unique Tab sections specific to each product/page, even though they use the same Template.		Metaobjects are handy when you want to add fully custom Tab content per product/page using a single template. That means some (or all) products/pages have unique Tab sections specific to each product/page, even though they use the same Template.

	[[File:Ecb-metaobject-usecase.jpg\|frameless\|500x500px]]		[[File:Ecb-metaobject-usecase.jpg\|frameless\|500x500px]]

	===== How to use Tab metaobjects =====		=====How to use Tab metaobjects=====
	Check out the [[Create MetaObjects#How to create Tabs/Accordions metaobjects\|setup guide]].		Check out the [[Create MetaObjects#How to create Tabs/Accordions metaobjects\|setup guide]].

	{{Note\|If you want to create a metaobject template for an entirely custom data structure such as Cooking Recipes, Ingredient Lists, Book metadata, Technical Product specifications, etc, use ECB Media and ECB Rich Text Metaobjects by following [[Create_MetaObjects#How_to_create_a_metaobject_template_using_Easy_Content_Builder\|this guide]].\|reminder}}		{{Note\|If you want to create a metaobject template for an entirely custom data structure such as Cooking Recipes, Ingredient Lists, Book metadata, Technical Product specifications, etc, use ECB Media and ECB Rich Text Metaobjects by following [[Create_MetaObjects#How_to_create_a_metaobject_template_using_Easy_Content_Builder\|this guide]].\|reminder}}


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

An: /* What is the Tab section perfect for? */

2024-02-27T03:51:03Z

What is the Tab section perfect for?

← Older revision		Revision as of 03:51, 27 February 2024
Line 5:		Line 5:
	You have various options to use the Tab section for your Shopify themes:		You have various options to use the Tab section for your Shopify themes:

	* Display the default Product Description in ~~the Accordion~~: [[File:Tab-product-desc2.jpg\|frameless\|800x800px]]		* Display the default Product Description in a Tab section: [[File:Tab-product-desc2.jpg\|frameless\|800x800px]]

	* Add custom Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].		* Add custom Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].

An: /* What is the Tab section perfect for? */

2024-02-27T03:50:41Z

What is the Tab section perfect for?

← Older revision		Revision as of 03:50, 27 February 2024
Line 5:		Line 5:
	You have various options to use the Tab section for your Shopify themes:		You have various options to use the Tab section for your Shopify themes:

	* Display the default Product Description in the Accordion: [[File:Tab-product-~~desc~~.jpg\|frameless\|800x800px]]		* Display the default Product Description in the Accordion: [[File:Tab-product-desc2.jpg\|frameless\|800x800px]]

	* Add custom Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].		* Add custom Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].

An at 03:49, 27 February 2024

2024-02-27T03:49:17Z

← Older revision		Revision as of 03:49, 27 February 2024
Line 5:		Line 5:
	You have various options to use the Tab section for your Shopify themes:		You have various options to use the Tab section for your Shopify themes:

	* Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].		* Display the default Product Description in the Accordion: [[File:Tab-product-desc.jpg\|frameless\|800x800px]]

			* Add custom Product Information tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/reading-desk-lamp here].
	:[[File:Ecb-tab-demo.png\|border\|frameless\|800x800px]]		:[[File:Ecb-tab-demo.png\|border\|frameless\|800x800px]]
	* Specification tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/sport here].		* Specification tabs: see an example [https://easy-content-builder-demo.myshopify.com/products/sport here].
Line 36:		Line 38:
	\|Body		\|Body
	\|Enter content for each tab.		\|Enter content for each tab.
			To display the product descriptions in a tab, enter the shortcode: '''[description]'''
	\|-		\|-
	\|Custom HTML		\|Custom HTML