Create Template For Single Page - Revision history

An: /* How to change to existing fonts on Shopify */

2024-05-16T04:03:17Z

How to change to existing fonts on Shopify

← Older revision		Revision as of 04:03, 16 May 2024
Line 95:		Line 95:
	* Next to the theme that you want to edit, click '''Customize'''.		* Next to the theme that you want to edit, click '''Customize'''.
	* Use the Template drop-down menu to select a template.		* Use the Template drop-down menu to select a template.
	* Click on '''Theme Settings''' (the gear icon) > '''Typography'''		* Click on '''Theme Settings''' (the gear icon) > '''Typography''' (where you can change the font of all pages and templates on your Shopify store)
	:[[File:Ecb-css-theme-scope.jpg\|frameless\|386x386px]]		:[[File:Ecb-css-theme-scope.jpg\|frameless\|386x386px]]
	* In your '''Typography''' settings, click the '''Change''' button to update your headings and body text fonts.		* In your '''Typography''' settings, click the '''Change''' button to update your headings and body text fonts.

An: /* Adjust the font size, rounded corners, background color */

2024-05-16T03:57:47Z

Adjust the font size, rounded corners, background color

@@ Line 89: / Line 89: @@
 ::*Block level: refers to the padding/margin of a specific block within a section (One section might come with multiple blocks in it.)
 ::[[File:Ecb sections padding margin.jpg|frameless|1917x1917px]]
 ======Adjust the font size, rounded corners, background color======

An: /* Adjust the font size, border radius, background color */

2024-02-29T04:04:10Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 04:04, 29 February 2024
Line 90:		Line 90:
	::[[File:Ecb sections padding margin.jpg\|frameless\|1917x1917px]]		::[[File:Ecb sections padding margin.jpg\|frameless\|1917x1917px]]

	======Adjust the font size, ~~border radius~~, background color======		======Adjust the font size, rounded corners, background color======
	*If you want to change your font size, button, background, border radius (rounded corners), etc., you can do so using the ECB's Custom CSS~~: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial]~~.		*If you want to change your font size, button, global background, border radius (rounded corners), etc., you can do so using the ECB's Custom CSS.

	:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''~~Automatically Generate~~ CSS''' option - a handy ~~way~~ to ~~customize your theme '''without coding'''~~. [[Custom CSS\|Learn more]]. \|reminder}}		:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''CSS Code Generator''' option - a handy option to generate CSS code automatically. [[Custom CSS#Adjust the font size, border radius, background color\|Learn more]]. \|reminder}}
	:[[File:Ecb-custom-css-v2.jpg\|border\|frameless\|800x800px]]		:[[File:Ecb-custom-css-v2.jpg\|border\|frameless\|800x800px]]

An: /* Adjust the font size, border radius, background color */

2024-02-29T03:32:40Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 03:32, 29 February 2024
Line 91:		Line 91:

	======Adjust the font size, border radius, background color======		======Adjust the font size, border radius, background color======
	*If you want to change your font size, button, background, border radius, etc., you can do so using the ECB's Custom CSS: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].		*If you want to change your font size, button, background, border radius (rounded corners), etc., you can do so using the ECB's Custom CSS: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

	:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}		:{{Note\|For Pro plan: In addition to the standard Custom CSS feature, you have an '''Automatically Generate CSS''' option - a handy way to customize your theme '''without coding'''. [[Custom CSS\|Learn more]]. \|reminder}}
	:[[File:Ecb-custom-css.jpg\|border\|frameless\|~~1024x1024px~~]]		:[[File:Ecb-custom-css-v2.jpg\|border\|frameless\|800x800px]]

	===Preview your custom template===		===Preview your custom template===

An: /* Preview your custom template */

2024-02-27T04:02:24Z

Preview your custom template

← Older revision		Revision as of 04:02, 27 February 2024
Line 104:		Line 104:
	#In the sidebar, click '''Change'''.		#In the sidebar, click '''Change'''.
	#Select the product or page you want to preview with the selected template.		#Select the product or page you want to preview with the selected template.

			===Delete a template===

			If you want to delete a template that you created using Easy Content Builder, here are the steps:
			* From your Shopify admin, click Apps > '''Easy Content Builder'''.
			* From the Easy Content Builder dashboard, click '''Manage Templates'''.
			* Then select the template that you want to remove and click '''Delete'''.

			[[File:Manage template delete.png\|1200x1200px]]

	===Next steps===		===Next steps===

An: /* Add new blocks to that section as you wish */

2024-02-26T04:06:14Z

Add new blocks to that section as you wish

← Older revision		Revision as of 04:06, 26 February 2024
Line 53:		Line 53:

	[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]		[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]

			======Set the Text color======
			The Text color setting is located in the Section Settings. Enter the HEX color value or choose from your currently used color (if any). Then, the new text's color will be applied to all content blocks within this section.

			[[File:Ecb text color.jpg\|frameless\|492x492px]]

			{{Note\|Ensure you also update the Background Color or Container Background Color (under the same Section Settings panel) to pair with your new text's color. \|reminder}}

			======Set the Background Color======

			'''Step 1''': You can set the background color using '''CSS''' or '''Gradient'''.

			[[File:Ecb-bg-color-css.png\|frameless\|446x446px]]

			If you add a HEX color value using the CSS option and want to change to the Gradient color, just remove the HEX color and switch to the Gradient mode.

			[[File:Ecb-bg-color-gradient.png\|frameless]]

			The background color will be applied full-width to the whole section.

			{{Note\|Ensure you adjust the Text Color (under the same Section Settings panel) to keep the text visible and highly contrasting.\|inline}}

			'''Step 2''' (Optional): Set the '''Padding Top'''/'''Padding Bottom''' (under the same Section Settings panel) to add desired horizontal space to the section.

			======Set the Container Background color======
			[[File:Ecb-container-bg-color.png\|frameless]]

			Use the Container Background Color setting to set the background color for the content area instead of the full-width background. You can define the background color using '''CSS''' or '''Gradient'''.

			{{Note\|Ensure you set the Container Padding Top/Padding Bottom (under the same Section Settings panel) to add the desired horizontal space to the container. \|inline}}[[File:Bg-container-demo.jpg\|frameless\|800x800px]]

	======Adjust the padding/margin of each section======		======Adjust the padding/margin of each section======

An: /* Add new blocks to that section as you wish */

2024-02-23T07:35:59Z

Add new blocks to that section as you wish

← Older revision		Revision as of 07:35, 23 February 2024
Line 48:		Line 48:

	======Add new blocks to that section as you wish ======		======Add new blocks to that section as you wish ======
	::{{Note\|		After adding a [[Block Section Settings\|Section Settings]], you can add many content blocks to the section you've created. These content blocks will be displayed in different positions within the section, depending on the Desktop/Mobile Layouts you configure.
	~~::*See~~ [https://easy-content-builder-demo.myshopify.com/pages/~~multi-column-layouts pre~~-~~built sections examples~~]
	~~::*Learn how to~~ [[~~Add Blocks~~\|~~add app blocks~~]]~~.}}~~		{{Note\|Each template can have multiple sections, and each section has a specific variety of blocks you can add. View all sections available [https://easy-content-builder-demo.myshopify.com/pages/section-variations here].\|inline}}

			[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]

	======Adjust the padding/margin of each section======		======Adjust the padding/margin of each section======

An: /* Overview */

2024-02-23T07:08:06Z

Overview

← Older revision		Revision as of 07:08, 23 February 2024
Line 8:		Line 8:

	===== Overview =====		===== Overview =====
	[[File:Ecb-usecase-single.jpg\|frameless\|1024x1024px]]		Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.[[File:Ecb-usecase-single.jpg\|frameless\|1024x1024px]]

	===== Tutorial Video =====		===== Tutorial Video =====

An at 06:56, 23 February 2024

2024-02-23T06:56:06Z

← Older revision		Revision as of 06:56, 23 February 2024
Line 3:		Line 3:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].
	*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]		*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]
	*[[Create_MetaObjects\|How to create a ~~Metaobjects~~ template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobject template]]\|reminder}}
	*How to customize Homepage, Collection pages\|reminder}}


	===Getting Started ===		===Getting Started ===

An at 06:55, 23 February 2024

2024-02-23T06:55:48Z

← Older revision		Revision as of 06:55, 23 February 2024
Line 1:		Line 1:
	{{Note\|This tutorial will guide you through 4-easy-steps to build ~~your first~~ custom template for Product, Blog Post, ~~and~~ Store Page ~~and assign it to a single page using the Easy Content Builder app. <br/>~~		{{Note\|This tutorial will guide you through 4-easy-steps to build a custom template for a single page (Product, Blog Post, or Store Page).\|inline}}
	Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.\|inline}}		{{Note\|Related Guides:
	{{Note\|~~If you want each page (product, blog post, etc.) to have its own unique template, this guide is for you.<br/>~~		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].
	~~If you want~~ to create ~~one~~ template ~~and apply this same template to~~ multiple pages ~~at once, follow~~ [[~~Create~~ Template ~~For Multiple~~ Pages\|~~this setup guide~~]].		*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]
	~~If you want~~ to create a Metaobjects template~~, follow [[Create_MetaObjects\|this setup guide~~]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}
	~~{{Note\|To~~ customize Homepage or Collection pages~~, follow section [[Template for Standard Pages~~\|~~Template for Standard pages]].\|inline~~}}		*How to customize Homepage, Collection pages\|reminder}}

← Older revision		Revision as of 06:56, 23 February 2024
Line 3:		Line 3:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].
	*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]		*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]
	*[[Create_MetaObjects\|How to create a ~~Metaobjects~~ template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobject template]]\|reminder}}
	*How to customize Homepage, Collection pages\|reminder}}


	===Getting Started ===		===Getting Started ===

← Older revision		Revision as of 06:55, 23 February 2024
Line 1:		Line 1:
	{{Note\|This tutorial will guide you through 4-easy-steps to build ~~your first~~ custom template for Product, Blog Post, ~~and~~ Store Page ~~and assign it to a single page using the Easy Content Builder app. <br/>~~		{{Note\|This tutorial will guide you through 4-easy-steps to build a custom template for a single page (Product, Blog Post, or Store Page).\|inline}}
	Templates are a collection of sections that are pre-built by Easy Content Builder. Once you add a template to your theme, you can add, edit, reorder, or remove any section within that template to customize your theme.\|inline}}		{{Note\|Related Guides:
	{{Note\|~~If you want each page (product, blog post, etc.) to have its own unique template, this guide is for you.<br/>~~		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].
	~~If you want~~ to create ~~one~~ template ~~and apply this same template to~~ multiple pages ~~at once, follow~~ [[~~Create~~ Template ~~For Multiple~~ Pages\|~~this setup guide~~]].		*[[Template for Standard Pages\|How to customize Homepage, Collection pages]]
	~~If you want~~ to create a Metaobjects template~~, follow [[Create_MetaObjects\|this setup guide~~]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}
	~~{{Note\|To~~ customize Homepage or Collection pages~~, follow section [[Template for Standard Pages~~\|~~Template for Standard pages]].\|inline~~}}		*How to customize Homepage, Collection pages\|reminder}}