Custom CSS - Revision history

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

2025-11-03T04:27:14Z

Adjust the button style, font size, border radius, background color

← Older revision		Revision as of 04:27, 3 November 2025
Line 65:		Line 65:

	:{{Note\|'''When to use''': This option means you save the custom CSS under the Easy Content Builder > Custom CSS. The custom code was automatically generated and pasted into this field in Step 2. Choose this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}		:{{Note\|'''When to use''': This option means you save the custom CSS under the Easy Content Builder > Custom CSS. The custom code was automatically generated and pasted into this field in Step 2. Choose this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}
	:[[File:Ecb-css~~-app~~-scope.~~png~~\|frameless~~\|800x800px~~]]		:[[File:Ecb-custom-css-scope.jpg\|800px\|frameless]]
	:*Hit the Save button and clear the browser cache to see the changes in your storefront.		:*Hit the Save button and clear the browser cache to see the changes in your storefront.

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

2025-11-03T04:22:31Z

Adjust the button style, font size, border radius, background color

← Older revision		Revision as of 04:22, 3 November 2025
Line 51:		Line 51:
	'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.)		'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.)

	[[File:Ecb-~~css~~-~~generator~~.~~gif~~\|frameless~~\|640x640px~~]]		[[File:Ecb-cusstom-font-border.jpg\|800px\|frameless]]

	Example: To change the Button color, you can:		Example: To change the Button color, you can:

An: /* Custom Theme Style (Pro version only) */

2024-10-18T07:17:36Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 07:17, 18 October 2024
Line 42:		Line 42:
	In addition to the standard Custom CSS feature, the Easy Content Builder Pro version provides CSS Code Generator, a handy option to generate CSS code automatically.		In addition to the standard Custom CSS feature, the Easy Content Builder Pro version provides CSS Code Generator, a handy option to generate CSS code automatically.

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

	At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.		At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.

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

2024-03-26T03:07:19Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 03:07, 26 March 2024
Line 45:		Line 45:
	At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.		At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.

	==== Adjust the font size, border radius, background color ====		==== Adjust the button style, font size, border radius, background color ====
	Here are steps to add customization to your theme:		Here are steps to add customization to your theme:

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

2024-03-26T03:06:40Z

Adjust the font size, border radius, background color

← Older revision		Revision as of 03:06, 26 March 2024
Line 51:		Line 51:

	[[File:Ecb-css-generator.gif\|frameless\|640x640px]]		[[File:Ecb-css-generator.gif\|frameless\|640x640px]]

			Example: To change the Button color, you can:

			# Under the '''Backgrounds''' tab, change the '''Primary Color''' or '''Secondary Color''' as you wish (These colors are used for the button)
			# (Optional) Under the '''Colors''' tab, change the '''Emphasis Color''' as you wish (This color is applied to the button's text)

	'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).		'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).

An: /* Custom Theme Style (Pro version only) */

2024-02-29T03:56:20Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 03:56, 29 February 2024
Line 45:		Line 45:
	At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.		At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.

			==== Adjust the font size, border radius, background color ====
	Here are steps to add customization to your theme:		Here are steps to add customization to your theme:

Line 76:		Line 77:

	:		:
	:'''Option 3''': Theme scope		: '''Option 3''': Theme scope

	:{{Note\|'''When to use''': Choose this option if you want to add custom CSS to your entire theme that will be applied to all pages (except the Checkout page)\|inline}}		:{{Note\|'''When to use''': Choose this option if you want to add custom CSS to your entire theme that will be applied to all pages (except the Checkout page)\|inline}}

An: /* Custom Theme Style (Pro version only) */

2024-02-29T03:55:08Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 03:55, 29 February 2024
Line 45:		Line 45:
	At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.		At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.

	~~[[File~~:~~Ecb-custom-css-generator.jpg\|border\|frameless\|600x600px]]~~		Here are steps to add customization to your theme:

	~~Here are steps to add customization to your theme~~:		'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.)

	~~'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.)~~ [[File:Ecb-css-generator.gif\|frameless\|640x640px]]		[[File:Ecb-css-generator.gif\|frameless\|640x640px]]

	'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).		'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).

An: /* Custom Theme Style (Pro version only) */

2024-02-29T03:54:17Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 03:54, 29 February 2024
Line 49:		Line 49:
	Here are steps to add customization to your theme:		Here are steps to add customization to your theme:

	'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.)		'''Step 1''': Under the Custom CSS section > '''CSS Code Generator''', change the custom style you want (the color for background, text, or border-radius, etc.) [[File:Ecb-css-generator.gif\|frameless\|640x640px]]

	'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).		'''Step 2''': Hit the '''Generate''' button (the new CSS code - from your selected settings - applied to the ECB blocks will be automatically generated and filled in the Custom CSS field).

An: /* Custom Theme Style (Pro version only) */

2024-02-29T03:30:14Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 03:30, 29 February 2024
Line 42:		Line 42:
	In addition to the standard Custom CSS feature, the Easy Content Builder Pro version provides CSS Code Generator, a handy option to generate CSS code automatically.		In addition to the standard Custom CSS feature, the Easy Content Builder Pro version provides CSS Code Generator, a handy option to generate CSS code automatically.

	[[File:Ecb-custom-css-v2.jpg\|border\|frameless\|800x800px]]At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.		[[File:Ecb-custom-css-v2.jpg\|border\|frameless\|800x800px]]
			At present, not all CSS properties are supported in the '''CSS Code''' '''Generator'''. However, we believe the current available options can help you make signficant adjustments to your Shopify theme without coding.

	[[File:Ecb-custom-css-generator.jpg\|border\|frameless\|600x600px]]		[[File:Ecb-custom-css-generator.jpg\|border\|frameless\|600x600px]]

An: /* Custom Theme Style (Pro version only) */

2024-02-28T10:11:00Z

Custom Theme Style (Pro version only)

← Older revision		Revision as of 10:11, 28 February 2024
Line 57:		Line 57:

	:{{Note\|'''When to use''': This option means you save the custom CSS under the Easy Content Builder > Custom CSS. The custom code was automatically generated and pasted into this field in Step 2. Choose this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}		:{{Note\|'''When to use''': This option means you save the custom CSS under the Easy Content Builder > Custom CSS. The custom code was automatically generated and pasted into this field in Step 2. Choose this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}
	[[File:Ecb-css-app-scope.png\|frameless\|800x800px]]		:[[File:Ecb-css-app-scope.png\|frameless\|800x800px]]
	*Hit the Save button and clear the browser cache to see the changes in your storefront.		:*Hit the Save button and clear the browser cache to see the changes in your storefront.

	:		:
Line 65:		Line 65:
	:{{Note\|'''When to use''': Use this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}		:{{Note\|'''When to use''': Use this option if you want the CSS to be scoped to all pages created using Easy Content Builder.\|inline}}

	*Copy the custom CSS (automatically generated in Step 2)		:*Copy the custom CSS (automatically generated in Step 2)
	*Then, go to Online Store > '''Themes''' (from your Shopify admin)		:*Then, go to Online Store > '''Themes''' (from your Shopify admin)
	*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 the section that you want to add CSS to.		:*Click the section that you want to add CSS to.
	:[[File:Ecb-css-scope.jpg\|frameless\|1024x1024px]]		:[[File:Ecb-css-scope.jpg\|frameless\|1024x1024px]]
	*At the bottom of the section properties panel, click '''Custom CSS'''.		:*At the bottom of the section properties panel, click '''Custom CSS'''.
	*Paste the custom CSS into the Custom CSS field and click '''Save'''.		:*Paste the custom CSS into the Custom CSS field and click '''Save'''.

	:		:
Line 81:		Line 81:
	:Copy the generated Custom CSS to your theme (supposed that your theme supports adding custom CSS code). We take the Dawn theme as an example; you can add the generated Custom CSS to the Custom CSS section via Shopify Theme Editor:		:Copy the generated Custom CSS to your theme (supposed that your theme supports adding custom CSS code). We take the Dawn theme as an example; you can add the generated Custom CSS to the Custom CSS section via Shopify Theme Editor:

	*From your Shopify admin, go to '''Online Store''' > '''Themes'''.		:*From your Shopify admin, go to '''Online Store''' > '''Themes'''.
	*Next to the theme that you want to edit, click '''Customize'''.		:*Next to the theme that you want to edit, click '''Customize'''.
	*Click '''Theme settings'''.		:*Click '''Theme settings'''.
	:[[File:Ecb-css-theme-scope.jpg\|frameless\|386x386px]]		:[[File:Ecb-css-theme-scope.jpg\|frameless\|386x386px]]
	*Click '''Custom CSS'''.		:*Click '''Custom CSS'''.
	:[[File:Custom css dawn.jpg\|border\|frameless\|1024x1024px]]		:[[File:Custom css dawn.jpg\|border\|frameless\|1024x1024px]]
	*Add your code and click '''Save'''.		:*Add your code and click '''Save'''.