This guide includes screenshots from a previous user interface and experience of the SamCart platform. For a tour through all of the exciting new updates to your marketplace and dashboard, please reference this guide here: Get To Know Your Marketplace
Easily showcase a collection of images in a grid format with the Media Grid feature!
The Media Grid feature makes it easy to add multiple images where you can beautifully format and display multiple images at once without the hassle of adding rows or columns!
Here's everything you need to know:
Adding a Media Grid to your Product Page
Start by launching the Content Builder.
In the Widgets section select the Media Grid content block and drag it into the desired location on your page:
After adding the Media Grid widget to your product page, you can then choose from the different grid layouts.
By default, the media grid will include the option to upload one large image with four smaller images below it, but feel free to select from one of the other four options.
To select another option, scroll down on the Media Grid menu and click the grid that best suits your needs!
Your added images will remain in the media grid if you choose to change the media grid layout. This will make it easy to test out all the different layouts.
Once you have selected the layout that best fits your page you can start adding images to your grid!
Adding Images to the Media Grid
To add an image to your grid, click on one of the grid squares inside your builder.
Similar to adding a single, non-grid image, you will have the option to either upload an image from your computer or select an image from your Media Library! In addition, you will see a new setting called Image Setting:
In the Image Setting dropdown, you will have the option to select either Fit or Fill.
- Fit will fit the image within the constraints of its container.
- Fill will fill the entire container with the image.
If at any time you would like to replace an existing image in your media grid you can do so by first clicking on the image square! If you would like to upload a new image from your computer to replace an existing image, you will first need to click on the Delete icon (1) and then use the Choose From Computer button. If you would like to replace an existing image with an image from your Media Library you can select the Change Image button (2):
Media Grid Settings
Outside of choosing between different grid layouts, there are additional settings you can edit for your grid!
To view the available settings, click on the Media Grid’s Settings tab:
- Top Padding adjusts the padding between the media grid and the top of its section
- Bottom Padding adjusts the padding between the media grid and the bottom of its section
- Spacing adjusts the amount of space that appears between images in the Media Grid
- Show on Mobile controls whether the Media Grid widget is visible on the mobile view of the page. With the Show on Mobile toggle set to On you can switch over to the content builder’s mobile view to control the amount of spacing shown specifically on mobile views!
- Show on Desktop controls whether the Media Grid is visible on the desktop view of the page
Once you have edited your product’s page Media Grid, make sure to hit the Publish button inside the Content Builder to have your changes reflected on your Live page!
Frequently Asked Questions
Q: Do I have to add an image to every grid square in the layout?
A: You will need to add images to all the different Media Grid squares. Leaving one of the media grid squares blank will result in the following image icon to be shown on your live product page:
Q: Can I rearrange the images inside of the grid?
A: The different grid layouts are currently set and the image squares cannot be rearranged. However, we do have multiple different layouts available so we recommend trying out the different options to find the best fit!