Skip to content

Sections overview ​

Shapes theme includes Templates for building common store pages like the Home page 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.

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 home page.

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

Note

To learn how themes are structured, refer to Shopify help: Theme structure and Shopify developer help: Markup and features.

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 home page 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.

Note

* Indicates an Additional page template.

  • Home page

  • Products

    • Default product
    • Preorder *
  • Collections

    • Default collection
  • Collections list

  • Gift card

  • Cart

  • Checkout and new customer accounts

  • Classic customer accounts

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

    • Default page
    • Contact *
  • Blogs

    • Default blog
  • Blog posts

    • Default blog post (article)
    • Recipe *
  • Search

  • Password

  • 404 page

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 Gift card templates, by default, all templates include the static sections described in the following table.

Section nameDescription
Announcement barProvide messages for your store's visitors. For example, announce sales or special discounts.
HeaderProvide visitors with a top menu for navigating pages in your store.
FooterProvide visitors with a secondary menu, at the bottom of pages, for navigating your store.
Call to action stickerOverlay your home page with a sticker that links to a URL. For example, link to another store page.
Age checkProvide 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 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.

Section nameDescription
Blog posts *Display a selection of blog posts on a store page.
CollageDisplay a collage of media on a page, like images, products, stickers and shapes.
Collection focus carousel *Display products from a collection on a page using a carousel layout.
Collection list carouselDisplay a selection of collections on a page, arranged in a carousel layout.
Collection listDisplay a selection of collections on a store page.
Comparison table *Display a table on a page for comparing items, like product ingredients or features.
Curved textDisplay text aligned to an arc or "curve" on a store page.
Custom liquidSupports Liquid code for advanced customizations.
FAQProvide visitors with answers to common questions.
Feature logo with image *Overlay an image with a (feature) logo image on a store page.
Feature testimonials *Use a feature layout to display comments from customers, clients, and staff on a store page.
Feature text columnsAdd text, arranged in columns, with headings, to a store page.
Feature text with imageDisplay an image overlaid with (feature) text on a store page.
Feature text with offset imagesDisplay an offset arrangement of images, overlaid with (feature) text, on a store page.
Feature text *Display text on a store page, with or without links and heading effects.
Featured collection *Set a collection as a featured collection and display it on a page.
Featured product variantsDisplay variants of a product arranged in a Grid or Carousel layout.
Featured product *Display a specific product on a store page.
Features listDisplay a table that describes product features on a store page.
Hero slideshowDisplay a series of images, at the top of a store page (hero), overlaid with text.
Icon list *Display an arrangement of icons on a store page.
Image focus carouselDisplay images (blocks) on a page using a carousel layout.
Image with highlights *Display an image surrounded by blocks of text on a store page.
Image with logo overlayOverlay an image with a logo image on a store page.
Image with text overlay *Display an image, overlaid with text, on a page.
Image with text slideshowDisplay a series of images with corresponding text on a page.
Image with text *Display an image and text, side-by-side, on a page.
Logo listDisplay a list of logos associated with store items.
MenuDisplay text items on a store page arranged in a menu layout.
Mixed shape product gridDisplay product images (tiles), arranged in a grid layout, with a (different) shape applied to each tile.
Newsletter *Display a newsletter sign-up form on a page.
Offset collection galleryDisplay an offset arrangement of items from a collection on a page.
Offset galleryDisplay an offset arrangement of selected media on a page.
Rich textAdd formatted text with headings to a page.
Scrolling logosUse a scrolling animation to display a list of logos on a page.
Scrolling patternAdd an area with a moving or scrolling pattern to a page.
Scrolling text with icons *Display moving or scrolling icons with corresponding text on a store page.
Scrolling textAdd an area with moving or scrolling text to a page.
Shape carouselDisplay a series of shapes on a store page, with embedded media.
Shapes with text overlayDisplay shapes overlaid with text on a store page.
TestimonialsDisplay comments from customers, clients, and staff.
Text columns with images *Add areas of text with corresponding images, arranged in columns, to a store page.
Vertical video embedsDisplay a series of (vertical) external videos on a store page, arranged in a slideshow layout.
Video with logo overlayDisplay a video from your store's media library overlaid with a logo image, on a store page.
Video with text overlay *Display a video from your store's media library, overlaid with text, on a store page.
Video with textDisplay a video from your store's media library, side-by-side with text, on a page.
VideoDisplay a video from your store's media library on a store page.

Note

* Denotes a content section included in Shapes' Home page 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 includes the 404 page template section.

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

Section nameDescriptionCorresponding template name
404 pageProvide a message that's displayed whenever a visitor follows a link to a store page that cannot be found.404 page
Article featured imageSet how the featured image is displayed on a blog post (article) page.Blog posts > Default blog post
Article pageSet how page content displays on a blog post (article) page.Blog posts > Default blog post
Article recipe bannerSet how page content displays in the banner area of a recipe (blog post) page.Blog posts > Recipe
Article recipe pageSet how page content displays on a recipe (blog post) page.Blog posts > Recipe
Article recipe structured dataGenerate a structured data schema for displaying recipes on a recipe (blog post) page.Blog posts > Recipe
Blog postsSet how content displays on (default) Blog post (article) pages.Blogs > Default blog
BreadcrumbsDisplay an indicator that shows the current page's position within your store's overall page structure.
  • Header, Footer, and Overlay areas of any page excluding Checkout, Gift card, and Password pages.
  • Template area of any page excluding 404, Cart, Checkout, Collection list, Gift card, and Home pages.
CartSet how your store's cart is displayed.Cart
Collection bannerDisplay a banner image above a collection on a collection page.Collections > Default collection
Collection imageDisplay an image above a collection on a collection page.Collections > Default collection
Collection list - collageDisplay collection images arranged in a collage on the Collections list page.Collections list
Collection listSet how collections are displayed on the Collections list page.Collections list
Free shipping barDisplay an indicator that tracks a customer's order amount against your store's free shipping threshold.In Theme editor, with the exception of Checkout, Password, and Gift card pages, you can add/remove the section to/from the Header area of any page.
Gift cardSet up a Gift card section on your store's gift card page to allow customers to purchase prepaid store credit.Gift card
Hero logoDisplay a custom logo on your store's pages using an image file from Shopify's free library or your store's media library.In Theme editor, with the exception of Checkout, Password, and Gift card pages, you can add/remove the section to/from the Header area of any page.
Pages - contactSet how your store's contact form is displayed on the contact page.Pages > Contact
PagesSet how content is displayed on pages created from the Default page template.Pages > Default page
PasswordProvide "Opening Soon" information, on the password page, about store content that's pending release.Password
Product grid - collectionCustomize collection pages by adding features like a grid layout, or product filtering and sorting.Default collection
ProductSet what's displayed on a Product page when a visitor selects a product from your store.
  • Products > Default product
  • Products > Preorder
Related productsDisplay related products on a product page.
  • Products > Default product
  • Products > Preorder
SearchSet how search results are displayed on the search page.Search

Note

To customize your store's pages, you can add, edit, remove, show, hide and rearrange sections and blocks. Refer to Configure blocks inside a section and Shopify help: Sections and blocks.

To use Shopify's Preview inspector tool to add, remove, show/hide, or move sections and blocks, refer to Shopify help: Preview inspector.

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, show, move or duplicate blocks and sections ​

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

Note

You can also apply most of the following block actions to sections. Refer to Shopify help: Customize your theme templates with sections and blocks.

  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 an Image with text slideshow block selected 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 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.

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

    The option to remove an Image with text slideshow block from an Image with text slideshow section in Theme editor.

    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.

    The show or hide image block options for an Image with text slideshow block in an Image with text slideshow section in Theme editor.

    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.

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

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

    The duplicate section option for a Shape divider 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.

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.

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 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 Home page in Theme editor. The Header section contains a logo image for editing.

    The Header section selected on the Home page in Theme editor.

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

Note

Some media selector actions described in the following table are available only in certain blocks and sections, and only for particular media filetypes.

ActionDescription
UploadTo upload media, choose Select <image> or <video>, and then choose a media file to upload. Refer to Shopify help: Uploading and managing files.
Add from media libraryTo add media from your store's media library, choose Select <image> or <video>, and then select a media file to add.
Add from Shopify libraryTo add an image from Shopify's free image library, choose Explore free images, and then select an image file to add.
EditTo edit uploaded media, refer to Edit an image or video inside a section or block.
Replace from media libraryTo replace an image or video with media from your store's media library, choose Change > Select from library, and then select a new file to use.
Replace from Shopify libraryTo replace an image with an image from Shopify's free image library, choose Change > Explore free images, and then select a new image to use.
RemoveTo remove media, select Change > Remove.
Use dynamic sourceTo display media from a dynamic source, select Change > Connect dynamic source, and then choose a metafield to add. Refer to Shopify help: Metafields.

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 the media item you require to open the Shopify media editor.

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

    The Header section's image selector's thumbnail preview area in Theme editor.

  3. In the media editor, select a setting described in the following table.

Note

Changes you make to the following settings are applied to the media file across your store. In the media editor, to apply your changes, select Save as new. To close the pane without saving your changes, select Discard.

For detailed information about using Shopify's media editor, refer to Shopify help: Using the media editor

Some settings described in the following table are available only in certain blocks and sections, and only for particular media filetypes.

Setting nameDescription
NameIn the Name text box, enter a name for your media item.
Alt textIf available, in the Alt text box, enter a brief description of the media item. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools or have slower network connection speeds. Refer to Shopify help: Adding alt text to media.
Crop and transformTo access options for cropping your media item or to specify an aspect ratio, select the Crop and transform menu.
ResizeTo set a new size for your media item, select the Resize menu.
DrawTo overlay your media item using the drawing tool, select the Draw menu.
BackgroundTo specify a background color for your media item, select the Color background menu.
Replace backgroundTo use Shopify Magic to replace your media item's background, select the Replace background menu.
Click to set focal pointIf available, in the thumbnail preview area, use the Click to set focal point options to select a specific area of the image to display. Refer to Shopify help: Add a focal point to an image.
ExitTo close the media editor, select the Exit icon.

As an example, in the following image, the Header section's Logo image is display in the media editor.

The Shopify media editor in Theme editor.