Grid of products

Hi there. I’m new to Rapidweaver and have spent a lot of time watching the videos on the elixir website which are really handy.

Just after some advice on the best way to display a grid of products, with a image and a button to click for more info.

I was using columns with cards inside but I just wondered if there may be better grid style solution.

Thanks

1 Like

The Potion Pack has a Grid Stack as part of that group of stacks. Or, the newly released Flux stack would work well also.

1 Like

Thanks for speedy reply. Do they work as part of the foundry theme?

Yes, the Potion Pack is an add-on for Foundry. And Flux works great with Foundry as well.

1 Like

My suggestion id you get Potion might be to try the Display stack inside of Grid. If you stick with the standard Foundry stacks you can go wrong with Cards in a Column layout either.

@jbunks I love using the Grid stack with the Card stacks! Works beautifully at computer, tablet, and phone levels. Very easy to set up. I also use the Display stacks with the Grid stack. Essentially the Grid stack is an often-used backbone for me. Below is one example. Grids work much better for me than columns in this kind of usage.

1 Like

Thanks for the reply. I’ve got Potion installed now for the Grid option, but I don’t get “Display” available as a stack when I search

Hi there @jbunks – The Display stack is not a part of Potion. All of the Potion stacks are listed on the Potion Product page. The Display stack comes in the Thunder pack, which you can find here. If you don’t have Thunder though, give the Card stack a go inside of Grid and see if that works for you before purchasing something else you might not need.

Thanks for the quick reply. What stacks can I use inside the equaliser stack? Is it the display stack only? That’s the one I’ve seen used in every example.

You can use Equalize with most stacks.

What stacks can I use inside the equaliser stack?

Just to be clear that is the opposite was it works. Equalize goes inside of other stacks. Be sure to watch the tutorial for Equalize. :+1:

Thanks. I watched the video a couple of times but was struggling to get it to work even with just a paragraph and nothing else.

Watch carefully where the child stack is placed. If you’re still struggling then post a screenshot of your layout.

Thanks for the reply., The support here is great. This is how I’d tried to set up a product grid using equaliser.

The child stacks have been incorrectly placed in your layout. The child stack(s) go inside the Card. This is shown in the tutorial video:

The Equalize child stacks all compare their heights to one another, find the tallest of them and then set all their sizes to that height. This is why is does nothing when wrapped around the Card stack. It doesn’t change the Card’s height, it changes its own height.

In fact the Card stack even has its own Equalize child stack for you so you can easily add it inside of the Card stack:

You’ll still need to add a Parent Equalize stack to the page, but this child stack within the Card both makes things easier and signals that the stack needs to be inside the Card itself.

Thanks for the quick reply. I’ve had another play around and am still struggling a little. Have I still got this wrong?

Where things are placed in the Equalize chid stacks is determined by what you want to be the same height. Can you post a screenshot of preview showing how it looks and explain what is not the same height that you want to be the same?

1 Like

Thanks for your reply. I’ve attached two screen shots showing the source and preview. I was hoping the green buttons would all be aligned…

I would have expected that to work. If your images are the same height, I’d move them out of the Equalize chid stack and just leave the paragraphs.

If you’d like to copy that page to it’s own project, zip it and then post a link to download it, someone can better determine what’s going on.

1 Like

@jbunks – I’ve created a quick test file and Equalize is working as it should here. As @DLH mentioned, create a ZIP file containing a project file with the page in question. Once you do that share that ZIP file with us using a service like WeTransfer to create a download link where we can get ahold of that project file.

Thanks again for your help. Hopefully the project should be available here: WeTransfer