Solved

Dawn theme: Add padding to custom component

DSM1
New Member
4 0 0

Hi! I added a Rich Text component to the Dawn theme as described here: https://shopify.github.io/liquid-code-examples/example/featured-text

 

However, there is no padding at the sides at all, as you can see on my sceenshot.

Any thoughts on what I can do to add padding?

 

Screenshot 2022-08-31 at 11.44.53.png

 

Accepted Solution (1)
koravski
Shopify Partner
23 9 8

This is an accepted solution.

So open featured-text.liquid file and replace this code:

<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}

with:

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

Also add this at the top of the file: 

<style>
.featured-text {
padding-left: 20px:
padding-right: 20px;
}
</style>

Tell me if it works.

 

 

 

View solution in original post

Replies 6 (6)

koravski
Shopify Partner
23 9 8

You can wrap the your code in a div with a class:

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

And add the css below in your css file:

.featured-text {
padding-left: 20px:
padding-right: 20px;
}


Hope it helps. 

DSM1
New Member
4 0 0

Thank you! I'm a little in doubt about where to add the code though - would the div be around the code in the .liquid file?

And which CSS file to add the style to? base.css?

koravski
Shopify Partner
23 9 8

This is an accepted solution.

So open featured-text.liquid file and replace this code:

<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}

with:

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

Also add this at the top of the file: 

<style>
.featured-text {
padding-left: 20px:
padding-right: 20px;
}
</style>

Tell me if it works.

 

 

 

DSM1
New Member
4 0 0

It doesn't work 😞

 

The full featured-text.liquid file code reads now:

 

<style>
.featured-text {
padding-left: 20px:
padding-right: 20px;
}
</style>

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

{% schema %}
{
  "name": "Rich text",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Title",
      "default": "Talk about your brand"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
    }
  ],
  "presets": [
    {
      "name": "Rich Text",
      "category": "Text"
    }
  ]
}
{% endschema %}

 

 

 

koravski
Shopify Partner
23 9 8

Hey,
change the two dots after 20px: at the end to semicolon. Like this.

padding-left: 20px;



If it does not work again share a link to the page.

DSM1
New Member
4 0 0

Good catch! Thank you! It works now!!

Thank you very much for your help 🙂