Sections overview

Baseline includes templates for common store pages such as the home page and product pages. Within each template, Baseline 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 store page, use Baseline's templates, sections, and blocks as a convenient way to build pages quickly, and to maintain a consistent design across your store.

Theme structure

A typical store has different types of pages, such as product and blog post pages. Baseline provides a convenient template for each type of page.

For example:

• The home page template defines what is displayed on your store's home page.

• The default product page template defines what is displayed on a default product page.

Baseline's templates are comprised of sections and blocks.

• Section. Within a template, a container for an area of content, such as the sidebar, 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

Baseline contains default and additional page templates.

• Default. All Shopify themes include a set of default page templates for creating common store pages. Baseline provides preconfigured store pages created from Baseline's default page templates, including a home page and a Checkout page.

• Additional. Additional page templates can be used to create store pages that are specific to Baseline. To use Baseline's additional page templates, you must assign the template to a page. Refer to Shopify help: Templates.

Baseline's page templates are listed below.

Note

* indicates an Additional page template.

• Home page

• Products

  • Default product
  • Horizontal gallery *
  • Three column *
  • Thumbnails *
  • Two column *

• Collections

  • Default collection

• Collections list

• Gift card

• Cart

• Checkout and customer accounts

• Legacy customer accounts

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

• Pages

  • Default page
  • Collapsible rows *
  • Contact *
  • FAQ *
  • Lookbook *

• Blogs

  • Default blog

• Blog posts

  • Default blog post

• Search

• Password

• 404 page

Static, content, and template sections

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

• Static sections are displayed in a fixed area on most pages.

• Content sections can be added to almost every page.

• Template sections are available only on specific pages.

Static sections

By default, all templates except the Checkout, Password, and Gift card templates include the static sections described in the following table.

Section name	Description
Age check	Provide visitors with an age verification prompt for accessing your store.
Announcement bar	Provide messages for your store's visitors. For example, to announce sales or special discounts.
Footer	Provide visitors with a secondary menu, at the bottom of pages, for navigating your store.
Header	Provide visitors with a top menu for navigating pages in your store.
Hero logo	Display a custom logo in the Footer area of most pages, and in the Hero area of the home page.
Menu drawer	Provide visitors with a side menu for navigating the pages in your store.
Promo popup	Display a small window containing promotional or advertising messages for your store's visitors.

Typically, static sections cannot be fully removed or rearranged without altering Baseline's code (recommended for expert users only). However, you can hide some static sections, like the Popup and Announcement bar, by adjusting the section's settings. Refer to Shopify help: Edit a section.

Content sections

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

Section name	Description
Blog posts *	Display a selection of blog posts on a store page.
Breadcrumbs	Set how your store's pages display breadcrumbs navigation. In the Theme editor, add/remove the section to/from the: Header, Footer and Overlay areas of any page, except the home, Collections list, Cart, Checkout, Gift card, and Password pages. Template area of any page, except the Gift card, Checkout, 404 pages.
Collapsible rows	Display headings on a page with expandable/collapsible rows of text.
Collection carousel *	Display products from a collection, arranged in a carousel layout.
Collection links over image	Display an image or video behind links to a selection of collections on a page.
Collection links with image	Display an image side-by-side with text that links to a collection on a page.
Collection links	Display links to a selection of collections on a page.
Collection list *	Display a selection of collections on a page.
Countdown timer with image	Use the section to display a countdown timer on a page with (optional) an image, text and link.
Custom links over image	Display an image overlaid with a selection of links to your store's pages.
Custom links over video	Display a video overlaid with a selection of links to your store's pages.
Custom links with image	Display a selection of links to store pages on a page, with an image representing the set of links.
Custom links with video	Display a selection of links to store pages on a page, with a video representing the set of links.
Custom links	Display links to a selection of store pages on a page.
Custom liquid	Supports Liquid code for advanced customizations.
Directory	Display a grid with links to different areas of your store on a page.
FAQ	Provide store visitors with answers to common questions.
Feature text *	Display formatted text on a store page, with or without links.
Featured collection table *	Display a table with links to products from a specific collection on a page.
Featured collection	Set a collection as a featured collection and display it on a page.
Featured countdown timer	Display a countdown timer on a page.
Featured menu buttons	Add a menu that displays menu items as links or buttons.
Featured menu over image	Display an image or video overlaid with a menu of links.
Featured menu *	Add a menu to a page with links to featured items or products in your store.
Featured product	Display a specific product on a store page.
Image split	Display two media items, side-by-side, on a store page.
Image with countdown timer	Display an image overlaid with a countdown timer on a store page.
Image with product grid	Display an image beside a selection of product tiles arranged in a grid.
Image with scrolling text	Display an image overlaid with moving/scrolling text on a store page.
Image with text overlay *	Display an image, overlaid with text, on a store page.
Image with text	Display an image and text, side-by-side, on a store page.
Logo list *	Display a list of logos associated with store items.
Menu with image	Display a navigation menu and a linked image area, side-by-side, on a store page.
Newsletter	Display a newsletter sign-up form on a page.
Product links over image	Display an image or video overlaid with links to a selection of products on a page.
Product links with image	Display links to a selection of products on a page, with an image representing the set of products.
Product links	Display links to a selection of products on a page.
Product list	Display a list of products from a collection on a page.
Recently viewed products	Display product tiles for products that a customer recently viewed.
Rich text	Add formatted text with headings to a store page.
Scrolling collection links	Display links to a selection of collections on a page using a scrolling text animation.
Scrolling product links *	Display links to products from a collection on a page using a scrolling text animation.
Scrolling text *	Display text on a page with a moving/scrolling animation.
Shop the look	Display an image of products overlaid with clickable hotspots, with each product also listed and linked alongside the image.
Single level menu	Display a navigation menu, with menu items in single row, on a store page.
Slideshow	Display a series of images on a store page.
Testimonials *	Display comments from customers, clients, and staff.
Text and image carousel	Display text and images arranged in a carousel layout on a page.
Text columns with images	Add areas of text with corresponding images, arranged in columns, to a store page.
Text columns	Add text, arranged in columns, to a store page.
Text split	Add two blocks of text to a page.
Video and image split	Display a video (block) with an image (block) on a store page.
Video split	Display two videos (blocks) on a store page.
Video with countdown timer	Display a video overlaid with a countdown timer 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 text	Display a video, side-by-side with text, on a page.
Video	Display a video from your store's media library on a store page.
White space	Add an area of empty, or white, space between sections on a store page.

Note

* denotes the content sections included in Baseline's home page template by default.

Template sections

A template section provides a dedicated content area for a particular template. Each template section is only available on specific pages. For example, only Baseline's 404 page template includes the Main 404 template section.

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

Section name	Description	Corresponding template name
Blog pages	Set how blog posts (articles) are displayed on pages created from the Default blog template.	Blogs > Default blog
Blog post	Set how some content displays on a blog post (article) page.	Blog posts > Default blog post
Cart footer	Set how the footer of your store's Cart is displayed on the cart page.	Cart
Cart items	Set how some content displays on your store's Cart page.	Cart
Collection	Customize how a collection is displayed on a (default) Collection page.	Collections > Default collection
Collections list page	Set how collections are displayed on the Collections list page.	Collections list
Free shipping bar	Display an indicator that tracks a customer's order amount against your store's free shipping threshold.	In the Theme editor, with the exception of Checkout, Password, and Gift card pages, you can add the section to the Header area of any page.
Gift card	Create gift card products to allow customers to purchase prepaid store credit.	Gift card
Main 404	Provide a message that's displayed whenever a visitor follows a link to a store page that cannot be found.	404 page
Pages	Set how content is displayed on pages created from the Default page template.	Pages > Default page
Pages - contact	Set how your store's contact information is displayed on the Contact page.	Pages > Contact
Password - content	Provide "Opening Soon" information, on the Password page, about store content that's pending release.	Password
Product - horizontal	Set what is displayed on Product - Horizontal gallery pages.	Products > Horizontal gallery
Product - three column	Set how products are displayed on product pages assigned to the three-column template.	Products > Three column
Product pages	Set what is displayed on a default or two column product page.	Products > Default product Products > Two column
Product pages - thumbnails	Set what is displayed on Product - Thumbnails pages.	Products > Thumbnails
Related products	Display related products on a product page.	Products > Default product Products > Horizontal gallery Products > Three column Products > Thumbnails Products > Two column
Search results	Set how search results are displayed.	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.

Configure blocks inside a section

Block names 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 pages section is pre-configured with blocks for a product's Title, Price, Variant picker, and Buy buttons. Optional blocks can also be added to 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 the Theme editor, select a page 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 adjust the corresponding block settings.

  For example, the following image shows a selected Column block inside a Text columns with images section.

  

• To add a block to a section, select Add block (or "cross-hairs icon"), and then choose a block to add.

  For example, the following image shows the Add block option to add a block inside a Text columns with images section.

  

• To remove a block from a section, select the Remove block ("trash") icon beside the block.

  For example, the following image shows the option to remove a Column block from a Text columns with images section.

  

• To hide or 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 a Text columns with images section.

  

• To move a block above or 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 Column block above another inside a Text columns with images section.

  

Section Theme settings menu

In the 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 pages 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 pages section, you can adjust the Cart type. Any adjustments you make to the cart type theme settings inside the Product pages section are also applied to the other areas of your store that use the cart.

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

Edit an image inside a section or block

Some sections and blocks can contain images. To upload an image into a suitable section or block, use the image picker's options in the section or block settings menu. After you upload an image, the image picker displays a thumbnail preview of the image you uploaded in the section or block settings menu.

To edit an image you uploaded to a section or block:

1. In the Theme editor, at the top of the page, use the templates dropdown to select the page that contains the section or block with the image you want to edit.

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

3. In the image picker's thumbnail preview area, select Edit image (the pencil icon) to open the Media editor.

   In the following image, the Edit image option is displayed in the image picker's thumbnail preview area.

   

4. In the Media editor, apply the required changes.

   Note

   The changes you make are applied to the image file across your store. To learn about the Media editor, refer to Shopify help: Using the media editor.