shopify app
Product boxes are a powerful way to showcase the products in your Shopify store. They enable you to build out customized experiences without code, allowing your customers to explore products and add them to their cart from custom landing pages, sections, or theme pages.
Product boxes are powered by data from your Shopify store. What this means is that when you add a product box on your page, the data (e.g. product price, title, images) are all coming from the products in your Shopify store. This means that as you update attributes on your products in Shopify, or inventory changes, those changes will be reflected on your pages automatically.
👉Tip: If you would prefer an in-depth video demo of how to use the Shopify product box, skip ahead to the Putting it all together section
To start building a product box, create a new content entry in Builder. Then once you are in the visual editor drag and drop a product box onto the page:
You can choose to "swap" out the base template for one of our pre-made templates, or build out a product box from scratch. We recommend starting out by having a look at the templates in the template gallery. Hopefully you can find one that works for you, and at the very least you will get some inspiration on what is possible!
To have a look at the template gallery, click "swap"
If you would like to build out a product box from scratch, click "choose product" and start dragging other elements into the product box. You can drag any of the Shopify blocks (e.g. product title, product image) to include dynamic data, or choose to drag any other element (e.g. columns, box) for structure.
👉Tip: save the product boxes you create as templates to reuse on other pages!
The following blocks are special blocks that can be used inside of a product box block to display product data
The product title box allows you to display the product's title. You can choose to have it direct users to the product page when clicked by clicking the element and clicking on the options tab and selecting "link to product page on click. Since all these Shopify blocks are made out of the basic Builder blocks, you can also edit the style of the title just like you would a regular text block.
The product image box allows you to display the product's image. There are a few options that you can choose for the product image, such as what behavior you want to have when the image is clicked, and what behavior you want when someone hovers over the image. You can choose to have the image fill the screen when clicked so customers can get a close up view, have it link to the product page, or do nothing. For the on hover action you can choose to have the main image be swapped with the secondary image, or do nothing. Here is an example of making the product box a fixed width, adding a product image, and then choosing a few different options.
The product image gallery allows you to add all the all of a product's images to the product box. If used in conjunction with a product image, you have the option to swap the image someone clicks on with the main image:
By default the product image gallery is set up to be a scrolling box with 100px wide images. Because all these elements are made from Builder blocks, you can customize the look and feel of the gallery by clicking "edit contents" on the product image gallery or finding the layers you want to modify in the layers tab.
For example, if you wanted to display larger images in a grid, you could select the image blocks in the gallery, increase their size, and then change the layout of the container to be grid instead of scroll:
Another common use case is to show thumbnails of all the product images vertically next to the main product image. One way to do that is to drag a product box onto the page, choose a product, drag a column block in, add the main product image, add the image gallery, and then resize everything to your style:
The product price block allows you to display the product price. It has built in functionality to show the sale price if the product has a "compare at price" entered in Shopify. If the product has no "compare at price" then the regular price will show. The product price block also provides the option to link the the product page on click.
You can customize the style of the product price by adding styles:
The product tags block allows you to display product tags within the product box. This can be useful if your store uses tags to manage product information, and you would like to display some or all of those tags on your store. An example is if you tag all your products with ingredient information, you can show that information in the page that you are Building.
You can use the "filter by" option to only display tags that contain certain text. With this you are able to choose certain "categories" of tags to show to your customers. By default, the string you enter into the "filter by" option gets removed, but you can turn off the "remove filter" option to change that behavior.
The product description block displays the product's description. You are free to style it inside of Builder, but to edit the contents of the description you will need to edit the product description in Shopify.
The product variants block is a powerful way to allow customers to choose different variants of your product. The variants block works by taking all the different variants a product has and binding those values to blocks that customers can click and interact with. When combined with an add to cart button, the variants block determines what variant of a product gets added to the customer's cart.
There are a few main options for the variants block:
- Option display style - By default the variants are all displayed as
combined, meaning the customer would choose their selected variation from a list of all the possible combinations of different options that a product has. The other choice for this setting isseparate, which breaks up each product option into its own list. - Option display type - By default the product variants are displayed in a dropdown or dropdowns. If instead you would prefer customers to click on a box to choose a variant or option, choose
boxesas the display type - Dropdown arrangement - This only applies if you select
separateas the option display style. It allows you quickly change from a stacked to row configuration for the product options. - Show labels - This only applies if you select
separateas the option display style. It allows you hide or show the labels for product options
One thing to note when the product variants block is used in conjunction with a product image block: if the selected product has specific images for particular variants, selecting different variants using the product variants block will update the main product image to show the variant's image.
The product quantity block is useful when you would like customers to be able to buy multiples of a product. When used in conjunction with the add to cart button in a product box, the product quantity block determines how many of a product variant gets added to the customer's cart. There are two options for types of product quantity blocks: classic is pretty much the default quantity picker web browsers show, and simple is a streamlined but customizable button based quantity picker:
Last but not least, the add to cart button block allows you to tie together all of the other blocks into something that your customers can actually use to buy products from your site. When you drag an add to cart button into a product box there are multiple options that enable you to customize the button. Some of those are:
- Link to cart page on add to cart - By default this is set to true, meaning when someone clicks on the add to cart button the currently selected product variant and quantity will be added to the customer's cart, and then the customer will be redirected from whatever page they are currently on to the cart page on your store. If you turn this off, when a customer clicks the add to cart button the item will still be added to their cart, but they will not be redirected
- Reload page on add to cart - this setting only applies when the
link to cart page on add to cartis turned off. If turned on, thereload page on add to cartsetting will refresh the current page after the item is added to the customer's cart. This can be useful if you want to refresh icons that reflect cart status, like maybe a cart icon. - Link to product page on click - If this setting is turned on, when a customer clicks the add to cart button, nothing will be added to the customer's cart and instead they will be directed to the product page for the item
Below those options you will also see inputs to customize the button text, include the normal state, a product added state, and a sold out state.
You can customize the look and feel of the button just like any other Builder element. To modify style on the button itself, you will need to click edit contents after clicking the add to cart button, or open the layers tab and find the "Button" layer within the add to cart block.
All the product box blocks we have gone over are powerful, but where they really shine is when they work together. In the video below we will go step by step creating a two column product box example.
