How to create this trust section for the front page?

Solved
Highlighted
Tourist
6 0 2

I could only find those trust badges apps and stuff (showing some badges at the bottom and checkout), but nothing relevant to what I need. I would like to have something like this on my front page between collection blocks (or any blocks) :

trust_block.JPG

I have no clue how to search for it, what to call it in order to learn more.

0 Likes
Highlighted
Shopify Partner
795 124 394

you can copy that HTML of badges and put where you want to have it.
Thank You

0 Likes
Highlighted
Shopify Expert
3485 543 821

This is an accepted solution.

Hi @SGM 

You can use this code to show icon with text and description on page.

Add this html code where you want to show this section.

  <div class="product-reasons">
    <ul class="res_ul">
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_2_image_150x.png?41820">
        <span>Lorem Ipsum</span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_3_image_150x.png?41820">
        <span>Lorem Ipsum</span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_4_image_150x.png?41820">
        <span>Lorem Ipsum</span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </li>
      <li>
        <img src="//cdn.shopify.com/s/files/1/0009/0266/0159/t/6/assets/topreasons_5_image_150x.png?41820">
        <span>Lorem Ipsum</span>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </li>

    </ul>
  </div>

Now add this css in Asset->theme.scss file at bottom:

      .res_ul li span{display: block; font-size: 20px; font-weight: 600;}
      .product-reasons ul{list-style: outside none none; margin: 0 auto; padding: 0; display: flex; max-width: 1050px;}
      .product-reasons{text-align:center;}
      .product-reasons ul>li{display: inline-block; margin-bottom: 10px; text-align: center; vertical-align: top;}
      @media only screen and (max-width:480px){.product-reasons ul>li{width:45%;}.product-reasons ul{display:block;}}

 Note: upload image on your shopify store and change  image as you like 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
6 0 2

Much appreciated! :)

0 Likes
Highlighted
New Member
9 0 0

As far as closing sales is concerned, your ‘About Us’ and FAQ pages might be one of the most important pages on your website. Follow our tips to make your ‘About Us’ page the best it can be.

I suggest checking out the Smarketly Page Builder Editor App, it has impeccable features and helps you easily add a "Contact Us" section.

  1. Under "Online Store" go to Pages and in the drop down menu, click "Add Page"
  2. Edit your title to About Us/ Contact Us/ FAQ, then paste the info to be displayed in the description box. This is the information that'll be displayed when customers search for your website on Google.
  3. Choose an image and click on "Insert image" if you want to include a picture to accompany the text
  4. If you're still deciding between either having it on display or not, you can click on "Hidden" under the visibility edits
  5. Under the Template Suffix, you have the option to add or exclude a Header and Footer feature for the Landing Page or About Us page from the drop down menu
  6. or "About Us", there'll be a URL box to paste your site's link.

This is a chance for your customers to become acquainted with you and the kind of business they'll get from you. So you might as well make it great!

0 Likes