You can easily add a product collection to any page using this element.
How to Use The Product Collection Element
In the element library on the left, scroll down until you see the Collection element under the Shopify heading.
When you drop a Collection, choose which collection it shows.
Drag the element to where you'd like it on your page. A Select a product collection window opens, where you choose the collection to display.
In the settings panel on the right, you can then change which collection is displayed. The Main section also has these settings:
Update product order: refreshes the order of the products to match Shopify.
Hide out-of-stock products
Number of products
Show as: Grid or Slider.
Columns per row
Stacking on smaller screens
The Collection Main section.
đĄ Note: the order of the products in your Collection Element may differ between the editor and the live page. This should be taken into account when creating content inside the product boxes of your Collection Element.
Apply changes to all
Previously called 'Product Sync'.
With the introduction of our Collection Element > Apply changes to all feature, you can now make bulk edits to all of the Product Boxes (and the elements inside them) across an entire collection! This can help ensure a consistent design across all of your products in your collections.
How does it work?
As soon as you enable Apply changes to all, any changes you make to a product box (or its child elements) will update across the other product boxes in your collection.
Some ways you can use Apply changes to all:
Adding/deleting product box elements
Changing the color, size and positioning of product box elements
Changing any product information within your ecommerce platform will filter through, meaning that you do not need to revisit Shogun unless you wish to make design changes, or updates!
Collection as a Slider
The Product Collections can be converted into a Slider/Carousel with a click of a button.
When you've added your collection to the page, look for the Show as option in the Main section of the settings panel on the right, and choose Slider.
When this option is toggled, you will be presented with more options to customize the Slider's styling for the arrows, dots and positions within the slider.
For more information on how to best utilize the Slider, we have an in-depth guide here:
FAQs
Is it possible to set up a product box to swap to a new product when the variant that is the main one goes out of stock?
At present, no, but you can add a 'Product Variant' element to your collection product box and that will allow the visitor to switch to in-stock variants if and when the variant associated with the product box in the editor goes out of stock.
You can further define what variants the end user can and can't see with the 'sold out variants' behavior dropdown in the settings panel.
My Product Add to Carts are reading 'sold out' but I have 'hide product when out of stock' toggled on. What gives?
At present this toggle takes into account the availability of all the variants of a product, and if you haven't included a variant element in the layout, it is possible for product box content to render on the live page, but the end user is not able to switch to in-stock variants. Including a Product Variant element in the layout would resolve this issue.
Does the Collection element account for Shopify Markets availability?
Not at this time. When a Collection element is added to a page, it will pull all products affiliated with that Collection. This includes products within the collection that are set to be unavailable for specific markets.