Adding an image that fits width of homepage - Brooklyn Theme

Highlighted
New Member
3 0 0

Hey all,

New here with Shopify and looking to place a photo that fits the whole width of the page at the bottom of the homepage on the 'Brooklyn' Theme.

https://ubiquitystyle.com/

If you scroll to the bottom of the homepage, you'll see an image that I placed in the Pages - Text Editor, however I cannot seem to get it to fit the width of the page and i do not want to alter the width of the div, otherwise the text will also be the width of the page.

Is there a way I can add this outside of the text editor (i.e in the .liquid files) and make it full width?

Apologies, not very proficient in this!

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 72

Hi Joseph,

Britton here with the Shopify support team.

You should be able to do this by editing the theme.liquid file for your theme. The theme.liquid file though affects all of the pages on your site, so the advice I will give below will also include some conditional formatting so that the image only shows for your homepage. Before you begin, please remember to back up your theme by duplicating it. That way if something breaks it is super easy to fix!

In order to not have the image be constriained by the same width constraint of your text you need to place the html element outside of the closing </main> for the main content section. Here is the code I used for theme.liquid:

{% if template == 'index' %}
    <div class="guru-test">
    </div>
{% endif %}

This is how I placed it:

<main class="main-content" role="main">
      <div class="wrapper">
        {{ content_for_layout }}
      </div>
    </main>
    
    {% if template == 'index' %}
    <div class="guru-test">
    </div>
    {% endif %}

    {% if settings.footer_newsletter_enable %}
      <div class="newsletter">
        <div class="wrapper">
          {% comment %}

In addition to that change you will also need to edit your theme.scss file. Here is the CSS that I used:

.guru-test {
background: url(https://cdn.shopify.com/s/files/1/0970/4824/files/test_image.jpg?4543766425644049121) center no-repeat;
  background-size:cover;
  height:400px;
}

In order to make it work for your image you will need to replace the "https://cdn.shopify.com/s/files/1/0970/4824/files/test_image.jpg?4543766425644049121"; link in the url section with the image URL for your image. Also, you may want to adjust the height attribute so that your image is the correct size for your site.

I hope that works for your site! If you have any trouble feel free to respond here, I'll be watching the thread for a bit.

-Britton

 

Britton Shopify Guru
Highlighted
New Member
19 0 0

how do you find where to put the code in the second step?

0 Likes
Highlighted
New Member
3 0 0

Hi Britton, thanks that worked perfectly. 

One more question, if I were to place the image on another page (which is using the page.liquid), where would I place the new class on the theme.liquid file? Or would I need to place it in another file? Once again thanks for the help.

In reponse to your question O D, you can find it in the theme.liquid file on the Themes -> Edit CSS -> theme.liquid and then just use your command/control F to find 

<main class="main-content" role="main">

Then sandwich the code after 

</div> </main>

but before {% if settings.footer_newsletter_enable %}

 

0 Likes
Highlighted
New Member
19 0 0

got that part done im , i cant seem to find .guru test{ in the theme.scss file???thank you for your help

0 Likes
Highlighted
New Member
3 0 0

Hey, the .guru test part is what you need to add to your theme.scss. So try just copying it in to the bottom of your file, then change the url to your image url

0 Likes
Highlighted
New Member
19 0 0

thanks a lot that worked Joseph!

0 Likes
Highlighted
Shopify Partner
21 0 2

Hi,

I would like to add the effect of a colored high-lighted box showing from underneath my images on my website when someone places their cursor over the image. Basically,my image shrinks and the colored box underneath shows as a frame around the pic.  I suppose this is a colored image file behind my image as background.  If you would provide the coding for this effect, I will really appreciate it.  here is an example  of what I would like to do:http://www.vogue.it/.

My theme is Brooklyn that I want to edit. 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 72

Hi Tyshel,

Britton here again.

I'm not sure which photos your want to target on the homepage, so the following was designed to work with the featured product images. It should be quite similar to make it work with other images though.

All you really need to do is add this to the bottom of the theme.scss.liquid file:

.grid-product__image-wrapper {
  background-color:black;
}

.grid-product__image-link {
  -webkit-transition: all 1s ease !important; /* Safari */
  transition: all 1s ease !important;
}

.grid-product__image-link:hover {
  transform: scale(0.8);
}

Keep in mind that this customization does nullify some of the features that brooklyn already comes with, such as the text that appears over the featured product image on hover. It should be possible to edit this so that it preserves that functionality though.

As always, make sure to backup your theme by duplicating it before you make any code edits. That way if something breaks there is an easy fix!

I hope that helps get you started!

-Britton

Britton Shopify Guru
0 Likes
Highlighted
Shopify Partner
21 0 2

I added the code but noticed no changes. I'm going to try and edit it to product collections, etc. But so far there aren't any changes to my theme visually.

I would like to add wrapper to all images throughout my site.  The wrapper is only visible when the cursor is placed over the image.  Then the original image shrinks a bit while the wrapper under neath zooms out like a frame.  if you have a chance, please checkout www.vogue.it and place your pointer over an image to see when I mean.

I hope you can offer coding for this.  Thanks

0 Likes