How to Add and Customize Collection with Image Blocks

Getting Started

The Collection with Image block is an extremely convenient means of displaying and highlighting specific collections. These collections, along with preview images, can help customers quickly find and purchase the items that they may (or may not) be searching for.

Finding Collection with Images Settings

In order to begin customizing this section, 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. Find and select Collection with Images
If you cannot find Collection with Images, you can add them by selecting Add Section > Collection with Images (It may also appear as Featured Collection with Slider)

Customizing Collection with Images Settings

Once you have opened the customization tab for the Collection with Images, you will find several sections for customization:

Collection
Products to Show
Image
Background Color
Text Color
Heading
Text
Button Background Color
Button Text Color
Button Text
Button Link

Collection

This section includes a drop-down menu allowing for a collection, one made prior to this customization, to be linked to this Collection with Images section. Once you click Select Collection, you will see something like this:

Products to Show

This section includes a sliding cline that allows for the number of collection products being displayed to be changed. The number of displayed products can range from 4 to 48.

Image

In order to add a new image to your block, click Select Image. From here you can upload or select the image your store wishes to display alongside your collection. Please note that the recommended image size is beneath this section. It will look something like this:

If your image doesn't fit these specifications, it will not properly fit.

The recommended image size is calculated as the optimal size across many possible screen sizes (PC monitors of differing sizes, Mac, mobile, tablet, etc.)

After you have chosen your image, you will notice another customization option become available: Add alt text.

Adding alt text is a good way for your to include addition descriptions that will appear just beneath your icon. You can add up to 255 characters to this alt text feature

Background Color

This section allows for the customization of the color of the background of the collection block.

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

Text Color

This section allows for the customization of the color of the text of the collection block.

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 a content heading. This heading will be positioned above both the Text and Button that describe and link to the collection being displayed in the block. For the Heading, we recommend something attention grabbing and catchy to capture the eye of customers.

Text

This section includes a text box allowing for the customization of a content description. This will be positioned between the Heading and Button and serves to describe the products being displayed in the block. We recommend using a short and succinct message here, if any at all.

Button Background Color

Here you will find the option to customize the background color for your content Button.

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

Button Text Color

Here you will find the option to customize the text color for your content Button.

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

Button Text

This section includes a text box allowing for the customization of the message that will appear on your block's content Button.

Button Link

This section includes a text box that allows for your store to connect a link to the above Button. 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:

Theme Settings

Below the general settings for these blocks, you will see a drop-down feature including Theme Settings. These are extra features and settings that pertain specifically to the theme being used here. Under Premium Theme Multi, you will see the following areas for customization:

Show Discount Label
Product Image Size
Show Vendor
Price Position
Show Color Swatch
Show Reviews Badge
Show Inventory
Low Inventory Threshold
Show a Sidebar on Homepage

Show Discount Label

This section includes a tick box that allows for a label advertising the product discounts available in each collection section.

Product Image Size

This section includes a drop-down menu allowing for adjustments to be made to the product image sizing. The sizing options available are: Natural, Short (4:3), Square (1:1), Tall (2:3). We recommend playing around with these sizings in order to find the structure that fits your store's site best.

Show Vendor

This section includes a tick box that allows for a small descriptive section appearing between the displayed product's name and its stock count. This name comes from the vendor label written in the product's description.

Price Position

This section includes a drop-down menu allowing for the placement of the product's price. The two options are: before product title and after product title. We recommend playing around with these features to find the set up that best fits your website.

Show Color Swatch

This section includes a tick box that allows for the display of the product's color swatch. If deselected, this swatch will not appear. We recommend playing around with this feature until your store finds the best fitting setting.

Show Reviews Badge

If your store has downloaded the Shopify Free Product Review application, selecting this tick box will display reviews given for this product beneath its image. If not selected, no review will be visible.

Show Inventory

This section includes a tick box that allows for automatic stock updates if selected. Low stock will be displayed in red, abundant stock will be displayed in green, and no stock will be displayed in grey. If not selected, there will be no stock notifications displayed.

Low Inventory Threshold

This section includes a scrolling cline that allows for the threshold for low stock to be defined. If stock falls beneath the selected number, the stock notification will appear red. If this threshold is set to 0, green text will always appear so long as stock is available.

This section includes a tick box that determines whether or not your webpage's sidebar will appear on your homepage. If not selected, this sidebar will only appear on product and collection pages, where it can be adjusted and customized.