Warning
You are browsing the documentation for the new Sharetribe Web Template. If you are using FTW-daily, hourly or product, see the legacy documentation.

Last updated

Tutorial step 2 – Choose marketplace layout

You can choose any layout for your specific marketplace. In this tutorial article we will set the layout options that work the best for a bike rental marketplace.

Table of Contents

Layout settings allow you to choose the layout of some of the key pages in your marketplace by choosing from a set of options. To get started, you should be in Design -> Layout in your Test environment in Console.

1. Search page layout

Search page layout has two options. In "Map view", there's a grid of images on the left and a map on the right. They work together. This view works nicely for location-based marketplaces. If your marketplace is not dealing with location, "Grid view" gives you a standard e-commerce style view instead: a grid of images, with search filters on the left. Biketribe is a location-based marketplace, so we'll go with the former option.

Choose "Map view"

2. Listing page image layout

Image carousel with thumbnails is a good default for most marketplaces. However, if the listings in your marketplace are properties with attractive images, screen-wide cover photos can make the listing page look more attractive. The carousel works well for our bike images, so we're going to take the former option.

Choose "Image carousel with thumbnails"

3. Listing thumbnail aspect ratio

Listing thumbnails are cropped versions of the listing image. They are displayed on many pages: create listing page, listing search, checkout, and order details. The three options are landscape (width larger than height), square, and portrait (height larger than width).

Most bike images are probably taken in a landscape orientation and therefore the thumbnails will look better in the search results with this option.

Choose "Landscape (4:3)"

Save Changes

Once you're happy with the changes, click "Save changes" to activate them. If the "Save changes" button is grey, that means the current set of changes has already been saved.

Next: landing page

That's it for layout! Next, go to Step 3: Modify the landing page.