Need help in adding a Section Divider that is a graphic

Solved
MMAndrade1
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
Ninthony
Shopify Partner
1804 261 712

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
MMAndrade1
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
Ninthony
Shopify Partner
1804 261 712

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
MMAndrade1
Excursionist
19 1 6

Thank you for your advice!  Success! 

0 Likes
Ninthony
Shopify Partner
1804 261 712

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
erikalynnsimon
New Member
2 0 0

Hi there - im following along with this for my shopify store, i'm using paid theme "blockshop" i was able to add the header in but now I have two questions.

1) I have a slide show above this and want to have space the separates the sections so they arent sitting directly on top off each other. How do i add padding on this?

2) Are we able to code this in to make these banners hyperlink to a specific page?

Thanks again and any help is greatly appreciated  

0 Likes