How to Add and Customize a Collection Grid
On This Page
TABLE OF CONTENTS
Getting Started
The Collection Grid is a useful block for showcasing previously made collections. Whether your store decides to highlight popular, new, or pushed collections here, this tool will help your customers to see them. You will need to have already made collections in order to use this block; if you have not already done this, we recommend checking out How to Add and Manage Collections for more information and help.
Finding Collection Grids
In order to find the customization screen for your store's webpage, and in order to adjust your Collection Grids, please follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Click Collection Grid
- If you do not see Collection Grid, scroll to the bottom of the customization menu and select Add section
- From here, find and select Collection Grid to add the block to your page
Customizing Collection Grids
Once you have found your Collection Grid block, you will notice several areas for customization. These are:
- Background Color
- Card Background Color
- Card Border Color
- Card Text Color
- Heading
- View Text
- View Link
Background Color
This section allows for the customization of the color of the background of the surrounding block. While the below sections allow for the customization of the linked Collection blocks (cards), this customization feature affects the surrounding block. We recommend playing around with these features to find the color combinations that best fit your store.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store
Card Background Color
This section allows for the customization of the color of the background of each of the individual Collection blocks.
It is important to note that any customization done in these general settings will affect every single added panel added to this specific block. If your store is hoping to include multiple Collection Grids with different designs and colors for each, you will need to add more Collection Grid Sections.
Because each added collection most likely has an attached image, this Card Background Color customization may not be visible
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store
Card Border Color
This section allows for the customization of the color of the border of each of the individual Collection blocks. The border here is incredibly thin, so any color changes will probably not be especially visible.
It is important to note that any customization done in these general settings will affect every single added panel added to this specific block. If your store is hoping to include multiple Collection Grids with different designs and colors for each, you will need to add more Collection Grid Sections.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store
Card Text Color
This section allows for the customization of the color of the text of each of the individual Collection blocks.
It is important to note that any customization done in these general settings will affect every single added panel added to this specific block. If your store is hoping to include multiple Collection Grids with different designs and colors for each, you will need to add more Collection Grid Sections.
When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store
Heading
This section includes a text box allowing for the customization of the Heading of the Collection blocks. This will appear above all of the individual Collection cards.
View Text
This section includes a text box allowing for the customization of the message in the Collection link. This will appear above the cards next to the abovementioned Heading.
View Link
This section includes a text box allowing for the customization of the URL / Link that the abovementioned View Text links to. You can utilize this text box to insert either a direct link through a URL or by selecting the text box and searching through collections. It will appear something like this:
Finding and Adding Grid Items
Once the general Collection Grid settings have been set, you can begin adding the collections that will link to your individual cards. These are the Grid Items. In order to begin linking your Grid Items, follow these steps:
- From your myShopify homepage, go to Online Store > Themes
- Find and click Customize
- You will see the customization menu on the left of your screen. Select the drop-down arrow to the left of Collection Grid
- Select Add Grid Item
- Select your recently added item
Customizing Grid Items
Once your Grid Item has been added, you can begin your customization. In this section, you'll notice only one area for customization: Collection.
Collection
This section allows for a previously made collection to be attached to your Grid Item card. Once you have clicked Select Collection, you will notice a drop-down menu allowing for you to choose the linked collection. That will look like this:
