How to config the product item layout in our default theme

When you install our app and have our default layout theme (see Default theme definition and Default theme demo), you could easily change some of the product item's elements on collection pages such as title, vendor, price, etc.

If you use customized themes, please contact us at support@boostcommerce.net

In this article

Follow these steps to access the Customization settings of the Default theme:

1
Go to  Online store >  Themes.
2
Choose the desired default theme with the filter that you would like to make changes >  Customize.
3
Choose Collection pages from the top drop-down listing and on the left sidebar.
4
 The next steps can be flexible based on your needs:

Switch filter's layout

Switch the filter's layout from vertical to horizontal, or vice versa.

Display collection image

  • Tick/untick  Show Collection Image, Show Collection Description
  • Change the color of the collection title & collection description from Collection Header Color.

Change the product list

Decide how many products displaying on desktop and mobile.

  • Products per page (from 2 to 50 items)
  • Products per row on Desktop (from 2 to 6 items)
  • Product per row on Mobile (from 1 to 3 items)

By default, our app returns amaximum of 70 products in each API request. If the value of variable products_per_page more than 70, our API will return only 20 products for each request.

According to Shopify, the number of products can be output to 50. Moreover, if you want to load more than 50 products per page, it could affect your site performance. [ Learn more]

Enable/disable product item elements

Tick/Untick these settings:

  • Product Item type: Show products as Grid/ List
Grid List

  • Product Item layout: No Border, Border No Padding, Border No Padding Image, Border Has Padding
No Border Border No Padding Border No Padding Image Border Has Padding


  • Text alignment: Left, Center, Right
Left Center Right

  • Show details when hovering: Display the alt text upon hovering over products.
Show details when hovering Not show details when hovering
  • Show product vendor: Show/Hide Vendor under products
Show Vendor under products Hide Vendor under products
  • Show product price: Show/Hide Price under products
Show Price under products Hide Price under products
  • Active image swap: Display the second product image upon hovering over products.
Active image swap Disable image swap

  • Enable collection sorting: Show/Hide the Sort by section
Show Sort by Hide Sort by
  • Show product reviews: Show/Hide Review stars under products. Use this setting only when the store has a product review integration.
Show Review stars under products Hide Review stars under products

Change the label (Sale, Sold Out & Custom Labels))

  • Enable/ Disable showing sold out & sale labels
  • Product Label Position: Set the position of the labels (Top Left, Top Right, Botton Left, Bottom Right)
  • Product Label Type: Define the shape of the label (Rectangle, Cirlcle)
  • Has Border Radius:
Border Radius enabled No Border Radius
  • Enable  the Custom Label By Tag:

Please refer to this link to create custom labels, for example, Featured, Summer, etc.

  • Background color & Text color:

  • Use Product Label Image: Enable this if you want to upload your own Sale & Old out label pictures

Product item title

Change color, font, size of the product titles.

Product item vendor

Change color, font, size of the product vendors.

Product item price

Change color, font, size of the product price.

Product item description

Change color, font, size of the product description.

Change color swatch

Enable/disable color swatches & how they display.

Config the product item layout| Change swatch image & height

There are 3 display types of Color swatches under products:
Color Color Image Product Image
When to use Products have the basic color (Blue, Green, etc.) Products have special colors (Gradient Abyss, Gradient Citrus, etc.)

Note: Need to upload files of special color in format: color-[COLOR_NAME].png. Eg, color-gradient-abyss.png in Settings> Files > Upload files
(Optional) Basic color should be re-uploaded to avoid 404 issue. 		Display all variant images in Shopify admin.

Note: Guide to add images to product variants.                                                                                                                                                                                                     
Data example

Basic color should be re-uploaded to avoid 404 issue.

Basic color should be re-uploaded to avoid 404 issue.

Basic color should be re-uploaded to avoid 404 issue.

Frontend

Frontend

Frontend

Frontend

Set product images to have an equal height 

  • Equal Height: Decide your preferred size that all product images should look like (square, portrait, landscape, or a manual ratio)
  • Equal Height Crop Image Position: bottom, top, or center

Change style, position & default view as

Please kindly contact us at support@boostcommerce.net

Related Articles