How can I add icon section

[Aleksander22]

Hello,

I got simple question. How can I add section like that

Is there app to add I would be grateful for help

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , Try the section store shopify app and choose this option

[BSSCommerce-B2B · Accepted solution]

@Aleksander22, Replace this code in testimonials.liquid file from

to 

 {%- elsif block.settings.media_type == 'image' and block.settings.image != blank %}
              <div class="wbs__image-wrapper" style="width: {{ section.settings.image_size }}%; height: {{ section.settings.image_size }}%; margin-top: {{ section.settings.image_top_space }}px">
                <img style="border-radius: {{ section.settings.image_border_radius }}%" src="{{ block.settings.image | img_url: 'original' }}" alt="{{ block.settings.image.alt }}" class="wbs__testimonial-image" width="100%" height="100%"/>
              </div>
            {%- endif %}

And add this code to section settings

,
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Image Border Radius",
      "default": 50,
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "image_size",
      "label": "Image Size",
      "default": 100,
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "image_top_space",
      "label": "Image Top Space",
      "default": 48,
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px"
    }

You'll have 3 options to edit the image

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 , Try the section store shopify app and choose this option

[Aleksander22]

Could you help me to change testemonials pictures to circle becuse right now I have something like that

[BSSCommerce-B2B · Accepted solution]

@Aleksander22, Replace this code in testimonials.liquid file from

to 

 {%- elsif block.settings.media_type == 'image' and block.settings.image != blank %}
              <div class="wbs__image-wrapper" style="width: {{ section.settings.image_size }}%; height: {{ section.settings.image_size }}%; margin-top: {{ section.settings.image_top_space }}px">
                <img style="border-radius: {{ section.settings.image_border_radius }}%" src="{{ block.settings.image | img_url: 'original' }}" alt="{{ block.settings.image.alt }}" class="wbs__testimonial-image" width="100%" height="100%"/>
              </div>
            {%- endif %}

And add this code to section settings

,
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Image Border Radius",
      "default": 50,
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "image_size",
      "label": "Image Size",
      "default": 100,
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%"
    },
    {
      "type": "range",
      "id": "image_top_space",
      "label": "Image Top Space",
      "default": 48,
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px"
    }

You'll have 3 options to edit the image

[Aleksander22]

And next thing could you help me with solving this issue. I got to make this numbers of reviews lighter I mean make the font lighter 

[BSSCommerce-B2B · Accepted solution]

@Aleksander22, Add this code to the very bottom of base.css file

.Vtl-pr-review-stars-snippet {
    align-items: end!important;
    line-height: 0.8!important;
    font-weight: 400!important;
    font-size: 16px!important;
}

Result:

Hope it helps you 😊