This turned out to be more difficult than I expected, so I am documenting how I accomplished it here.
- Responsive, multi-column layout
- Alphabetical order from top-to-bottom and then left-to-right.
- Columns should be the same length. If the vendors cannot be split evenly across columns, the extra items should be spread across the left-most columns.
- Links should point to a collection for the vendor if one exists, otherwise point to a Shopify built-in vendor page
It is simpler (and easier to find tutorials online) if you would rather have your vendors ordered from left-to-right and then top-to-bottom. This guide, which I adapted the vendor-list-item.liquid
snippet from, does a good job for that scenario.
Vendor A Vendor E Vendor H
Vendor B Vendor F Vendor I
Vendor C Vendor G Vendor J
Vendor D
- The liquid markup in this gist is compatible with the Debut Shopify theme. You may have to change certain class names to comply with the naming conventions of your chosen grid system.
- It is recommended to create a duplicate of your theme as a backup before trying to follow this guide!
Navigate to your theme's code editor (Online Store > Themes > Actions > Edit Code).
In the theme code editor, click "Add a new template". Shopify will prompt you to select a template type and name your template. You will need to select the page
template type. I chose to name my template vendors
.
Copy the contents of page.vendors.liquid
from below, paste them into the new file in the code editor, and save the file.
Optional: If you would like to customize the number of columns used to display your vendors, you can change the value of totalCols
on line 12 of this template.
In the same theme code editor, click "Add a new snippet" and name it vendor-list-item.liquid
. Copy the contents of vendor-list-item.liquid
from below, paste them into the new file in the code editor, and save the file.
Navigate to the pages screen (Online Store > Pages) and click "Add page". Name the page whatever you would like.
On the right-hand side of the add page screen, there will be a dropdown to select a page template. Select the page.vendors
template that you just created. Save the page.
That's it! You can use the page you created in a Shopify menu (or anywhere else) just like you would include any other page.
vendor-list-item.liquid adapted from this guide
@marioloncarek @shopifypartners
how I can get vendors, group by alphabetical letters