Sections for Express

Sections are customizable blocks of content that determine the layout of different pages on your online store.

You can add, re-arrange, or remove sections to create your layout. You can have up to 25 sections on your page, plus header and footer sections. Header and footer sections cannot be removed or re-arranged.

You can also use sections to determine the appearance of an element in your store. For example, the product page section determines the appearance of each product on your online store.

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

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

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.

  1. Next to Express, click Customize.

  2. Click Header.

  3. In the Logo image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To use a free stock image from Burst, click Free images.
    • To select an image from your local computer, click Library > Upload.
  4. Use the Custom logo width slider to customize the logo width.

  5. 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 completely customizable and can include contact information, information about store events or sales, and your store's slogan or branding message.

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Header.

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

  5. Enter the text for your announcement in the Text field.

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

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

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

  9. Click Save.

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

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Header.

  4. Check Show search.

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

The footer section of a website that shows two text blocks and a newsletter signup.

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. Next to Express, click Customize.

  2. Click Sections.

  3. Click Footer.

  4. Check Show payment icons.

  5. Click Save.

Add a menu, a newsletter signup, or text

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Footer.

  4. 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 move a content block, click the ⋮⋮ icon and drag the block to a different place.

    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.

  5. Click Save.

Add social media icons

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Footer.

  4. Click the Theme settings section.

  5. In the relevant social media field, enter the URL to your profile.

  6. Click Save.

Add a language selector

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

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Footer.

  4. Under Language selector, select Show language selector.

  5. Click Save.

You can feature multiple collections in a single section on your home page. Because Express does not include a menu in its header, featured collections, alongside featured products, are the simplest way to display products using this theme.

In each featured collections section, you can show multiple collections. Collections appear as tabs that buyers 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.

  1. Next to Express, click Customize.

  2. Click Sections > Add section.

  3. Click Featured collections, then click Add.

  4. From the Collection list size drop-down list, you can 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
  5. From the Image style drop-down list, select the image crop style for the product images in the collections. This setting applies to all of the collections in the Featured collections section.

  6. In the content area, select a Collection block or click Add collection.

  7. Click Select collection.

  8. From the Collection list, select the collection you want to display in the tab, 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.

  9. Repeat steps 5 to 7 to add more collections to the section.

  10. Click Save.

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Select the featured collections section you want to modify.

  4. In the content area, select a Collection block or click Add collection.

  5. Click Select collection.

  6. From the Collection list, select the collection you want to display in the tab, 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.

  7. Repeat steps 3 to 5 to add more collections to the section.

  8. 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 - Select 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 social sharing buttons in the featured product section.
  • Image style - Choose whether to add a square or circular crop to your featured product images.

  1. Next to Express, click Customize.

  2. Click Sections > Add section.

  3. Click Featured product, then click Add.

  4. Use the settings to customize your featured product section.

  5. Click Save.

Product page

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. The customer can add the product to the cart directly from the page.

The product page 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 on the home page. This overlay appears when a product is selected from a featured collection.
  • Show social sharing buttons - Show buttons your buyers can use to share your products on social media.

Edit the product page settings

  1. Next to Express, click Customize.

  2. Click Sections.

  3. Click Product pages.

  4. Use the settings to customize your product page.

  5. 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 - The 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 - The primary text to pair with the image.
  • Text - The secondary text to pair with the image. This text appears below the heading text.
  • Button label - The text that you want to appear on the button.
  • Button link - 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

  1. Next to Express, click Customize.

  2. Click Sections > Add section.

  3. Click Image with text, then click Add.

  4. In the Image area, click Select image, and then do one of the following:

    • To select an image you have already uploaded to your Shopify admin, click the Library tab.
    • To use a free stock image from Burst, click Free images.
    • To select an image from your local computer, click Library > Upload.
  5. Use the settings to customize the section.

  6. Click Save.

Cart drawer

Express features a cart drawer that lets buyers quickly view the contents of their cart and then continue shopping.

With Express, you can let your customers enter instructions with their order by enabling order notes in the cart drawer.

Enable order notes in the cart drawer

  1. Navigate to a cart drawer in the theme editor by adding a product to the cart.

  2. Click the Sections tab.

  3. Click the Cart page section.

  4. Check Show cart note.

  5. Click Save.

Ready to start selling with Shopify?

Try it free