Adding an image to a page on Venture Theme

NatalieViola
New Member
2 0 2

Hi,

I'm using Venture Theme and I would like to add an image to one specific page (not a product page, just a page with some text on it). I want this image to have the same size dimensions as the slideshow I can add on the home page, meaning full-width and same height and also scaling the same way on mobile, but it should just be a static image with no text overlay or anything. I'll be hiding the page-title on this page using a seperate page template with this code:

{% section '_____' %}
<div class="page-width">
<div class="content-block">
<div class="rte rte--indented-images">
{{ page.content }}
</div>
</div>


</div>

What I've been trying to do is creating my own section for this image, that I can use with my seperate page template, but I'm not a coder and I can't figure out how to do what I want. I don't know if this would be the best method or if I could just use css to make it work and I could really use some help.

It would also be a big bonus if the page section could overlap the image just a little bit - like it does with the slideshow, see images for example:

 

Venture Theme demo - example of overlapVenture Theme demo - example of overlap

 

Venture Theme demo - example of overlap on mobile deviceVenture Theme demo - example of overlap on mobile device

 

 

KetanKumar
Shopify Partner
15838 1758 5836

@NatalieViola 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

you have created your own section copy hero section or slideshow and call him page template 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NatalieViola
New Member
2 0 2

Thank you, I got it to work. For anyone wanting a bit more detailed explination I'll try to explain how I did it.

In 'Edit code' I copied the section "slideshow.liquid" and renamed it (I named mine "challenges-slideshow.liquid"). Then I made a new template for pages (this I named "page.challenge.liquid") and in my new page template I put:

{% section 'challenges-slideshow' %}
<div class="page-width">
<div class="content-block">
<div class="rte rte--indented-images">
{{ page.content }}
</div>
</div>

</div>

(If you do this you should change challenge-slideshow to what ever you name your section)

Then I could go to pages in the admin panel, create a new page and choose my new page template 'page.challenge'. Now I can use the Shopify customize tool to choose an image I want on my page, just like on the home page. I could also add multiple images and text overlays since it's technically a slideshow (and works like the slideshow on the home page), but I just want one image with no text.

Now there was just one problem, the page content was behind the slidshow image. To fix this I went back to 'Edit code' and opened 'theme.scss.liquid' (located under assets). opened the search function by pressing CTRL+F and in the search bar type in content-block. Then I added the following code: position: relative; and z-index: 1 !important; to the content-block, so the code now looks like this:

 

/*================ Content blocks ================*/
.content-block {
position: relative;
background-color: $color-content;
padding: $gutter-site * 2;
margin-bottom: $gutter-site;
z-index: 1 !important;

&:last-child {
margin-bottom: 0;
}
}

And now I have my header image with the page content overlapping just a little bit, just like on the home page. 

KetanKumar
Shopify Partner
15838 1758 5836

@NatalieViola 

Thanks for update 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes