1. Home
  2. Docs
  3. Shoptimizer
  4. Create the 3 homepage features

Create the 3 homepage features

To recreate the 3 homepage features underneath the hero image, read on. Note, you should be running Shoptimizer 1.3.3 and above for this. If not, please update the theme first.

Step One

First, within the Elementor page builder create a three column layout.

Step Two

Next, drag and drop the image widget from the left Elementor sidebar into one of the columns.

Step Three

Now, add your own image to the ‘Choose image‘ field. You should change the Caption to Custom Caption and paste the following into the input box below it.

<strong>Men’s Shirts</strong><em>from $40</em><span>Shop Now</span>

Also, change the ‘Link to’ to Custom URL and add a # – replacing this with the link you want the feature to go to.

Step Four

Finally, switch to the Advanced tab at the top. Within the CSS Classes field add: image-feature


Change the overlay opacity

You can adjust the dark layer over the image with a small snippet of CSS, added to: Appearance > Customize > Additional CSS.

The last number 0.05 reduces it to 5% – the theme default is 0.45 – or 45% opacity.

Shoptimizer - find out more
The fast WooCommerce theme built for speed and conversions.

Was this article helpful to you? Yes No

How can we help?