Sections overview ​

Shapes theme includes Templates for building common store pages like the Homepage and Product page. Within each template, Shapes provides reusable Sections and Blocks for adding elements into your store's pages - refer to Theme structure.

Instead of spending time recreating the same elements for every page, use Shapes' templates, sections and blocks for a convenient way to build store pages quickly, while maintaining a consistent design across your store.

In the previous video, the section settings menu for a store's homepage is displayed in Theme editor. The Drag icon is selected to rearrange a Featured collection section above a Comparison table section.

Theme structure ​

A typical store has different types of pages, like Product pages and Blog post pages. Shapes provides a convenient template for each type of page. For example:

• the Home page template defines what's displayed on your store's homepage.

• the FAQ page template defines what's displayed on the frequently asked questions page, etc.

Shapes' templates are comprised of sections and blocks.

• Section. Within a template, a container for an area of content, like a header or footer, is called a section.

• Block. A block is an element of content inside a section, like a product, a video, or an image with text.

Page templates ​

Shapes contains default and additional page templates.

• Default. All Shopify themes include a set of default page templates for creating common store pages. Shapes provides pre-configured store pages, created from its default page templates, including a homepage and checkout page.

• Additional. Additional page templates are used to create store pages that are unique to Shapes. To use Shapes' additional page templates, you must assign products/ pages to them. Refer to Shopify help: Templates.

Shapes' page templates are listed below.

• Home page

• Products

  • Default product
  • Preorder *

• Collections

  • Default collection

• Collections list

• Pages

  • Default page
  • Contact *

• Blogs

  • Default blog

• Blog posts

  • Default blog post (article)

• Cart

• Checkout

• Classic customer accounts

  • Customer account
  • Customer activate account
  • Customer addresses
  • Customer login
  • Customer order
  • Customer register
  • Customer reset password

• Others

  • Password
  • 404 page
  • Search
  • Gift card

Static, content and template sections ​

By default, Shapes' templates are pre-configured with sections and blocks that are most relevant to a page's purpose. Templates can include the following types of section.

• Static sections are displayed in a pre-set area on most pages.

• Content sections can be added into almost every page.

• Template sections are available only on specific pages.

Static sections ​

With the exception of the Checkout, Password and Giftcard templates, by default, all templates include the static sections described in the following table.

Typically, static sections cannot be fully removed or rearranged without altering Shapes' code (recommended for expert users only). However, you can hide a section by adjusting its settings - refer to Shopify help: Hiding blocks and Shopify help: Edit a section.

Content sections ​

The content sections described in the following table can be added into or removed from any page, except the Checkout and Giftcard pages.

Template sections ​

A template section provides a special content area to a particular template. Each template section is only available on specific pages. For example, only Shapes' 404 page template includes the 404 page template section.

The following table describes Shapes' template sections and the specific templates they belong to.

Configure blocks inside a section ​

The names of the blocks inside a section generally correspond to the name of the section that contains them. For example, a default Faq section contains Question blocks, and a Testimonials section contains Testimonial blocks.

Some sections have more than one type of block. For example, by default, a Product section is pre-configured with blocks for (product) Title, Price, Variant picker, and Buy buttons. Optional blocks can also be added into some sections, where relevant.

Configure, add, remove, hide, show, move or duplicate blocks and sections ​

To configure, add, remove, hide, show, move or duplicate a block or section:

1. In Customize theme, select a template that contains the section or block you want to configure.

2. From the side menu, select the required section.

3. From the section menu, choose one of the following tasks.

• To configure a block or section, select the block or section, and then adjust the required setting.

  For example, the following image shows a Image with text slideshow block selected inside an Image with text slideshow section.

  

• To add a block or section, select Add <block> or <section>, and then choose a block or section to add.

  For example, the following image shows the Add block option to add an Image with text slideshow block inside an Image with text slideshow section.

  

• To remove a block or section, choose a block or section to remove, and then select Remove <block> or <section>.

  For example, the following image shows the option to remove an Image with text slideshow block from an Image with text slideshow section.

  

  Alternatively, select the block or section. In the top right, beside the block or section name, select ... (the ellipsis) icon, and then select Remove.

• To hide/show a block or section, select the Eye icon beside the block or section.

  For example, in the following image, the option is enabled to show an Image with text slideshow block inside an Image with text slideshow section.

  

  Alternatively, select the block or section. In the top right, beside the block or section name, select ... (the ellipsis) icon, and then select the Eye icon.

• To move a block or section above/below another block or section, select the Drag icon beside the block or section. Then, drag the item to the required position.

  For example, the following image shows moving one Image with text slideshow block above another inside an Image with text slideshow section.

  

• To duplicate a block or section, select the block or section. In the top right, beside the block or section name, select ... (the ellipsis) icon, and then select Duplicate.

  For example, the following image shows the Duplicate option selected in Theme editor for a Shape divider section.

  

Section theme settings menu ​

In Theme editor, the (section) settings menu for some sections includes an expandable Theme settings menu. Expand the menu to access applicable theme settings for the current section.

For example, in the following image, the expandable Theme settings menu is included inside a Product section. Refer to Shopify help: Theme editor.

Each theme setting can apply to multiple sections and pages. Changing a theme setting from inside a section can affect other store sections and pages.

For example, by using the expandable Theme settings menu inside a Product section, you can adjust the Cart type. Adjustments to the cart type theme settings, made inside the product section, are also applied to other store areas that use the cart.

When configuring a section, if you're unsure about an option in the expanded Theme settings menu, access the setting from Theme editor's standard Theme settings panel instead. Refer to Settings overview.

Add, replace or remove an image or video inside a section or block ​

Some sections and blocks can contain images or videos (media). To add, edit, replace or remove media inside a section or block:

1. Go to Customize theme.

   At the top of the page, use the dropdown to select the page template that contains the section/block with the media you want to edit.

2. In Theme editor, select the section or block you require.

   For example, in the following image, the Header section is selected on the Homepage template in Theme editor. The Header section contains a logo image for editing.

   

3. Apply a media selector action described in the following table.

Edit an image or video inside a section or block ​

After you add an image or video (media) to a section/block, the media selector displays a thumbnail preview inside the section/block settings menu. To edit media you added to a section/block:

1. In Theme editor, select the section/block you require.

2. In the media selector's thumbnail preview area, select Edit.

   For example, in following image, in the Header section settings, the Edit option is displayed inside the thumbnail preview area for the Custom logo media selector.

   

3. In the Preview and edit pane, select a setting described in the following table.

As an example, in the following image, the Preview and edit pane is displayed for the Header section's Logo image media selector.