Template for Standard Pages: Difference between revisions

From Posstack.com Documentation
mNo edit summary
mNo edit summary
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc.
{{Note|This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc. |inline}}
{{Note|If you want to create a custom template and assign this same template to multiple product/blog post/pages at once, follow [[Create Template For Multiple Pages|this setup guide]].<br/>
If you want each page (product, blog post, etc.) to have its own unique template, follow [[Create_Template_For_Single_Page|this setup guide]].
If you want to create a Metaobjects template, follow [[Create_MetaObjects|this setup guide]]|reminder}}


< to be updated>
===Steps to customize your Homepage:===
 
====How it works:====
*From your Shopify admin, go to Online Store > '''Themes'''.
*Find the theme you want to edit, then click '''Customize'''.
:[[File:Ecb-customize.png|border|frameless|800x800px]]
*From the dropdown menu in the Theme Editor, click '''Homepage''' and start adding the prebuilt sections that Easy Content provides.
:[[File:Ecb-customize-home.png|border|frameless|800x800px]]
 
====Common customization====
Below are common customization you might want to start with:
 
======Add Section Settings block======
You should always add a [[Block Section Settings|Section Settings]] first. Why you need this block: 
*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.)
 
{{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======
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.
 
{{Note|Learn how to add a block to your section: read the [[Add Blocks|setup guide]].|info}}
 
======Adjust the padding/margin of each section======
The Easy Content Builder lets you adjust the space (padding and margin) between elements at two levels:
*Section Settings level: refers to the global padding configurations for a section.
*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, 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].
 
:{{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]]
 
===Step to customize your Collection pages:===
 
====How it works====
*From your Shopify admin, go to '''Online Store''' > '''Themes'''.
*Find the theme you want to edit, then click '''Customize'''.
:[[File:Ecb-customize.png|border|frameless|800x800px]]
*From the dropdown menu in the Theme Editor, click the '''Collections''', then click on '''Default Collection''' (if you want to customize your default Collection page), or scroll down and click '''Create Template''' (to create your new Collection template).
:[[File:Ecb-customize-collection.png|border|frameless|800x800px]]
*Next, fill in the '''Name''' and '''Based on''' fields.
:[[File:Ecb-collection-new-template-form.png|border|frameless|800x800px]]
*Then, start customizing your template in your Shopify theme editor.
 
==== Common customization ====
You can start adding sections to your Collection pages following exact steps like customizing the [[Template for Standard Pages#Common customization|Homepage]]. Scroll up this page for a step-by-step guide.
 
===Next steps===
 
======Set up multi-column layouts ======
*Learn how to set up multi-column layouts:
::*[[Section Settings|1-col boxed layout]]
::*[[Section Settings|1-col with Background Image]]
::*[[Section Settings|2-col with Flexible Col Width]]
::*[[Section Settings|2-col with Blank Sections]]
::*Hierarchical Grids ([https://posstack.com/blog/easy-content-builder-new-hierarchical-grids 6 layout options])
:::{{note|We suggest you install the '''Theme Section Kit''' to customize your Shopify theme faster. This template contains prebuilt sections (Free and Pro versions) that you can edit, reorder, or hide through your Theme Editor. Preview the '''Theme Section Kit''' [https://easy-content-builder-demo.myshopify.com/pages/ecb-prebuilt-theme-sections here].|info}}
 
======Customize with Custom CSS======
*Learn how to customize your Shopify themes with Custom CSS using Easy Content Builder: [https://www.youtube.com/watch?v=gN20FiUvVZc 5-min video tutorial].

Revision as of 16:26, 28 November 2023

This guide explains how to customize your Shopify standard pages like Homepage, Collection, etc.
If you want to create a custom template and assign this same template to multiple product/blog post/pages at once, follow this setup guide.

If you want each page (product, blog post, etc.) to have its own unique template, follow this setup guide.

If you want to create a Metaobjects template, follow this setup guide

Steps to customize your Homepage:

How it works:

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, then click Customize.
Ecb-customize.png
  • From the dropdown menu in the Theme Editor, click Homepage and start adding the prebuilt sections that Easy Content provides.
Ecb-customize-home.png

Common customization

Below are common customization you might want to start with:

Add Section Settings block

You should always add a Section Settings first. Why you need this block:

  • 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.)
*Learn how to add a Section Settings block: read the setup guide.
Add new content blocks within a section

Blocks refer to the prebuilt content blocks the Easy Content Builder app provides, such as Accordion, Before & After Slider, Video, Featured Products, 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.

Learn how to add a block to your section: read the setup guide.
Adjust the padding/margin of each section

The Easy Content Builder lets you adjust the space (padding and margin) between elements at two levels:

  • Section Settings level: refers to the global padding configurations for a section.
  • Block level: refers to the padding/margin of a specific block within a section (One section might come with multiple blocks in it.)
Ecb sections padding margin.jpg
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: 5-min video tutorial.
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. Learn more.
Ecb-custom-css.jpg

Step to customize your Collection pages:

How it works

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, then click Customize.
Ecb-customize.png
  • From the dropdown menu in the Theme Editor, click the Collections, then click on Default Collection (if you want to customize your default Collection page), or scroll down and click Create Template (to create your new Collection template).
Ecb-customize-collection.png
  • Next, fill in the Name and Based on fields.
Ecb-collection-new-template-form.png
  • Then, start customizing your template in your Shopify theme editor.

Common customization

You can start adding sections to your Collection pages following exact steps like customizing the Homepage. Scroll up this page for a step-by-step guide.

Next steps

Set up multi-column layouts
  • Learn how to set up multi-column layouts:
We suggest you install the Theme Section Kit to customize your Shopify theme faster. This template contains prebuilt sections (Free and Pro versions) that you can edit, reorder, or hide through your Theme Editor. Preview the Theme Section Kit here.
Customize with Custom CSS
  • Learn how to customize your Shopify themes with Custom CSS using Easy Content Builder: 5-min video tutorial.