# 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 following image, the section settings menu for a store’s homepage is displayed in Theme editor. In the image, the drag icon is selected to rearrange a Featured collection section above a Collection list section.

A Featured collection section rearranged above a Collection list section on a store's homepage in Theme editor.

# 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 (opens new window).

Shapes’ page templates are listed below.

Note

* Indicates an Additional page template.

  • 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

  • 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

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

Section name Description
Announcement bar Provides messages for your store’s visitors. For example, to announce sales or special discounts.
Header Provides visitors with a top menu for navigating pages in your store.
Footer Provides visitors with a secondary menu, at the bottom of pages, for navigating your store.
Age check Provides visitors with an age verification prompt for accessing your store.

Typically, static sections cannot be fully removed or rearranged without altering Shapes’ code (recommended for expert users only). However, you can hide the Announcement bar section by adjusting its settings - refer to Shopify help: Edit a section (opens new window).

# 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.

Section name Description
Blog posts * Displays a selection of blog posts on a store page.
Collage Displays a collage of media on a page, like images, products, stickers and shapes.
Collection list Displays a selection of collections on a page.
Comparison table * Displays a table on a page for comparing items, like product ingredients or features.
Custom liquid Supports Liquid code for advanced customizations.
FAQ Provides visitors with answers to common questions.
Feature text columns Adds text, arranged in columns, with headings, to a store page.
Featured collection * Sets a collection as a featured collection and displays it on a page.
Featured product * Displays a specific product on a store page.
Hero slideshow Displays a series of images, at the top of a store page (hero), overlaid with text.
Icon list * Displays an arrangement of icons on a store page.
Image with text * Displays an image and text, side-by-side, on a page.
Image with text overlay * Displays an image, overlaid with text, on a page.
Image with text slideshow Displays a series of images with corresponding text on a page.
Logo list Displays a list of logos associated with store items.
Newsletter * Displays a newsletter sign-up form on a page.
Offset collection gallery Displays an offset arrangement of items from a collection on a page.
Offset gallery Displays an offset arrangement of selected media on a page.
Pattern marquee Adds an area with a moving/ scrolling pattern to a page.
Rich text * Adds formatted text with headings to a page.
Shape slideshow Displays a series of shapes on a store page, with embedded media.
Testimonials * Displays comments from customers, clients, and staff.
Text columns with images * Adds areas of text with corresponding images, arranged in columns, to a store page.
Text marquee * Adds an area with moving/ scrolling text to a page.
Video Adds a video to a page from a URL.
Video with text overlay * Adds a video from a URL, overlaid with text, to a page.

Note

* Denotes a content section included in Shapes’ Homepage template by default.

# 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.

Section name Description Corresponding template name
Call to action sticker Overlay the home page with a sticker that links to a URL or store page/ item. Home page
Collection banner Display a banner image above a collection on a collection page. Collections > Default collection
Collection product grid Customize collection pages by adding features like a grid layout, or product filtering and sorting. Default collection
Collection list - collage Display collection images arranged in a collage on the Collections list page. Collections list
Collection list Set how collections are displayed on the Collections list page. Collections list
Product Set what’s displayed on a Product page when a visitor selects a product from your store.
  • Products > Default product
  • Products > Preorder
Product recommendations Display related products on a product page.
  • Products > Default product
  • Products > Preorder
Pages - contact Set how your store’s contact form is displayed on the contact page.
  • Pages > Default page
  • Pages > Contact
Article featured image Set how the featured image is displayed on a blog post (article) page. Blog posts > Default blog post
Article page Set how page content displays on a blog post (article) page. Blog posts > Default blog post
Cart Set how your store’s cart is displayed. Cart
Password Provide “Opening Soon” information, on the password page, about store content that’s pending release. Others > Password
404 page Provide a message that’s displayed whenever a visitor follows a link to a store page that cannot be found. Others > 404 page
Search Set how search results are displayed on the search page. Others > Search
Gift card Set up a Gift card section on your store’s gift card page to allow customers to purchase prepaid store credit. Others > Gift card

Note

To customize your store’s pages, you can add, edit, remove, show, hide and even rearrange sections and blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks (opens new window).

# 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.

Note

To learn about the available blocks in each section, refer to Static, content and template sections.

# Configure, add, remove, hide, or move a block

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

  1. In Customize theme, select a template that contains the section with the 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, select the required block, and then apply the corresponding block settings. For example, the following image shows a selected Image with text slideshow block inside an Image with text slideshow section.

    A selected Image with text slideshow block inside an Image with text slideshow section in Theme editor.
  • To add a block to a section, select Add block, and then choose a block 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.

    The Add block option to add an Image with text slideshow block inside an Image with text slideshow section in Theme editor.
  • To remove a block from a section, choose a block to remove, and then select Remove block. For example, the following image shows the option to remove an Image with text slideshow block from an Image with text slideshow section.

    The option to remove an Image with text slideshow block from an Image with text slideshow section in Theme editor.
  • To hide/ show a block inside a section, select the eye icon beside the block. 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.

    The show or hide image block options for an Image with text slideshow block in an Image with text slideshow section in Theme editor.
  • To move a block above/ below another block in a section, select the drag icon beside the block. Then, drag the block 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.

    The move block option for an Image with text slideshow block in an Image with text slideshow section in Theme editor.

# 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 (opens new window).

An example of the theme settings menu for a product section in 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.