Ignite Theme - Adding blocks on the side of other block

Store Design
, , ,
1

I’d like to add a stat counter block on the side of another block inside the same section but it seems I cannot do it other that one on top of the other. Any suggestions? I am new here so not that much experience. Thanks in advance!

3

Hello @INJOYSHOP ,

I hope you are well.

Can you please let me know the error which is appearing or the steps you are adding to the block? Basically, it will help us understand the problem and provide you the proper solution.

4

HEy @INJOYSHOP ,

Great question! By default, Shopify’s section/block system stacks blocks vertically (one on top of the other). To place a stat counter side by side with another block inside the same section, you’ll need a small CSS tweak:

  1. Go to Online Store > Edit Code.
  2. Find your section file (for example section-name.liquid) where the blocks are rendered.
  3. Wrap the two blocks you want side by side in a container if not already grouped. Then,
  4. add this CSS (in your theme.liquid just above the tag or in your custom CSS file):
<style>
.flex-row {
  display: flex;
  gap: 20px; /* space between the blocks */
  align-items: center; /* vertical alignment */
}

.flex-row .block {
  flex: 1; /* makes both blocks equal width */
}
</style>

This will place your stat counter block and the other block side by side within the same section.

If you’d like me to set this up for you directly or customize the layout further (for example, making it responsive on mobile so they stack nicely), feel free to reach out. You can also check my past work and contact details here: https://www.rajatweb.dev/

Thanks!

Rajat | Shopify Expert