Template for Standard Pages - Revision history

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

2024-05-16T04:02:12Z

How to change to existing fonts on Shopify

← Older revision		Revision as of 04:02, 16 May 2024
Line 77:		Line 77:
	* 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:59:03Z

Adjust the font size, rounded corners, background color

← Older revision		Revision as of 03:59, 16 May 2024
Line 71:		Line 71:

	::[[File:Ecb sections padding margin.jpg\|frameless\|1917x1917px]]		::[[File:Ecb sections padding margin.jpg\|frameless\|1917x1917px]]

			====== How to change to existing fonts on Shopify ======

			* From your Shopify admin, go to '''Online Store''' > '''Themes'''.
			* Next to the theme that you want to edit, click '''Customize'''.
			* Use the Template drop-down menu to select a template.
			* Click on '''Theme Settings''' (the gear icon) > '''Typography'''
			:[[File:Ecb-css-theme-scope.jpg\|frameless\|386x386px]]
			* In your '''Typography''' settings, click the '''Change''' button to update your headings and body text fonts.
			:[[File:Shopify theme font config.jpg\|border\|frameless\|800x800px]]

			:{{Note\|'''Handy tips''': Check the checklist to pick a font combination (Plus 10 free font pairings to enhance your Shopify store): [https://posstack.com/blog/top-free-font-pairings-for-shopify view details].\|reminder}}

	======Adjust the font size, rounded corners, background color======		======Adjust the font size, rounded corners, background color======

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

2024-02-29T04:04:30Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 04:04, 29 February 2024
Line 72:		Line 72:
	::[[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:33:10Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 03:33, 29 February 2024
Line 73:		Line 73:

	======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]]

	===Step to customize your Collection pages:===		===Step to customize your Collection pages:===

An: /* Add new content blocks within a section */

2024-02-26T04:06:54Z

Add new content blocks within a section

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

	[[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 content blocks within a section */

2024-02-23T07:38:37Z

Add new content blocks within a section

← Older revision		Revision as of 07:38, 23 February 2024
Line 27:		Line 27:
	:[[File:Ecb section column config.jpg\|frameless\|1024x1024px]]\|inline}}		:[[File:Ecb section column config.jpg\|frameless\|1024x1024px]]\|inline}}

	====== Add new content blocks within a section======		======Add new content blocks within a section======
	Blocks refer to the prebuilt content blocks the Easy Content Builder app provides, such as [[Block Accordion\|Accordion]], [[Block Before and After Slider\|Before & After Slider]], [[Block Video\|Video]], [[Block Featured Products\|Featured Products]], [[Block Custom HTML\|Custom HTML]], etc. Each template can have multiple sections, and each section has a specific variety of blocks you can add.

	After adding a Section Settings, you can add ~~any~~ content blocks ~~made available~~ to the section you've created.		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.

			{{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}}

	~~{{Note\|Learn how to add a block to your section: read the~~ [[~~Add Blocks~~\|~~setup guide~~]]~~.\|info}}~~		[[File:Ecb-block-v2.jpg\|border\|frameless\|800x800px]]

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

An: /* Add Section Settings block */

2024-02-23T07:37:48Z

Add Section Settings block

← Older revision		Revision as of 07:37, 23 February 2024
Line 17:		Line 17:
	Below are common customizations you might want to start with:		Below are common customizations you might want to start with:

	======Add Section Settings ~~block~~======		======Add Section Settings======
	You should always add a [[Block Section Settings\|Section Settings]] first. Why you need ~~this block~~:		You should always add a [[Block Section Settings\|Section Settings]] first.
			*Learn [[Block Section Settings\|how to add the Section Settings]].
			*[[Section Settings#Multi-column Layout Setup\|How to define multiple-column layouts]].

			{{Note\|'''Good to know''': Why you need [[Block Section Settings\|Section Settings]]:
	*To determine your ideal layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts)		*To determine your ideal layouts (1-column, 2-column, 3-column, 4-column, or hierarchical layouts)
	*And to control your global configurations (full-width layout, mask color, mask image, background video, parallax animation, etc.)		*And to control your global configurations (full-width layout, mask color, mask image, background video, parallax animation, etc.)
			:[[File:Ecb section column config.jpg\|frameless\|1024x1024px]]\|inline}}
	~~{{Note\|*Learn how to add a Section Settings block~~: ~~read the~~ [[~~Block Section Settings\|setup guide]].~~
	*Define multiple-column layouts: ~~read the [[Section Settings#Multi-~~column ~~Layout Setup~~\|~~setup guide~~]].\|~~info~~}}

	====== Add new content blocks within a section======		====== Add new content blocks within a section======

An at 07:03, 23 February 2024

2024-02-23T07:03:56Z

← Older revision		Revision as of 07:03, 23 February 2024
Line 1:		Line 1:
	{{Note\|This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc. \|inline}}		{{Note\|This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc. \|inline}}
	{{Note\|Related Guides:		{{Note\|Related Guides:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>		*[[Create Template For Multiple Pages\|How to create a custom template for multiple pages (product/blog post/pages)]].<br/>
	*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].		*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].
	*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}

An: /* Common customization */

2024-02-23T07:01:42Z

Common customization

← Older revision		Revision as of 07:01, 23 February 2024
Line 14:		Line 14:
	:[[File:Ecb-customize-home.png\|border\|frameless\|800x800px]]		:[[File:Ecb-customize-home.png\|border\|frameless\|800x800px]]

	====Common ~~customization~~====		====Common customizations====
	Below are common ~~customization~~ you might want to start with:		Below are common customizations you might want to start with:

	======Add Section Settings block======		======Add Section Settings block======

An at 06:58, 23 February 2024

2024-02-23T06:58:29Z

← Older revision		Revision as of 06:58, 23 February 2024
Line 2:		Line 2:
	{{Note\|Related Guides:		{{Note\|Related Guides:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>
	*[[Create_Template_For_Single_Page\|How to create a template for a single page (product, blog post, etc.)]].		*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].
	*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}

← Older revision		Revision as of 07:03, 23 February 2024
Line 1:		Line 1:
	{{Note\|This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc. \|inline}}		{{Note\|This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc. \|inline}}
	{{Note\|Related Guides:		{{Note\|Related Guides:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>		*[[Create Template For Multiple Pages\|How to create a custom template for multiple pages (product/blog post/pages)]].<br/>
	*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].		*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].
	*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}

← Older revision		Revision as of 06:58, 23 February 2024
Line 2:		Line 2:
	{{Note\|Related Guides:		{{Note\|Related Guides:
	*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>		*[[Create Template For Multiple Pages\|How to create a custom template for multiple product/blog post/pages]].<br/>
	*[[Create_Template_For_Single_Page\|How to create a template for a single page (product, blog post, etc.)]].		*[[Create_Template_For_Single_Page\|How to create a custom template for a single page (product, blog post, etc.)]].
	*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}		*[[Create_MetaObjects\|How to create a Metaobjects template]]\|reminder}}