The default theme is a feature-rich theme used to showcase the features of the Boost AI Search & Discovery App. Our app allows you to customize the display of your default theme and how the collection & search page shows up on your front store.
What is a Default theme?
The default theme is our app's original theme with fully integrated app features. During the auto-setup process, the default theme will appear in 2 situations:
When you first set up our app
When you set up our app on a certain theme
In either case, if [Target Theme] is not in our supported themes list or the supported theme was heavily customized, the default theme will take place.
The default theme will replace the collection page and search page of [Target Theme] while keeping all other pages' displays unchanged.
Customize the display of the Default theme layout
By default, our Default theme displays all the features of our app.
To modify the Default theme layout:
From the app's admin, go to Theme > Default theme settings.
In the General tab, customize:
Page layout type: You can determine whether product items whether to be displayed in pixels or percentages.
Note
Show collection image: Enable collection cover image
Show collection description: You can provide a short description of the collection right below the collection title.
Header background color: Once the collection image is disabled, the background color will take place.
Header text color: This setting applies to the collection title and description.
View as: When enabled, your customer will have the option to display the products list as grid view or list view.
Product count: Displays the total number of products in the collection.
Sort by: By enabling this setting, you can apply the Sort by options feature to the collection page and search page.
View as type: This option is available only when you tick the View as box.
3. Select Save Settings.
Customize the display of the Product list
To edit the display of your product list:
From the app's admin, go to Theme > Default theme settings.
In Product Item tab > Listing. In the drop-down of the Product item, modify:
Default type: Display product list as Grid or List.
Layout: Define the display of product items.
Text alignment: Define the display of product details.
Show product vendor: Display product providers
Show price: Our app can display both the initial price and the price after the discount on each product
Show product review: This setting only works with products having review integration.
Show details when hovering: All product information will pop up when the customer hovers over each item. This feature only works on Grid type on Desktop.
Image swap on hover: Display the second product image upon hovering over products.
Product image aspect ratio (Width: Height)
Disable: Images are displayed in the correct size uploaded.
Auto: Images are displayed in the default size of the default theme.
Square: 1:1
Portrait: 2:3
Landscape: 4:3
Manual ratio: You can adjust the image based on fixed ratios or manually scale the image according to your liking.
Note
Crop image position: select the image cropping position to optimize image display.
Products per page: Maximum number of items displayed on the collection/search page.
Products per row on desktop/mobile: Maximum number of items per row on the collection/search page.
Note
You can display up to 50 products on the collection/search page.
The limit of products per row is 6 products on desktop and 2 products on mobile.
This setting has no preview.
3. Select Save Settings.
Customize the display of the Product detail
To edit the display of your product details:
1. From the app's admin, go to Theme > Default theme settings > Product Item tab.
2. In Detail, you can customize product text display:
Color: Replace that standard text color with your custom color.
Text transform: Specifies the display text format.
Font/Font style: Each font comes with corresponding font style options.
Font size: Toggle the slider with a maximum font size of 30.
3. In Swatch settings > Enable Show item swatch to display filter options as swatch.
How to name your swatches:
For Color swatches, these are examples of how you should name your swatches to make them work properly with our Theme Settings V2 editor later:
• Black swatches should be named color-black.png
• Sky blue swatches should need to be named color-sky-blue.png
• White swatches should be named color-white.png
To sum up, we have this formula: color-colorname.png
⚠ Please make sure that all is lowercase, no special characters
For Size swatches, the same rules apply, for example, a Size S swatch will be named: size-s.png (capitals become lowercase)
Show swatch name when hovering: Tick if you want to show the swatch only when customers hover over the product.
Change product image when interacting with swatch icon: When customers swap or click on the icons in the swatch box, our app allows you to display the corresponding images by selecting.
Swatch type:
Swatch by color: By default, this swatch displays simple colors as swatch icons.
Swatch by image: Display swatch icons for products with one or more mixed special colors. You can customize swatch icons by uploading corresponding images.
Swatch by product image: Displays all variants of the product in Shopify admin as swatch icons.
Swatch by text: Displays product options as text values in swatch. In text swatch, you can also opt for Background/Text/Border color.
Swatch shape: Define the shape of the swatch icon as a Circle or Square.
4. In the Product label tab, create a custom label:
Position: Determine the placement of the label in the product image.
Type: You can shape product labels as Circle or Rectangle.
Label tag:
Sale label: When enabled, products on sale will be labeled to capture buyers' attention.
Sold-out label: If you choose to show out-of-stock products in your product list, this label will mark the sold-out products.
Custom label by tag: To enable this label, you must ensure that the target products are tagged with the syntax pfs:label-[Desired label].
For example, with the tag pfs:label-New Arrivals, the product label on the front store will show up as New Arrivals.
Label display: You can choose the label to display as Text, Percent (For sale label only) or Image.
Note: Once you select the label display as Image, you are required to upload images in the default size for the best display. Or else, that image label will not show up.
Background color: Background color of custom label.
Text color: Color of text in a custom label.
5. Select Save Settings.
Customize the display of the Default theme layout on App Lib V1
To access the Customization settings of the Default theme on App Lib V1:
1. From Shopify App Admin > Online store > Themes.
2. Select [Target Theme] > Customize.
3. In the top drop-down bar:
To customize the collection page, select Collections > Default collection > Collection pages on the left sidebar.
To customize the search page, select Others > Search > Search pages on the left sidebar.
To customize the collection page/search page display:
Under the heading of For layout > Select Layout Type:
Box: Max width is 1200px.
Fullwidth: Max width is 100%.
Under the heading of Toolbar, customize corresponding options to customize the product list, product detail, and custom label displayed on your storefront.
Tick Enable Display Swatch to enable Color swatch.
Tick Display Swatch Size to enable Size swatch.
Under the heading of Equal Height, input your preferred image ratio and crop image position to optimize the product image display.
Click Save.
Tutorial video
Watch our tutorial video to learn how you can customize our Default theme:
If you need any further assistance, please don't hesitate to contact our support team at [email protected].