When shopping in physical stores, we are able to learn more about the product/item we like by looking at its tag. In most cases the same situation cannot be applied to online shopping.

The perfect solution for this deficiency- you can create a product card which holds all of the relevant information about the item you are viewing.

This simple element can increase interest, purchases and even loyalty because your customers will know where they stand.

Check out the tutorial and follow the steps (who are also written below )

Head over to your Element Library and click on category Content.

Choose the Box element. Once back on the page, click the element to open its Editor.

In General tab set up your Width and Height to Custom and apply the pixels.

300 px for Custom Width and 400 px for Custom Height.

Set your Content position to Bottom.

Now, hover over your element to show a small toolbar. Click to align the text and remove padding.

Head back to Element editor and go to Styling tab. In there look for Background and toggle the Image Layer ON.

Choose your wanted Image from our extensive library or upload your own images.

Set your Size to Cover and Repeat to repeat. Position should be fixed to Center.

Head over to the Advanced part of the element editor and choose the Spacing category. Your upper and right side should be set to 40 px while your bottom and left side should be at 20 px.

Stay in the Advanced category and look for Border. Set the border radius to 20 px.

Click on a small plus sign in the bottom part of the Box to add a new element. From the library choose a button. Change its size to S and the head over to the Advanced tab where you should set the Spacing to 10px from both left and right side. Up and bottom should stay at 0px.

The rest is up to your to design accordingly. What we did is add a Background overaly to create a Photoshop effect.