Add space below product title - Flex theme

Store Design
1

Hi guys,

I’ve tried to add some space below the product title so the review section is a bit lower, but haven’t had any success yet. Is anyone able to point me in the right direction?

Thanks so much!

Website / passw: iqs123

Screenshot 2022-06-22 at 10.24.09.png
Screenshot 2022-06-22 at 10.24.09.png2544×1304 490 KB

Current code:

{
  "sections": {
    "breadcrumbs": {
      "type": "product__breadcrumb",
      "settings": {
        "width": "standard",
        "padding_top": 20,
        "padding_bottom": 20,
        "css_class": "",
        "custom_css": ""
      }
    },
    "sidebar": {
      "type": "product__sidebar",
      "settings": {
        "padding_top": 20,
        "padding_bottom": 20,
        "css_class": "",
        "custom_css": ""
      }
    },
    "main": {
      "type": "product__main",
      "blocks": {
        "title": {
          "type": "title",
          "settings": {
          }
        },
        "0ce979e3-0c46-4d7f-9044-cbd727f34d37": {
          "type": "shopify:\/\/apps\/product-reviews\/blocks\/star_rating\/bae150af-8da8-48b2-9867-398188115e5f",
          "settings": {
            "stars_fill_color": "#e75b42",
            "star_size": 15,
            "text_align": "flex-start",
            "product": "{{product}}",
            "stars_text_empty": "No reviews"
          }

I tried to change it to below but it didn’t work:

},
        "0ce979e3-0c46-4d7f-9044-cbd727f34d37": {
          "type": "shopify:\/\/apps\/product-reviews\/blocks\/star_rating\/bae150af-8da8-48b2-9867-398188115e5f",
          "settings": {
            "stars_fill_color": "#e75b42",
            "star_size": 15,
            "text_align": "flex-start",
            "product": "{{product}}",
            "stars_text_empty": "No reviews",
  "padding_top": 20,
        "padding_bottom": 20,
        "css_class": "",
        "custom_css": 
          }
2

Hi @INFRA ,

Please add this css code at the bottom of style.css file of your theme

.product_name { margin-bottom: 20px; }

3

@INFRA

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
.product_name {
    margin-bottom: 20px;
}
4

@Dan-From-Ryviu @KetanKumar both worked perfectly, thanks so much!

On the blog pages, is it possible to hide the border around the related blogs at the bottom?

Screenshot 2022-06-22 at 15.59.36.png
Screenshot 2022-06-22 at 15.59.36.png1346×970 278 KB

5

@INFRA yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
.blog-card{border: none;}
6

that worked perfectly, thank you so much!