Increase columns/blocks from the default 3

Hello @joweir!

Are you using blocks to design your homepage? How are you currently adding your product categories to the page?

You can adjust the number of columns directly from the block settings. For example, if you’re using the ‘All Products’ block, select the block and then in the right-hand sidebar under ‘Columns’, increase it to four or five as needed.

Here’s a screenshot for reference: https://d.pr/i/3ePB4U

Ready to enhance your homepage layout with additional categories?

Let me know how it goes!

Thanks for replying. My current home page doesn’t have blocks, just text and links to the categories: https://www.arrowmark.co.nz.

Which block type would you recommend? I don’t want to add products, just category blocks with one image per category.

Edited to say that I have found a layout block that could work – but is there a way to add a fifth colum? https://arrowmark.co.nz/home2%20testing%20page/

• This reply was modified 1 year, 4 months ago by joweir.

Hello @joweir!

Product Categories Shortcode

To showcase your categories with an image each, you can use the [product_categories] shortcode. This will allow you to display your product categories on any page.

For a layout with five columns, you might use this shortcode:

[product_categories number="0" parent="0" columns="5" orderby="menu_order"]

Customize the number, parent, and orderby attributes to fit your needs.

Adding a Fifth Column

Regarding adding a fifth column to your product display, if you’ve added products using shortcodes, simply including columns="5" in your existing shortcode will create the additional column.

For example:

[products limit="10" columns="5"]

This will adjust the layout to display 5 columns across.

Reference:
Shortcodes included with WooCommerce – WooCommerce

Thanks – as it turns out, I already have that block on my Shop page. I’m looking for a really attractive home page layout that’s eye catching and also summarises my five categories.

I’ve expored the Multiple Themes plugin and using the Tiffany Lite theme, but it’s not really customisable without affecting my whole Storefront theme attributes. Well, not with my low level of WP experience. So I need to do this natively with WP blocks I think. I’ll have a go with galleries.

• This reply was modified 1 year, 4 months ago by joweir.
• This reply was modified 1 year, 4 months ago by joweir.

Hi @joweir,

Thank you for providing further details about your requirements.

For creating an attractive homepage layout, you may consider using the Cover block. This block allows you to add a background image with a text overlay, which could be the name of your category. You can add a link to the category page from this block. Repeat this for all your five categories.

To make it more eye-catching, you can adjust the alignment and width of each block, add background colors, change text colors, and much more. You can also add a fifth column by simply adding another block.

If you’re interested in exploring more block options, you might find the Media & Text block useful. This block allows you to set an image and text side by side, which could be used to represent a category.

You can also explore other third-party block extensions such as the ProductX, WooBuilder Blocks, or Product Blocks for WooCommerce.

Remember, the key to a visually appealing layout is not just the blocks you use, but also the images you choose and the overall consistency in your design.

I hope this helps! If you have any more questions or need further assistance, feel free to ask.

Thank you for those suggestions. I’ll have a look at them.
As you are so knowledgable about web design, what do you think about the option of animated gifs instead of JPGs in the front page block?

Old-fashioned or useful?

Hi @joweir,

Animated GIFs can indeed be a great way to make your homepage more dynamic and engaging. They can be useful for demonstrating a product, showing a process, or simply catching your visitors’ attention. However, there are a few things to consider:

1. GIFs can be larger in file size than JPGs or PNGs, which could potentially slow down your site’s load time. It’s important to optimize your GIFs for web use to ensure they don’t negatively affect your site’s performance. There are several online tools available for this purpose.
2. Not everyone appreciates or can tolerate motion on a website. Some users may find it distracting or even uncomfortable due to conditions like vestibular disorders. It’s important to ensure your website is accessible to all users.
3. Depending on your brand and target audience, you’ll want to consider whether animated GIFs align with your brand image.

In short, animated GIFs can be a great tool if used appropriately and sparingly. It’s all about finding a balance that suits your needs and audience.

Additionally, you may want to consider using Product Video for WooCommerce, Add Featured Videos in Product Gallery, and Blocks Animation plugin. This could be a great way to enhance your site’s visual appeal without compromising loading speed.

I hope this information is helpful. Let me know if you have any other questions!

I decided to go with a simple graphic: https://snipboard.io/GpsxTh.jpg

But how can I reduce the space between the top banner and Arrowmark? https://snipboard.io/3XKnmh.jpg

Hi @joweir

To reduce the space between the top banner and Arrowmark, you will need to adjust the CSS margin or padding properties.

Please try adding the following custom CSS code to your site by going to Appearance > Customize > Additional CSS:

.page-template-template-homepage .type-page {
padding-top: 0 !important;
}

.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
  padding-top: 0 !important;
}

.home .header-widget-region {
    margin-bottom: -30px;
}

Once you’ve added the custom CSS above, this is how your page should look like:

Direct link: https://ibb.co/TP2WSyP

I hope this helps! Let me know if you have any other questions.

Thank you – I really appreciate your help.

Hi @joweir

We’re glad that worked, yey! ??

Meanwhile, if you have a moment to spare, we would love it if you could share your thoughts with us by leaving a review or feedback. Your experience and feedback are important to help us improve and ensure we’re always providing the best possible support.

Thanks!