Table of Contents
In an effort to continuously evolve and offer our customers ever expanding options, Art Storefronts has created a layout option for use on pages like Art Print Stores and Product galleries. This new layout is called collage with masonry. Instead of seeing your categories listed out in separate square or rectangular categories you’ll instead see them arranged in a collage on your page. This can be used by anyone on the Art Storefronts platform.
In this article, we’re going to show you how to use this new collage option, but there are a few things we want to address before showing you how to enable this option. First and foremost, the collage technology does have limitations. Because it uses the images you have on your site it works to make them fit together and an aesthetically pleasing way. This means that you will not have complete control over the specific width and height of the images. You will have the option to change a few of the parameters. You will have the ability to change the border width of images as well as Target height.
Be aware though, if you choose to make changes using custom coding to either of these options and it does not work or causes issues, Technical Support will not be able to assist you and will ask you to remove your custom coding.
Enable to Collage with Masonry Layout
Make sure you are logged in to your Art Storefronts Control Panel. This is also called the back-end of the site as well as the Site Manager. These three all mean the exact same thing. Find the Product Gallery page you want to work on and click it. Any Product Gallery page will work.
Before you begin working on the layout, make sure you are on the tab labeled INFO. If you aren’t on this tab, you won’t see the options we are discussing.
Scroll down the page until you find the section labeled Layout. In this drop-down menu, select the option labeled Collage- with Masonry.
After you have selected the appropriate layout option, you need to click on the button labeled Save.
Edit the Collage with Masonry Image Sizes
Make sure you are logged in to your Art Storefronts Control Panel. This is also called the back-end of the site as well as the Site Manager. These three all mean the exact same thing. Find the tab labeled THEME.
On the next page, you need to find the Theme you have activated. It will have a green box around it. When you find it, you need to click on the option labeled Edit.
You’ll be taken to a new page and on that page, there’s a button labeled START EDITING. Click on it.
Now, you’ll be moved to another page. On that page, there’s a tab labeled EDIT CODE and you need to make sure you’re on that tab.
When you’re sure you’re on the EDIT CODE tab, look down and there will be another tab labeled CSS. You MUST be on this tab or it won’t work properly.
Next, there’s a box where you can enter in your code. We’re going to include a snippet below that will allow you to alter the sizes of the images in the collage.
Here’s the Code:
.Masonry figure { width: 300px; }Please Note: To change the size of the image you need to alter the section that says 300px. You can change this to as small or as large as you like but be sure to always check your changes on the live site to make sure they look good and meet your expectations.
When your changes have been made, go ahead and click the Save From there you can check your changes on the site.
Edit the Spacing of the Collage with Masonry Layout
If you are experiencing issues with the spacing of images in your gallery (for example having empty spaces added between images, adding this setting can allow you to modify the sizes used by the layout to rearrange product thumbnails. You may need to try slightly larger or smaller values than the default one in order to get the best results for your images.
Make sure you are logged in to your Art Storefronts Control Panel. This is also called the back-end of the site as well as the Site Manager. These three all mean the exact same thing. Find the tab labeled THEME.
On the next page, you need to find the Theme you have activated. It will have a green box around it. When you find it, you need to click on the option labeled Edit.
You’ll be taken to a new page and on that page, there’s a button labeled START EDITING. Click on it.
Now, you’ll be moved to another page. On that page, there’s a tab labeled EDIT CODE and you need to make sure you’re on that tab.
When you’re sure you’re on the EDIT CODE tab, look down and there will be another tab labeled CSS. You MUST be on this tab or it won’t work properly.
Next, there’s a box where you can enter in your code. We’re going to include a snippet below that will allow you to alter the sizes of the images in the collage.
Here’s the Code:
.Masonry figure { margin: 4px; }Please Note: To change the spacing you need to alter the section that says 4px. You can change this to as small or as large as you like but be sure to always check your changes on the live site to make sure they look good and meet your expectations.
When your changes have been made, go ahead and click the Save From there you can check your changes on the site.
Edit the Spacing of Images and Images Sizes of the Collage with Masonry Layout
Make sure you are logged in to your Art Storefronts Control Panel. This is also called the back-end of the site as well as the Site Manager. These three all mean the exact same thing. Find the tab labeled THEME.
On the next page, you need to find the Theme you have activated. It will have a green box around it. When you find it, you need to click on the option labeled Edit.
You’ll be taken to a new page and on that page, there’s a button labeled START EDITING. Click on it.
Now, you’ll be moved to another page. On that page, there’s a tab labeled EDIT CODE and you need to make sure you’re on that tab.
When you’re sure you’re on the EDIT CODE tab, look down and there will be another tab labeled CSS. You MUST be on this tab or it won’t work properly.
Next, there’s a box where you can enter in your code. We’re going to include a snippet below that will allow you to alter the sizes of the images in the collage.
Here’s the Code:
.Masonry figure { width: 300px; margin: 4px; }Please Note: To change the spacing you need to alter the section that says 4px and to change the sizes of the images, edit the section that says 300px. You can change this to as small or as large as you like but be sure to always check your changes on the live site to make sure they look good and meet your expectations.
When your changes have been made, go ahead and click the Save button. From there you can check your changes on the site.
