How to adjust spacing in custom liquid for product price?

Solved

How to adjust spacing in custom liquid for product price?

nijntjelover
Explorer
67 0 12

How do i add more space between product price and the custom liquid? Also how do I remove double spacing from custom liquid? I want the custom liquid to be single spacing, and beteween the price and the custom liquid needs and extra space.

 

url: bundo.nl

Accepted Solutions (2)
Justin-Simesy
Shopify Partner
39 8 3

This is an accepted solution.

Please try to replace these code with my code below

<div class="usp-list">
   <div class="page-width">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
   </div>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website

View solution in original post

Justin-Simesy
Shopify Partner
39 8 3

This is an accepted solution.

Sure. Please try using this code

 

<div class="usp-list">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website

View solution in original post

Replies 8 (8)

Justin-Simesy
Shopify Partner
39 8 3

Hi @nijntjelover. Hope you are doing well. Is that something you want to achieve ?

JustinSimesy_0-1704039763554.png

 

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website
nijntjelover
Explorer
67 0 12

Hi justin, So those 3 lines, I want them closer to each other, seee how they're double spaced?

Justin-Simesy
Shopify Partner
39 8 3

Yes. I can see it. Could you share your custom liquid code here ? I'll modify it then send it back.

 

Thanks,

Justin

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website
nijntjelover
Explorer
67 0 12

<style>
.custom-padding {
margin-top: 40px; /* Adjust the value as needed for the desired space */
}
</style>

{% assign empty_space = " " %}
<div class="custom-padding">
{{ empty_space }}
</div>

<!-- Your existing Liquid code goes here -->


</style><div class="list"><div class="page-width"><div style="text-align: left;"><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal & Bancontact </p></p><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3..." width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p><p id="usp"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p></div></div></div>

<style>
.custom-padding {
margin-top: 40px; /* Adjust the value as needed for the desired space */
}
</style>

{% assign empty_space = " " %}
<div class="custom-padding">
{{ empty_space }}
</div>

Justin-Simesy
Shopify Partner
39 8 3

This is an accepted solution.

Please try to replace these code with my code below

<div class="usp-list">
   <div class="page-width">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
   </div>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website
nijntjelover
Explorer
67 0 12

Can you edit the code so its aligned to the left side more? 

Justin-Simesy
Shopify Partner
39 8 3

This is an accepted solution.

Sure. Please try using this code

 

<div class="usp-list">
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/IDEAL_Logo.png?v=1701683033?v=1697221984" width="20"> &nbsp;Betaal veilig met iDeal &amp; Bancontact </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/Zandloper_icon_fb3e2e53-8588-49d1-a342-28cca3fef585.png?v=1697222231" width="20"> &nbsp;Voor 23:59 besteld - morgen verzonden </p>
      <p class="usp-item"><img id="checkmark" src="https://cdn.shopify.com/s/files/1/0777/3359/3412/files/retourgarantie.png?v=1697222408" width="20"> &nbsp;30 Dagen Retourgarantie</p>
</div>
<style>
   .usp-list { margin-top: 32px; margin-bottom: 16px; }
   .usp-list p.usp-item { margin-top: 0; margin-bottom: 16px; }
</style>

Smartify - FREE Post Purchase Survey


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Website
nijntjelover
Explorer
67 0 12

yessirrr i changed a couple numbers around but worked perfectly!!