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.
If you use customized themes, please contact us at firstname.lastname@example.org
In this article
- Switch filter's layout
- Sticky filter
- Filter layout
- Page layout
- Display collection image and description
- Change the product list
- Enable/disable product item elements
- Change the label (Sale, Sold Out & Custom Labels)
- Product item title
- Product item vendor
- Product item price
- Product item description
- Change color swatch
- Enable size swatch
- Set product images to have an equal height
Follow these steps to access the Customization settings of the Default theme:
- 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.
Switch filter's layout
Switch the filter's layout from vertical to horizontal, or vice versa.
Enable/disable sticky filter on both mobile and desktop versions to keep showing filter upon scrolling the page.
Display the filter with the following layouts:
- Filter Layout Default
- Filter Layout Collapse
- Filter Layout Slide (Note: Only work on Vertical Layout)
Display the page with the following Layout Types:
- Box: Max width contain is 1200px
- Fullwidth: Max width contain is 100%
Display collection image and description
- 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)
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
- 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
- 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.
|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.
Enable Size swatch
Display size swatch along with color 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
The toolbar has the following elements: View As, Product Count, Sort By. You can enable/disable them per your requirement.
Hide toolbar elements on Mobile: