Display Products on a Page

Like categories, once you create products, you can display them on your Storefront (or any other page, for that matter). Be sure to have images for your products so that they'll display nicely on the page. 

Tip: If you have multiple images for your products, you'll really be able to create a more interesting layout!

To display products:

  1. From the eCommerce section of the Build tab, drag and drop a Products element onto the page.


    A dialog displays all your current categories and all your uncategorized products. Expand a category to find products and select them. Or you can search for a product.



    NOTE
    : If you don't have any products created, you will be asked to create some
     first.


  2. Choose the product(s) to display on the page and click the Select link.


Now that the Products element is on the page, you can change how it displays your products, or even change the products that are displayed.

Tip: You can design with the Categories and Products elements in the same way that you use any other Weebly elements. Use the Title and Text elements to add more information. Use the Spacer element to add whitespace. Upload other images. Or visit our App Center to add a 3rd party tool!

Change the Product Layout

There are a number of different ways to layout the product images and info. By default, they display in a grid. If there are more products than fit on a page, pagination appears at the bottom.

You can change that layout to one of the following:

  • Grid: Products display in rows and columns. All images are the same size.
  • Masonry: The products are laid out based on the size of the image - usually alternating smaller and larger. Pagination displays at the bottom if needed.
  • Multi-Image: All the images you've uploaded for a product are displayed.
  • Single Row: The products display in a single row and the user can scroll to the left or right, similar to a slideshow.

 

To change the layout, in the Products dialog (opened by clicking inside the element on the page), click Change Layout and choose the layout you want. Click Done when finished.

Change Product Display Options

Once you decide on a layout, you can change other display configurations from the Product dialog (opened by clicking inside the element on the page).

Read the following sections to see what you can change.

Number of Columns

By default, the Products element displays 3 columns:

Here's the same Product element configured to use 2 columns instead of 3.

 

To change the number columns, click inside the Products element and in the Columns field of the dialog, enter a number or use the + or - icons to change the number. You can have up to 6 columns. The page redraws with the new configuration.

Pagination

When you have more products than can display on a page, pagination links display so that your customers can access all products. You have two options for pagination:

  • A Show More link that displays at the bottom of the Products element:


  • Page number links with page forward/backward links:

     

To set pagination, click Pagination and choose which option to use. You can also set the number of products per page.

 

Image Display

By default, products display the images you've uploaded for them. If you've uploaded more than one image, and you're using a single image layout, then the first image you uploaded is the first displayed. The image changes when the customer hovers over it.

You can turn images off, or you can change the aspect ratio at which they display.

Tip: The aspect ratio sort of determines the size and shape of your image. A 4:1 ratio would make the image width 4x the size of the height. A 1:1 ratio creates a square. A 3:2 ratio means the width is just a bit larger than the height. Feel free to play around with this ratio until you find the right look for your store.

To change image display, click Display Options and then Image Options. If you don't want to display images for products, you can turn off that option.

By default, images are displayed at a 1:1 ratio. Click through the other options and choose the size that works best for your page.

Button Display

By default, each product displays a button that navigates to the product detail page that dynamically displays information about that product. You can turn the button off, or you can change the text, size, and color (based on your site's theme) of those buttons.

To change how the buttons display, click Display Options and then Button Options.

Product Name, Price, and Short Description Display

By default, the name, price, optional sale price, and short description are displayed below the image.

To hide this product information, click Display Options and turn off the ones you don't want to display.

Text Placement

By default, the product name, price, description, and button are below the image and they are left-aligned. You can instead have the image to the left, right, or below that information. Or you can have the image behind the text. You can also have the text display on when your customer hovers over the image. Alignment can be either left, right, or centered.

To change text placement, click Display Options and then Info Placement.

Manage the Products that are Displayed

Once you've dropped the Products element on a page, you can change the products to be displayed and the order that they're displayed in.

Click inside the Products element to open the Products dialog.

Click Manage Products.
The products currently displayed are shown in the order they appear on the page.



To change products (add/delete) to display, click Select Products and choose the ones you want.

To reorder the existing products, simply drag and drop.

To delete a product, click the minus icon to the left of the product image.

Click Done when you're finished. Your changes are reflected on the page.

Was this article helpful? 6 out of 9 found this helpful