Sections for Express

Theme content is built using sections. Sections are customizable blocks of content that determine the layout and appearance of different pages on your online store. You can add, remove, edit, and customize sections using the updated theme editor.

Shopify's themes have the following types of sections:

  • Static sections: sections that appear in predetermined locations in your online store. These sections can't be removed or rearranged. Static sections might include headers, footers, navigation sections, or content sections on pages like product pages and collection pages. For example, the Product section determines the appearance of each product page on your online store.
  • Dynamic sections: optional sections that you can use to customize the layout of your home page. On your store's home page, you can add, rearrange, and remove dynamic sections to create the page layout. You can have up to 25 dynamic sections on your home page.

You can learn about Express's unique selection of sections and how to customize them to suit your business.

Static sections

Express includes the following static sections:

Dynamic sections

Express includes the following dynamic sections:

Your theme's header is the section that appears at the top of every page in your store.

You can customize the following items in your header:

  • Logo
  • Announcement bar
  • Menu
  • Search
  • Header styles

You can add a custom logo image to your store's header. The best format is a .png file with a transparent background. The maximum width for a logo is 180px. You can resize the logo image by increasing or decreasing the width.

If you don't add a logo image, then your store name is displayed as text. You can change your store name on the General settings page in your Shopify admin.

  • Custom logo width: The width of the logo.

  • Logo alignment: The alignment of your logo in the header. Select Left or Centered.

  1. Click Header.
  2. In the Logo image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select an image from your local computer, click Library > Upload.
  3. Use the settings to customize the size and placement of your logo.
  4. Click Save.

Add an announcement bar

You can add an announcement bar in the header that you can use to show a message to your customers. Your message is customizable and might include contact information, information about store events or sales, or a store slogan.

  1. Click Header.

  2. In the Announcement bar area, check Show announcement.

  3. Enter the text for your announcement.

  4. Optional: Enter a URL to add a link to your announcement. (Version 1.11.0+)

  5. Optional: From the Icon menu, select an icon to display in the announcement bar. The icon uses the same color as your announcement text.

  6. To change the color of the announcement bar background, click the Bar color swatch and choose a color.

  7. To change the color of the announcement text, click the Text color swatch and choose a color.

  8. Click Save.

Add a menu

You can add a menu to your header. This displays all the menu's links in your header, which you can use to highlight common pages that your customers want to access. For example, you could add a menu that contains links to your collections.

  1. Click Header.

  2. To select a menu, click Change. Select a menu from the list or click Create menu to create a new one.

  3. To edit the menu, click Edit menu.

  4. Click Save.

You can add a search option to your header so that customers can quickly locate items in your store.

  1. Click Header.
  2. Check Show search.
  3. Click Save.

Use secondary colors for your header

You can select Enable secondary background and text color to use the secondary background and text color in your header.

Your theme's footer is the section that appears at the bottom of every page in your store. You can add the following features to your footer:

  • payment icons
  • a menu
  • a newsletter signup
  • a text section containing information about your business
  • social media icons
  • a language selector

Add payment icons

You can display icons for the payment methods that you accept in your footer. This area displays the icons that are associated with the payment provider that you have enabled in the payment settings section of your admin.

  1. Click Footer.

  2. Check Show payment icons.

  3. Click Save.

Add a menu, a newsletter signup, or text

  1. Click Footer.

  2. To add a content block, in the Content area, click Add content. Select the type of block from the following choices:

    - Menu

    - Newsletter

    - Text

    You can add up to 4 content blocks.

    To remove a content block, click on the block and then click Remove content.

    To customize a content block, click on the block and edit the settings.

  3. Click Save.

Add social media icons

  1. Click Theme settings.

  2. Click Social media.

  3. To upload a social sharing image, in the Social sharing image area, click Select image or Explore free images.

  4. To add social sharing buttons to your products and blog posts, check any or all of the following options:

    • Share on Facebook
    • Tweet on Twitter
    • Pin on Pinterest (not available for blog post sharing)
  5. To add links to your social media accounts, enter the links to your accounts in the fields provided under Accounts. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify.

  6. To change the style of the sharing buttons, select Fully branded or Logo only from the Button style menu.

  7. Click Save.

Add a language selector

You should only add a language selector if you have enabled multiple store languages.

  1. Click Sections.

  2. Click Footer.

  3. Under Language selector, select Show language selector.

  4. Click Save.

Product

The product page appears when a buyer clicks a product from a featured collection. It shows your product's description, price, variants, and images. You can choose whether to direct users to a new page or show the product details in an overlay on the home page. This setting is controlled by your theme settings. When Display product pages in an overlay is enabled, the product page appears as an overlay appears when a product is selected from a featured collection.

If you have local pickup enabled, and Display product pages in an overlay is disabled, then this section also displays the product's pickup availability.

The Product section includes the following settings:

  • Show quantity selector - Let users specify a quantity to add to their cart.
  • Show vendor - Show the product brand or vendor in the product page. For a brand or vendor to show, you need to add a vendor to the product.
  • Show dynamic checkout button - Let customers skip the cart and go directly to the checkout from the featured product section.
  • Display product pages in an overlay - Select this option to show product details in an overlay over the current page. This overlay appears when a product is selected from a featured collection.
  • Show social sharing buttons - Show buttons that your customers can use to share your products on social media. These buttons are controlled by your theme settings.

Edit the product settings

  1. Click Product.
  2. Use the settings to customize your product page.
  3. Click Save.

Show pickup availability

Version 1.11.0+

Express lets you show customers whether a product in your online store is available for local pickup. On each product page, the pickup availability section shows whether the product is available, and the estimated time frame for pickup. This information appears only if Display product pages in an overlay is disabled.

To use this feature, you must set up local pickup. If local pickup is enabled, then this feature is always visible on your product pages and can't be disabled.

After local pickup is enabled, the product page displays whether the product is available for pickup at a local pickup location. This information appears only for products that are stocked at at least one pickup location and have This is a physical product selected in the Shipping section of a product variant's details.

To select This is a physical product on a product variant, do the following:

  1. From your Shopify admin, go to Products > All products.

  2. Select a product.

  3. Under Variants, select a variant.

  4. Under Shipping, check This is a physical product.

  5. Click Save.

If you have local pickup enabled for only one location, then the location and pickup availability is displayed for that location. Customers can click View store information to learn more about the pickup location.

If you have local pickup enabled for more than one location, then the pickup availability section displays the location and pickup availability for the location closest to the customer, based on the customer's IP address. When the customer clicks Check availability at other stores, the list of pickup locations is ordered by distance from the customer.

If the customer's location can't be determined from their IP address, then the pickup availability section displays the location and pickup availability alphabetically, first by city and then by location name. For example, suppose that you had three pickup locations: "Queen Street" in Toronto, "Front Street" in Toronto, and "Alberni Street" in Vancouver. The pickup availability section would show the details for "Front street" in Toronto.

Product recommendations

You can display recommended products on product pages to make it easier for customers to discover other products that might interest them.

If Display product pages in an overlay is enabled for your product page, products appear in an overlay over the current page when accessed from this section.

Enable product recommendations

  1. Select Product pages.

  2. Click the Product recommendations section.

  3. Check Show dynamic recommendations to show product recommendations on your product pages.

  4. Optional: To change the title that appears above the recommended products, enter a new one in the Heading field.

  5. Optional: If you want to let customers add products to the cart directly from the Product recommendations section, select Enable 'Quick buy' button.

  6. Optional: To show or hide the vendors in the product descriptions, use the Show vendor checkbox.

  7. Click Save.

Collection template

The Collection template section is the main customizable section for collection pages.

The Collection template section includes the following settings:

  • Show collection image - Show the collection image at the top of the collection page.
  • Show collection description - Show the collection description at the top of the collection page. (Version 1.11.0+)
  • Show product vendors - Show the product brand or vendor on the product card.

Customize your collection pages

  1. Select Collection.
  2. Click the Collection template section.
  3. Use the settings to customize your collection template section.
  4. Click Save.

Version 1.11.0+

You can create a banner that includes a custom image, text, and a button that links to another location in your store. You might use a banner to highlight your brand, feature a specific collection, or advertise a promotion.

Settings

  • Image - Add an image to include in the section. You can upload an image, use a previously-uploaded image, or select a free stock image from Burst.
  • Heading - Add primary text to the banner.
  • Heading size - Select the size of the heading text.
  • Description - Add a description to the banner.
  • Button label - Add the text that you want to appear on the button.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you don't want to include a button in the banner, then leave this field empty.

Layout options

  • Banner height - Select the height of the banner section.
  • Banner width - Select the width of the banner section.
  • Image alignment - Select the alignment of the image in the section.
  • Text box alignment - Select the alignment of the text box in the section.

    If the text box is left- or right-aligned, then the text is left-aligned. If the text box is center-aligned, then the text is also center-aligned.

Color settings

  • Text box background - Select the color of the text box.
  • Text - Select the color of the heading and button in the banner. The banner description uses the body text color for your theme, which can be modified in the theme settings.

Add a banner section

  1. Click Add section.
  2. Click Banner, and then click Select.
  3. Use the settings to customize your banner section.
  4. Click Save.

You can feature multiple collections in a single section on your home page. Collections appear as tabs that customers can navigate between.

When a customer adds one or more products from a featured collection to their cart, the quantity of the product added to the cart is displayed as a badge on the product.

A featured collection section that contains multiple collections. The collection names appear as clickable tabs along the top of the section.

The featured collections section includes the following settings:

  • Collection - Choose the collections that you want to include in the Featured collections section.
  • Collection list size - Choose the number of products to show by default. This setting applies to all of the collections in the Featured collections section.
    • Small - 6 products
    • Medium - 18 products
    • Large - 36 products
  • Image style - Choose the image crop style for the product images in the collections. This setting applies to all of the collections in the section.
  • Enable 'Quick buy' button - Add an option to let customers add products to the cart directly from the Featured collections section.
  • Show collection image - Show the collection image at the top of the featured collection tab. (Version 1.11.0+)
  • Show collection description - Show the collection description at the top of the featured collection tab. (Version 1.11.0+)
  1. Click Add section.
  2. Click Featured collections, and then click Select.
  3. In the content area, select a Collection block or click Add collection.
  4. Click Select collection.
  5. From the Collection list, select the collection that you want to appear in the tab, and then click Select.

    To add a collection, click the Add collection link to open the Create collection page in a new tab.

    To add or remove products from the selected collection, click the Edit collection link to open the Collections page in a new tab.

  6. Repeat the steps above to add more collections to the section.

  7. Click Save.

You can feature a product on your home page. Featuring a product is a great way to promote a new product or a product that's on sale. Customers can view additional product images using the left and right arrows below the image.

The featured product section includes the following settings:

  • Product - Choose the product that you want to feature on the home page.
  • Show quantity selector - Let users specify a quantity to add to their cart.
  • Show vendor - Show the product brand or vendor in the featured product section. For a brand or vendor to show, you need to add a vendor to the product.
  • Show dynamic checkout buttons - Let customers skip the cart and go directly to the checkout from the featured product section.
  • Show social sharing buttons - Show buttons that your customers can use to share your products on social media. These buttons are controlled by your theme settings.
  • Image style - Choose whether to add a square or circular crop to your featured product images.
  1. Click Add section.
  2. Click Featured product, and then click Select.
  3. Use the settings to customize your featured product section.
  4. Click Save.

Custom content

In the Custom content section, you can group several content blocks together. The width and alignment of each block can be adjusted to build a custom layout.

The Custom content section includes the following settings:

  • Heading - The title of the section.

  • Mobile layout - The layout of the blocks when your store is viewed from a mobile device. Choose from the following options:

    • Grid - Blocks up to 50% width appear in the same row. Containers above 50% width appear in their own row.
    • Stack - Each block appears in its own row.
    • Slider - Blocks are collapsed into a single slideshow-style section. Customers can click the navigation arrows to view additional blocks.

You can choose from the following block types.

Custom content block types
Block type Settings
Text

Heading - Add a heading to the text block.

Text - Add and format your custom text.

Button label - Add a button with a text label to the block.

Button link - Add the text that you want to appear on the button.

Text size - Set the size of the text.

Container width - Set the width of the block.

Vertical alignment - Set the vertical position of the content in the block.

Horizontal alignment - Set the horizontal position of the content in the block.

Image

Image - Add an image to display in the block. You can upload an image, use a previously-uploaded image, or select a free stock image from Burst.

Container width - Set the width of the block.

Vertical alignment - Set the vertical position of the content in the block.

Product

Product - Choose a product to feature in the block. The product name, image, and price is displayed. If the product has no image, the product title appears in the block.

Container width - Set the width of the block.

Vertical alignment - Set the vertical position of the content in the block.

If Display product pages in an overlay is enabled for your product page, products appear in an overlay over the current page when accessed from this section.

Collection

Collection - Choose a collection to feature in the block. The title of the collection and the featured image are displayed. If there is no featured image, an image from the first product in the collection is displayed. If the products in the collection do not have images, the collection title appears in the block.

Container width - Set the width of the block.

Vertical alignment - Set the vertical position of the content in the block.

Menu

Menu - Select a menu to display in the block.

Heading - Add a heading for the menu.

Container width - Set the width of the block.

Vertical alignment - Set the vertical position of the content in the block.

Horizontal alignment - Set the horizontal position of the content in the block.

Add custom content to your home page

  1. Click Add section.

  2. Click Custom content, and then click Select.

  3. Select and configure the content blocks that you want to include in the section.

  4. Click Save.

Image with text

With Express, you can add an image with text displayed to the right or left of the image. You can also add a button that links to another page.

You might use an image with text section to advertise a specific product or collection.

The image with text section includes the following settings:

  • Image - Add an image to include in the section. You can upload an image, use a previously-uploaded image, or select a free stock image from Burst.
  • Heading - Add primary text to pair with the image.
  • Text - Add secondary text to pair with the image. This text appears below the heading text.
  • Button label - Add the text that you want to appear on the button.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you do not want to include a button in the section, then leave this field empty.

Layout options

  • Desktop - Choose whether the image in the section appears on the left or right when viewed from a desktop computer. To display the image on the left, select Image first.
  • Mobile - Choose whether the image in the section appears first or second when viewed from a mobile device.
  • Secondary background - Choose whether to add a secondary background color to the section. Select Partial to add the background color to the top three-fifths of the section. This color can be modified in the theme settings.
  • Text size - Choose the relative size of the heading and text in the section.
  • Keep image ratio - Select this option to prevent your selected image from being cropped. If you leave this option unchecked, then the image is cropped into a square.
  • Enable secondary text color - Select this option to use the secondary background text color for the heading and text. This color can be modified in the theme settings.

Add an Image with text section to your home page

  1. Click Add section.
  2. Click Image with text, and then click Select.
  3. In the Image area, click Select image, and then do one of the following:
    • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
    • To select a stock image from Burst, click the Free images tab. From here you can enter a search term, or browse the image categories.
    • To select an image from your local computer, click the Library tab, and then click Upload.
  4. Use the settings to customize the section.
  5. Click Save.

Multi-column

Version 1.11.0+

With Express, you can add a section with multiple columns of content. You can add up to four columns to each multi-column section.

The multi-column section includes the following settings:

Column settings

  • Image - Add an image to the column.
  • Heading - Add primary text to the column.
  • Text - Add secondary text to the column.

Section settings

  • Heading - Add primary text for the section.
  • Button label - Add the text that you want to appear on the button.
  • Button link - Set the URL or page that you want the button to link to. Paste in the URL or select a page from the menu. If you don't want to include a button in the section, then leave this field empty.

Layout options

  • Alignment - Select the alignment for the elements in each column.
  • Mobile layout - Choose whether the columns in the section appear stacked or in a grid on mobile devices.
  • Image size - Select the size of the images the columns.
  • Keep image ratio - Select this option to prevent your selected images from being cropped. If you leave this option unchecked, then images are cropped into a square.
  • Enable secondary background and text color - Select this option to use the secondary background text color for the headings and text, and the secondary background color for the section. These colors can be modified in the theme settings.

Add a multi-column section to your home page

  1. Click Add section.
  2. Click Multi-column*, and then click **Select.
  3. Click Add column to add a column to the section.
  4. Click on the column in the Content section to add content to the column.
  5. Use the settings to customize the section.
  6. Click Save.

Page

Version 1.10.0+

You can feature the rich text content of a page on your home page. You might use this section to feature content from a store policies page or an about us page.

This section always uses the default page template, even if a different template is applied. For example, if you add a contact us page that uses a page.contact template to the section, then the interactive fields from that template don't appear on the home page. Any information you add to the Title and Content boxes for the page appears in the section.

Add a Page section to your home page

  1. Click Add section.
  2. Click Page, and then click Select.
  3. In the Page area, click Select page.
  4. Select the page whose content you want to display, and then click Select. You can select only from pages that are currently visible. If you need to create a new page, then select Create page.
  5. Click Save.

Ready to start selling with Shopify?

Try it free