Adding a section

[Lunix_I]

Hi,

Please is anyone offering a code for this section, we are using dawn Theme and there is no option to add this without coding, since I don't know that if someone can help with it, and provide me the code and the place where should post it. I'm 0 exp in coding btw. I tried everything but I can't.

[rajweb]

Hey @Lunix_I ,

Could you share your store URL so I can check?

[Lunix_I]

https://vistacharm.com/

[rajweb]

@Lunix_I 

To Add Section,

Follow these steps:

1. Online Store > Themes > Edit Code 

2. Create a new section > Name the new section features.liquid

Add the Code to the New Section:

In the newly created features.liquid file, paste the following code:

<div class="features-section" style="display: flex; justify-content: space-around; padding: 20px;">
  <div class="feature" style="text-align: center;">
    <img src="{{ 'free-shipping.png' | asset_url }}" alt="Free Shipping" style="width: 100px; height: 100px;"/>
    <h4>Free Shipping</h4>
    <p>Get free shipping on all orders over $50!</p>
  </div>
  <div class="feature" style="text-align: center;">
    <img src="{{ 'secure-payment.png' | asset_url }}" alt="Secure Payment" style="width: 100px; height: 100px;"/>
    <h4>Secure Payment</h4>
    <p>Your payment information is safe with us.</p>
  </div>
  <div class="feature" style="text-align: center;">
    <img src="{{ 'full-refund.png' | asset_url }}" alt="Full Refund" style="width: 100px; height: 100px;"/>
    <h4>Full Refund</h4>
    <p>If you're not satisfied, we offer a full refund.</p>
  </div>
  <div class="feature" style="text-align: center;">
    <img src="{{ 'online-support.png' | asset_url }}" alt="Online Support" style="width: 100px; height: 100px;"/>
    <h4>Online Support</h4>
    <p>We're here to help you 24/7.</p>
  </div>
</div>

<style>
  .features-section {
    background-color: #f9f9f9;
  }
  .feature {
    flex: 1;
    padding: 10px;
  }
</style>

After adding the section, make sure to save your changes in the theme editor.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

[Lunix_I]

I did exactly like you said, and clicked save, but nothing changed at the store it's the same like I didn't even add any code.

[EvinceDev]

Hello @Lunix_I , Use this code with responsive, 

Go through these steps:

1. Online Store > Themes > Edit Code 

2. Create a new section > Name the new section features.liquid

<div class="service-section">
        <div class="service-item">
            <img src="https://images.pexels.com/photos/26065715/pexels-photo-26065715/free-photo-of-hand-of-a-woman-holding-a-white-flower.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="Free Shipping Icon">
            <h3>Free Shipping</h3>
            <p>Free worldwide shipping</p>
        </div>
        <div class="service-item">
            <img src="https://images.pexels.com/photos/26065715/pexels-photo-26065715/free-photo-of-hand-of-a-woman-holding-a-white-flower.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="Secure Payment Icon">
            <h3>Secure Payment</h3>
            <p>Safe money ordering with us</p>
        </div>
        <div class="service-item">
            <img src="https://images.pexels.com/photos/26065715/pexels-photo-26065715/free-photo-of-hand-of-a-woman-holding-a-white-flower.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="Full Refund Icon">
            <h3>Full Refund</h3>
            <p>30-days window returns</p>
        </div>
        <div class="service-item">
            <img src="https://images.pexels.com/photos/26065715/pexels-photo-26065715/free-photo-of-hand-of-a-woman-holding-a-white-flower.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1" alt="Online Support Icon">
            <h3>Online Support</h3>
            <p>24/7 Support available</p>
        </div>
    </div>

Result for desktop , tablet , mobile : 

[Lunix_I]

The code is wrong, shopify gives errors 

[EvinceDev]

Hello @Lunix_I , The code I provided earlier was just HTML. To make the service section dynamic and manageable via Shopify, please try this Liquid code:

<div class="service-section">
  {% for service in section.settings.services %}
    <div class="service-item">
      {% if service.image != blank %}
        <img src="{{ service.image | img_url: 'medium' }}" alt="{{ service.title }} Icon" loading="lazy">
      {% endif %}
      <h3>{{ service.title }}</h3>
      <p>{{ service.description }}</p>
    </div>
  {% endfor %}
</div>

Implementation Instructions:

• Create a New Section: In your Shopify theme, go to the Sections directory and create a new file named service-section.liquid.

• Insert the Code: Copy the Liquid code provided above into the new file.

• Add to Your Theme: You can include this section in your desired template by using the following Liquid tag:

{% section 'service-section' %}

This setup will allow you to manage the services directly from the Shopify admin panel, where you can easily add, remove, or update service items.

If you have any further questions or need additional assistance, feel free to ask!

[Lunix_I]

I didn't notice this, I will try it right now thx

[Dan-From-Ryviu]

Did you try to add section Icon With Text? 

[Lunix_I]

There is no section named Icon with text in dawn.

[namphan]

Hi @Lunix_I,

You can try 'Multicolumn' section, it will help you display well

[Lunix_I]

I didn't notice this, I will try it right now

[namphan]

Hi @Lunix_I,

After you try adding it, if it doesn't show 100% fine, I will help you edit it

[Lunix_I]

I just try to add the Icons, but I can't.

the image is too big, even the size was 100x100 so it's an Icon but it shows too big, is there any solution for this please?

thank you in advance

[Lunix_I]

[namphan]

Hi @Lunix_I,

You can add it again and send me the site link, I will check and guide it

[Lunix_I]

That's how the Icon looks like, Too big.

I'm not able to make save because isn't designed well, store is active.

[namphan · Accepted solution]

Hi @Lunix_I,

After you add section, you just need to add CSS code here, it will display well:

Code:

.multicolumn-list__item .media {
    padding-bottom: 30% !important;
}

[Lunix_I]

Thank you so much, it's work and looking too great.

thanks for your following with me, So glad for your help sir. ❤️

[namphan]

Hi @Lunix_I,

You're welcome and it's nice to meet you 😊