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.

Static sections are 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 are 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

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. 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 Custom logo width slider to customize the logo width.

  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.

  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.

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.

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.

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.

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.
  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 steps 3 to 5 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.

Ready to start selling with Shopify?

Try it free