Tips

Image size syntax

Syntax: {width}x{height}. If {height} is empty, the height will be scale base on the width. Ex: 100x, 150x100, ... Use master to display the original image.

This syntax only helps Shopify know the size you want to resize the image. It does not make to display the image larger. That depends on the area that contains the image. For a responsive screen, the width of the image must be less than its wrap area.

This guide shows you how to add a label, icon syntax to the link list or item title.

Label syntax: {{label [label_name]}}. Ex: {{label new}}. Note: space is not allowed before the label key and after the label name. There is only one space between the label key and the name. Below are some wrong syntaxes:

Use the syntax {{icon [icon_class_name]}} to add an icon to a text. Ex: {{icon lnr-handbag}}. You can refer to this page to view all icons that are provided in the theme.

Product item settings

You will see these settings in sections that show the product list in a grid layout or slider. Some sections and pages such as Powerful product block, Powerful product block 2, Banner Creator pro, collection page, search results page, upsell block,...

  • Choose item size: change the size of an item. That also helps you change the number of items per row. In slider format, this configuration will help you change the number of items is shown in a slide. Below is a summary of all values:

Item size

The number of items per rows

Desktop

Mobile

Small

5

2

Medium

4

2

Large

3

2

Very large

2

1

  • Show the main thumbnail by: specify the thumbnail of the product will be displayed. There are 2 values for this setting.

    • Featured product image: display the image that is set as the feature.

    • First available variant image: display the image of the first available variant.

  • Show label: show/hide the product labels. You can configure the product labels in Theme Settings > Product labels.

  • Show add to cart button: show/hide the add to cart button.

  • Show the quick shop button: show/hide the quick shop button. This button will help customers view your product quickly without going to the product page. When customers click this button, a quick view popup will be displayed to help customers can view the product and buy it.

  • Show the compare button: show/hide the compare button. This button helps customers add the products to the comparison list so that they can compare the attributes of products such as price, image, description,... and buy the products they like.

  • Show the wishlist button: show/hide the wishlist button. This button helps customers add products to their wishlist.

  • Show review stars: display the product reviews base on your review app you are using. You can configure the review app in Theme Settings > Product Settings > Review app.

  • Enable product options: show the product options so that customers can choose the option and purchase the product without going to the product page.

The option has the name is "color" or "colour" will be shown as the "Color Swatches" format, please refer to this guide to configure the Color swatches format. Other options will be shown as small buttons. You can also display options as a drop-down format in Theme Settings > Product Settings > "Show option as a drop-down", just add your option name in this field.

  • Show countdown timer: show/hide the countdown timer. You can configure countdown time for all products or different products.

  • Show product vendor: show/hide product vendor as a brand name.

  • Product name's size: if your product name is too long, you can make it shorter with this setting. Just drag to the number of words you want to show, the product name will be displayed shorter. And leave zero if you want to display the full product name.

Local pickup feature

We integrated the local pickup feature in our themes. You do not need to do anything, you only need to manage preferences for a local pickup location.

  1. From your Shopify admin, go to Settings > Shipping and delivery.

  2. Under Local pickup, click Manage for the location that you want to edit.

  3. Update the settings.

  4. Click Save.

How to search in our documentation

You can search for everything in our documentation via the below tip:

  1. Click the Search icon on the left sidebar

2. Enter the words which you want to find in the search box.

3. A list of keywords that you search will be shown below the search box. Just click to choose one of them which you are searching.

Hope you are happy with our theme. Please feel free to let us know if you have any questions or discussions via our support center - https://boostheme.zendesk.com/hc/en-us/requests/new. Our developer will be glad to answer your questions.

Last updated