Need help in adding a Section Divider that is a graphic

Solved
Highlighted
Excursionist
19 1 6

Good morning, 

I would like to add this graphic in between my Rich Text section and Collections section on my Debut homepage.  

8.jpg

This is where I would like it to go:

Screen Shot 2020-07-27 at 7.44.03 AM.jpg

URL:  https://deer-path-inn.myshopify.com/

PW:  wohffu

Please help!

Thank you!

0 Likes
Highlighted
Shopify Partner
1441 194 502

Go into your code, Online Store > Themes > Actions > Edit Code  <--- on the theme you want to edit. Go to your sections folder and expand it, click Add a new section. Call it something like "image-spacer.liquid". When it auto generates the code, delete it all and replace it with this:

 

<style>
  .image-spacer__container {
  width: 100%;
  }
  .image-spacer__container img {
  width:100%;
  }
</style>
{% if section.settings.image_spacer != blank %}
<div class="image-spacer__container">
 <img src="{{ section.settings.image_spacer | img_url: 'master'}}">
</div>
{% endif %}

{% schema %}
{
"name": "Image Spacer",
"class": "image-spacer",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"label": "Pick an Image",
"id": "image_spacer"
}
],
"presets": [
{
"name": "Image Spacer",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

Save the file, then go into your customize editor and click "Add Section" -- There should be a section called Image Spacer underneath the Images category. Add that, then upload your image with the image picker. Then you can drag it around between your sections.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Excursionist
19 1 6

Ninthony,

I'm almost there......  thanks to you.  I made the changes to the code and added the graphic divider as you indicated. This is what it looks like now:

Screen Shot 2020-07-27 at 10.02.04 PM.png

Two follow-up questions:  

1.  How can I decrease the size of the divider image so it looks smaller on the site?

2.  How can I add the same background image of the page to this divider section so I don't see the white spacing behind the divider?

Thank you!

0 Likes
Highlighted
Shopify Partner
1441 194 502

This is an accepted solution.

You won't be able to add the background image to your image and get it to line up with the one on your site, so you're going to want to take that picture into an image editing program and cutout the background and save it out as a transparent PNG. If you don't have an image editing program, I recommend www.photopea.com -- basically photoshop for your browser. If you want it to be smaller you can change the CSS in the style tags to:

  .image-spacer__container {
  width: 100%;
  text-align: center;
  }
  .image-spacer__container img {
  width: 60%;
  }

 

You can adjust the width of ".image-spacer__container img" style to be whatever width suits your needs. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Excursionist
19 1 6

Thank you for your advice!  Success! 

0 Likes
Highlighted
Shopify Partner
1441 194 502

Not a problem, glad it helped.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes