Product Collections
[nc-collection]
Last updated
[nc-collection]
Last updated
North Commerce currently has a collection of shortcodes available to all beta users. These shortcodes make North compatible with virtually every WordPress theme and builder.
This shortcode renders a collection of products. You can create as many pages as you want and make them children of the root /collection page for each category. This shortcode also will get the second image you have for your product and will show that image on hover.
We do have plans to create native blocks for popular WordPress builders. We will also have our own Gutenberg blocks which will be available within the pro version of North Commerce
Use the shortcode below to render your products on any page.
The shortcode [nc-collection] will render a list of products in a 3x3 view on desktop and a 1x1 view on mobile. You do have the ability to add arguments to update the grid size.
The list will include the first product image, the title and the price of the product.
A shortcode argument is something you can pass into the shortcode to update some basics settings of what the shortcode looks like. Below is a list of what is available
Category - Here you can set a category name that you have assigned to the products and only the products with that category will render
Desktop Columns (desktop_columns) - You can set the desktop columns to render different column amounts. You can render any amount between 1 and 5.
Mobile Columns (mobile_columns) You can set the mobile columns to render different column amounts. You can render any amount between 1 and 3.
You will notice we have category="shoe". It is important to wrap the name of your category in quotations. The desktop and mobile column values are just numbers without the " " quotations.
Don't be surprised when you add a category and set the columns to be 3 or 4 and only 1 - 2 items appear. This is because you may not have enough products with that category that it would span across the full row.
If you'd like to edit the CSS of the shortcode you can see the styling section for more information.
