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 and search results page such as title, vendor, price, etc.

This article is for the old front-end lib V1 from Boost Commerce.  For the new front-end lib versions, please refer to  this doc .  Please read  this document  first to know which version you are using. 

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
Access the place you prefer to apply the changes from the top drop-down list:
  • On the collection pages: Choose Collections >  Default collection > Collection pages on the left sidebar.

  • On the search result page: Choose Others > Search > Select Search page 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.

  • Vertical

  • Horizontal

Sticky filter

Enable/disable sticky filter on both mobile and desktop versions to keep showing filter upon scrolling the page.

Desktop

  • Horizontal

  • Vertical

Vertical

Mobile

Mobile

Filter layout

Display the filter with the following layouts: 

  • Filter Layout Default

Default

  • Filter Layout Collapse

Collapse

  • Filter Layout Slide (Note: Only work on Vertical Layout)

Slide

Page layout

Display the page with the following Layout Types: 

  • Box: Max width contain is 1200px

Box

  • Fullwidth: Max width contain is 100%

Fullwidth

Display collection image and description

  • Tick/untick Show Collection Image, Show Collection Description

    Header
  • Change the color of the collection title & collection description from Collection Header Color.

Collection header

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)

Product list

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]

Still, our app can return a maximum 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.

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, Circle)
  • 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

Enable Size swatch

Display size swatch along with color swatch.

Size swatch

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

Toolbar

The toolbar has the following elements: View As, Product Count, Sort By. You can enable/disable them per your requirement.

Toolbar

Hide toolbar elements on Mobile:

Toolbar

Related Articles