Adding a custom block in product page of Venture theme

Store Design
1

Hi, I wanted to add a custom block below the product photo in the product page of venture theme. I was able to add it but I am not being able to get it in a single column.

Screenshot 2021-07-21 at 8.58.50 PM.png
Screenshot 2021-07-21 at 8.58.50 PM.png2880×1334 301 KB

This was the code that I had added in the product page:

Free Shipping

Satisfaction Guarantee

Hassle Free Returns

As you can see, in the custom block, the three elements, i.e., Free Shipping, Customer Satisfaction and Hassle Free Return are coming in three different columns. However, I want it something like this with a border.

Screenshot 2021-07-21 at 9.00.38 PM.png
Screenshot 2021-07-21 at 9.00.38 PM.png1470×308 18.9 KB

Can someone please tell me what should I edit my code with to get this result.

Here is the product page for reference: https://56b8zjx4hn41ylf1-58589905071.shopifypreview.com/products/retail-white-bedsheet (Password- Chaman@10)

Thanks in advance for any help

2

@ChamanGarg

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss paste bellow code in bottom of file
.custom-block-bar {
    float: left;
    width: 100%;
    display: flex;
}
.custom-block-bar .item {
    float: left;
    margin: 0 auto;
}

Thanks

3

Hi @Guleria ,

Thank you so much for the code. Just one issue. When I add this code, I don’t see the product list below the main image in the mobile version of the store. Can you please tell me why is this happening and if this can be solved?