Sections for Boundless

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

  • Home sections include features such as a slideshow or a newsletter signup that you can add, re-arrange, or remove. You can have up to 25 sections on your home page.

  • Each type of page has its own sections. For example, the product page section determines the layout of each product page on your online store.

  • Page sections are always in specific places on your online store. You can customize them, but you can't re-arrange or remove them.

  • Each theme includes fixed sections, such as the header and footer, that show on every page of your online store.

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

Boundless includes the following static sections:

Dynamic sections

You can add, rearrange, and remove dynamic sections to customize the layout of your home page. Each theme has a unique set of dynamic sections to choose from.

Boundless includes the following dynamic sections:

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

The header section includes the following settings:

  • Logo - Add a logo image to your header.
  • Home page logo - Add a logo that's displayed only on the home page. The home page logo is displayed over the slideshow, so choose a version of your logo that's easy to see on top of an image.
  • Custom logo width (in pixels) - Set the size of your logo.

Customize your header

  1. Next to Boundless, click Customize.

  2. Click Header.

  3. Use the settings to customize your header.

  4. Click Save.

The sidebar menu acts like a table of contents for your store. No matter where a customer is, the menu button will show your store's main menu and footer menu:

The sidebar menu displays two menus: the Primary menu is displayed at the top in larger type, and the Additional menu is displayed below the Primary menu in smaller type.

To customize the sidebar menu:

  1. Click Sections.

  2. Click Sidebar menu.

  3. From the Primary menu list, select the menu you want to display as the primary menu. Typically, this is your store's main menu.

  4. From the Additional menu list, select the menu you want to display below the primary menu. Typically, this is your store's footer menu.

  5. Click Save.

Slideshow

You can create a home page slideshow that rotates up to five images.

It's best to use high resolution images for your slides. Use images that are 3840 x 2160 px or larger, but don't exceed Shopify's upload limits.

Because the size and shape of the slideshow depends on the size and shape of the customer's device, your slideshow images will be cropped on some screens. Try to use images that have a focal point in the middle so that the important part of each image is always visible.

To learn more about the best practices for slideshow images, see Uploading images.

The slideshow section includes the following settings:

  • Slide height - Set the height of the slideshow. Select Adapt to first image slide height to base the height of your slideshow on the height of your first image.
  • Auto-rotate slides - Set the slideshow to play automatically.
  • Change slides every - Select how often to change slides.
  • Text and icons - Select a color for the text and icons that appear over the slideshow.
  • Image overlay - Add a layer of color over your image slide. An overlay can make slideshow text easier to read.
  • Opacity - Set the opacity of your overlay.
  • Image - Add an image slide to your slideshow.
  • Image position - Choose the most important area of the image to focus on in the slideshow.
  • Heading - Add a heading to your slide.
  • Button text - Add a button with a text label to your slide.
  • Button link - Link your button to another part of your online store.

Add a slideshow to your home page

  1. Next to Boundless, click Customize.

  2. Click Slideshow.

  3. Use the settings to customize your slideshow.

  4. Click Save.

Action bar

By default, the action bar shows your store's main menu. You can customize your action bar to show different items based on what page your customer is looking at. On the home page, the action bar is most often used to show your product collections. Within a collection, the action bar can show further subcategories or other related collections.

For example, if your store sells apparel, your action bar might show Men, Women, and Accessories on your home page. If a customer clicks Women, the action bar might then show Tops, Pants, and Footwear on the collection page.

To make your action bar work this way, use your main menu for links to your collections. Put links to other parts of your store (your Contact or About pages) in your footer menu.

To customize your action bar:

  1. Click the Sections tab.

  2. Click Action bar.

  3. From the Menu list, select the menu you want to display in the action bar.

  4. Click Save.

With Boundless, you can display a menu in your footer content.

To customize your store's footer:

  1. Click the Sections tab.

  2. Click Footer.

  3. From the Menu list, select the menu you want to display in the footer.

  4. Click Save.

Product

In the Product section, you can add or remove the following elements:

  • The product brand or vendor
  • A quantity selector
  • Social sharing icons
  • A dynamic checkout button
  • Product recommendations

You can also skip the first product image, set the style of your images, and choose the width of the product form.

To edit the settings for product pages:

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Sections.

  3. Click Product.

  4. To skip the first product image, check Skip first product image.

    This means that the first product image shows only on collection pages, and not on product pages. Using this option, you can design your first product image to look best on collection pages and tailor your other product images to look better in the larger space provided on product pages:

    An example showing the collection page with the first product image and product page with the second and third product images

  5. To set your image style, from the Image style drop-down menu, select Tall/square or Wide.

  6. To show the product brand or vendor, check Show vendor. For a brand or vendor to show, you need to add a vendor to the product.

  7. To show a quantity selector, check Show quantity selector.

  8. To show social sharing icons, check Enable product sharing.

  9. To show a dynamic checkout button, check Show dynamic checkout button.

  10. To set the width of your product form, from the Product form width drop-down menu, select Small or Large.

  11. Click Save.

Add or remove product recommendations

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

  1. From the top-bar drop-down menu, select Product pages.

  2. Click Product recommendations.

  3. Use the Show dynamic recommendations checkbox to show or hide 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: To show or hide the vendors in the product descriptions, use the Show vendor checkbox.

  6. Click Save.

Collection

Boundless includes several sorting and filtering, appearance, and pagination options for your collection pages.

  1. In the theme preview, open a collection page.

  2. Click the Sections tab.

  3. Click Collection.

  4. In the Appearance area, set the following options:

    • From the Image style list, select a picture orientation for product images, either Tall/square or Wide.
  • From the Image size list, select a size for product images.

  • If you want to increase the spacing between images, then check Add spacing between images.

  • If you want to show the vendor or brand name below product images, then check Show product vendor.

  1. In the Sorting & filtering area, set the following options:
  • If you want to show a list of sorting options, then check Show sorting options.

  • If you want to show a list that lets customers filter by tag, then check Show tag filtering.

  1. In the Pagination area, from the Pagination type list, select whether you want to show numbered pages or a "View more" button.

  2. Click Save.

In the Featured collection section of the theme editor, the Image style option lets you change how your collection and product pages show images:

  • Tall/square is best if your product images are square or in portrait orientation
  • Wide is best if your images are rectangular or in landscape orientation

The Image size option determines how large your product images are on your collections page. If you show small product images, then you can fit more images in a single row.

The number of images shown per row also depends on a customer's device (desktop or mobile) and window size.

  1. Click the Sections tab.

  2. Click the Featured collection section.

  3. Select a collection from the Collection list. Up to 50 products will be displayed from the collection that you select.

  4. From the Image style list, choose whether you want images to be Tall/square or Wide.

  5. From the Image size list, choose an image size.

  6. To increase the spacing around product images, check Add image spacing.

  7. To show the product vendor or brand name, check Show product vendor.

  8. Click Save.

Newsletter

You can add a newsletter signup to your home page. This lets you collect customer email addresses for email marketing campaigns. You can learn more about email marketing on the Shopify blog.

The newsletter section on a website. There is a field for customers to enter an email address and a button that says 'Subscribe'.

To add a newsletter signup to your home page:

  1. Next to Boundless, click Customize.

  2. Click Sections.

  3. Click Add section > Newsletter.

  4. Enter a heading for your newsletter signup in the Heading field. The default heading is "Subscribe to our newsletter".

  5. Enter a subheading for your newsletter signup in the Subheading field.

  6. Click Save.

Rich text

Use the Rich text section to provide any written content you want to display on your home page, or to embed any page created in your Shopify admin. For example, you can feature upcoming events by embedding your blog page, or display a page with any of the following:

  1. Click the Sections tab.

  2. Click Rich text.

  3. Enter and format your text.

  4. If you want to feature a page from your store, then click Add content and then click Page. Select a page to feature as your home page from the drop-down menu.

  5. Click Save.

Video

You can add a video hosted on YouTube or Vimeo to your home page. Videos can engage customers and generate interest in your business.

To add a video to your home page:

  1. Next to Boundless, click Customize.

  2. Click Sections.

  3. Click Add section > Video.

  4. Enter a heading for your video in the Heading field.

  5. Enter the share link for your video in the Video link field.

    A YouTube share link looks like this: https://youtu.be/OTJXAUZY9t0. You can learn how to copy the share link for a YouTube video in this YouTube Help article.

    A Vimeo share link looks like this: https://vimeo.com/281332510. You can learn how to copy the share link for a Vimeo video in this Vimeo Help Center article.

  6. Click Save.

Custom HTML

In the Custom HTML section, you can use HTML code to create custom content for your home page. For example, you can use HTML to format text blocks, create tables, or embed content from a third-party website.

To add custom HTML to your home page:

  1. Next to Boundless, click Customize.

  2. Click Sections.

  3. Click Add section.

  4. In the Advanced layout area, click Custom HTML > Add.

  5. Click Custom HTML, and enter the HTML code that you want to add to your home page.

  6. Click Save.

Ready to start selling with Shopify?

Try it free