Adding an image as the background on both the store page and the individual product pages (hawley)

Can you tell me how to change the font on "Shopping cart" when someone clicks on an empty cart, so that it's the same as the heading on the other pages-- "Heading 1" ?

https://www.coloradoraincatcher.com/cart

Sorry to jump on your thread, but it was a similar Q so I'm hoping you could help:)! 🙏🙏

@raincatcher

You want to use Homemade Apple font, size 60px? Just want to make sure before we provide the code.

On 3/9/2021 at 1:41 PM, creedon said:

You'll need to upload or already have a background image somewhere for this to work and have the URL of the image.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /* add background image to store pages */
  
  .sections .page-section:first-child .section-background {
  
    background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' );
    
    }
    
  </style>

This is for v7.1.

You will need to replace the URL in the code with the URL of the image you want to use.

Let us know how it goes.

Creedon this is super super helpful I've been trying to figure this out for some weeks.  Is it possible to do this dynamically on a product page?

I'm trying to use my first and only product image as the background for the section on the product page.  if i'm not mistake it seems like your code will only allow me to change the background image for every product to the same image.  Is it possible to use the actual product image as the background image?

58 minutes ago, pavilion said:

Is it possible to do this dynamically on a product page?

I don't know.

Please post the URL for a product page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Thank so much!

My website is here:

https://pavilion.squarespace.com

password: supersecretpasswordpavilion

The page that i'm trying to get the image to format is here:

https://pavilion.squarespace.com/get-started/p/pod8w6he3gjsmop7h4w6vo3j8vyy4s

The page that I would like to get it look like is this:

https://pavilion.squarespace.com/inward-hunger

Thank you again for your help!

@pavilion

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<!--

  begin use first product gallery image as background for page
  
  SS Version : 7.1
  
  the code is comprised of a several tags. all are needed for the full effect to
  work
  
  CSS based on pen by Matthew Wilcoxson < https://codepen.io/akademy/pen/FlkzB >
  
  -->
  
  <style>
  
    body::before {
    
      /* for no filter use 'none' (no quotes) as value, for more on filter see
         < https://css-tricks.com/almanac/properties/f/filter/ > */
      
      --filter-value : brightness( 20% ) grayscale( 1 );
      
      }
      
    .ProductItem .ProductItem-additional,
    .ProductItem > section:last-child
    
      {
      
        background-color : black;
        padding : 1.5em;
        
        }
        
    </style>
    
  <script>
    
    const nth = 1; // which image from gallery to use as background
    
    const transparentFooter = false; // false or true
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
    
  <style>
  
    body::before {
    
      background-repeat : no-repeat;
      background-size : cover;
      content : '';
      display : block;
      
      -webkit-filter : var( --filter-value );
      filter : var( --filter-value );
      
      height : 100%;
      left : 0;
      position : fixed;
      right : 0;
      width : 100%;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( ! $( '.ProductItem' ).length ) return;
      
      const imageUrl = $( '.ProductItem-gallery-slides-item-image' )
      
        .eq ( nth - 1 )
        
        .attr ( 'data-src' );
        
      const skipFooter = transparentFooter ? '' : ':not( #footer-sections ) > ';
      
      $( '<style>' +
      
        'body::before {' +
        
          'background-image : url( ' + imageUrl + ' );' +
          
          '}' +
          
        '.collection-type-products ' +
        
        skipFooter +
        
        '.page-section,' +
        
        '.collection-type-products ' +
        
        skipFooter +
        
        '.page-section .section-background' +
        
          '{' +
          
            'background-color : unset;' +
            
            'transition : 0.5s;' +
            
            '}' +
            
        '</style>' )
        
        .appendTo ( 'head' );
        
      } );
      
    </script>
    
  <!-- end use first product gallery image as background for page -->

This is for v7.1.

Let us know how it goes.

On 3/23/2021 at 7:41 PM, creedon said:

@pavilion

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<!--

  begin use first product gallery image as background for page
  
  SS Version : 7.1
  
  the code is comprised of a style and script tag. both are needed for the full
  effect to work
  
  based on a pen by Matthew Wilcoxson < https://codepen.io/akademy/pen/FlkzB >
  
  no user serviceable parts below
  
  -->
  
  <style>
  
    body::before {
    
      background-repeat : no-repeat;
      background-size : cover;
      content : '';
      display : block;
      filter : brightness( 20% ) grayscale( 1 );
      height : 100%;
      left : 0;
      position : fixed;
      right : 0;
      width : 100%;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( ! $( '.ProductItem' ).length ) return;
      
      const imageUrl = $( '.ProductItem-gallery-slides-item-image:first' )
      
        .attr ( 'data-src' );
        
      $( '<style>' +
      
        'body::before {' +
        
          'background-image : url( ' + imageUrl + ' );' +
          
          '}' +
          
        '.collection-type-products .page-section,' +
        
        '.collection-type-products .page-section .section-background' +
        
          '{' +
          
            'background-color : unset;' +
            
            'transition : 0.5s;' +
            
            '}' +
            
        '</style>' )
        
        .appendTo ( 'head' );
        
      } );
      
    </script>
    
  <!-- end use first product gallery image as background for page -->

This is for v7.1.

Let us know how it goes.

Hey Creedon!

Thank you so much for this!  Unfortunately no dice 😕

implemented it here:

https://pavilion.squarespace.com/get-started/p/pod8w6he3gjsmop7h4w6vo3j8vyy4s

Took a look at the page source but couldn't tell what wasn't working.

Any sense of what is wrong?

My bad I missed a step in the instructions. I have updated my code post.

Let us know how it goes.

3 hours ago, creedon said:

My bad I missed a step in the instructions. I have updated my code post.

Let us know how it goes.

Thank you so much!

Its working now but its actually making the background of the entire page the image (which incidentally looks great) but I'm actually just trying to have the background of that first immediate section section that has the product images, quantity and buy button in it be the first image. 

Also i'm hoping that that is the first section after the site header so that the image bleeds up into the site header when the header is set to transparent.

Example of the look i'm going for is here: https://pavilion.squarespace.com/inward-hunger

Thank you!

@pavilion

The product page details are all one section so it would be very complex to have the image show from the top of the page to just the Watch Now button.

Also the product page is devoid of CSS, data, and Javscript that SS uses to create the effect shown on the example page you show. So anything we can do in a few lines of code won't be able to match that effect.

I can however probably make a few tweaks to the current code to get it a little closer to the example in style.

I can change the code to not make the footer transparent.

I can give the additional info area a background color and a little padding to remove the transparency.

Do those changes sound of interest to you?

3 minutes ago, creedon said:

@pavilion

The product page details are all one section so it would be very complex to have the image show from the top of the page to just the Watch Now button.

Also the product page is devoid of CSS, data, and Javscript that SS uses to create the effect shown on the example page you show. So anything we can do in a few lines of code won't be able to match that effect.

I can however probably make a few tweaks to the current code to get it a little closer to the example in style.

I can change the code to not make the footer transparent.

I can give the additional info area a background color and a little padding to remove the transparency.

Do those changes sound of interest to you?

I fully understand and I think that would be perfect solution! Thank you!

If we can. make the additional info and the footer area black I think what I can do is edit the Images so that they are a specific height to make sure most of the image displays in the top half of the page background, but then make the rest of the image black so that the entire image doesn't get stretched all the way down past the black areas of the additional info and the footer, but instead the majority of it remains in the main mail product detail section.

Does that make sense?

@pavilion

You can give that a try to see what happens. Wait to do that until we see what the two changes I propose do for us. I'll try to get the new code up tomorrow.

3 minutes ago, creedon said:

@pavilion

You can give that a try to see what happens. Wait to do that until we see what the two changes I propose do for us. I'll try to get the new code up tomorrow.

Sounds good! Will do.

Thank you so much again!

@pavilion

I have updated my previous code post.

Let us know how it goes.

On 3/26/2021 at 9:16 PM, creedon said:

@pavilion

I have updated my previous code post.

Let us know how it goes.

Thank  you so much!

We're really close!  You'll see that the black covers the additional info as a box - but not the entire width of the screen? It also doesn't get the related items ether 😕

https://pavilion.squarespace.com/content/p/decoded-caribbean

Also is there any way to decrease the extra space between the bottom of the product info and the additional info section?

16 hours ago, pavilion said:

You'll see that the black covers the additional info as a box - but not the entire width of the screen?

That is because the product area was not designed to be full-bleed to begin with. With everything set to default you can't see that product info is centered in the page with padding on the sides. When you take away the background-colors as we have done to show the background image we can now see the border spacing.

It might be possible to change the spacing to make the product page full-bleed. I suggest putting that on the to do list.

Quote

It also doesn't get the related items ether 

I have updated my previous code post.

Quote

Also is there any way to decrease the extra space between the bottom of the product info and the additional info section?

Are you sure there is no extra blank lines at the end of the product description? It looks like there might be. If not then we can go after the spacing with some CSS.

19 hours ago, creedon said:

That is because the product area was not designed to be full-bleed to begin with. With everything set to default you can't see that product info is centered in the page with padding on the sides. When you take away the background-colors as we have done to show the background image we can now see the border spacing.

It might be possible to change the spacing to make the product page full-bleed. I suggest putting that on the to do list.

I have updated my previous code post.

Are you sure there is no extra blank lines at the end of the product description? It looks like there might be. If not then we can go after the spacing with some CSS.

Awesome!  Yes this works great now!

I've also added the code you shared to remove the spaces below where the add to cart button was but the space still remains.

.sqs-add-to-cart-button-wrapper {
    display: none !important
}

.ProductItem-details .ProductItem-details-excerpt {

  margin-bottom : 0;
  
  }

On 3/30/2021 at 3:59 AM, pavilion said:

Awesome!  Yes this works great now!

I've also added the code you shared to remove the spaces below where the add to cart button was but the space still remains.

.sqs-add-to-cart-button-wrapper {
    display: none !important
}

.ProductItem-details .ProductItem-details-excerpt {

  margin-bottom : 0;
  
  }

Hi.

Have you solved this yet?

On 3/9/2021 at 2:41 PM, creedon said:

You'll need to upload or already have a background image somewhere for this to work and have the URL of the image.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /* add background image to store pages */
  
  .sections .page-section:first-child .section-background {
  
    background-image : url( 'https://images.squarespace-cdn.com/content/v1/60317ad0e6a8144aeb40e05b/1613863251768-AD4U2Q80S138G23DQNKB/ke17ZwdGBToddI8pDm48kB633_jcvlRQCTsccOJmE2IUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcoyG10a7_y2FLsh7IlvU_kYgJOPzb97S8g5KskxYthfrHYe3GvmZQnJn2eu9uIV55/zeronine7.jpg' );
    
    }
    
  </style>

This is for v7.1.

You will need to replace the URL in the code with the URL of the image you want to use.

Let us know how it goes.

I tried this on my storefront page and the background image ended up as the footer instead of the background. It worked for the individual product pages, though. Here's the code I have in place:
 

<style>

  /* add background image to store pages */
  
  .sections .page-section:first-child .section-background {
  
    background-image : url( '/s/OldPaperBkgrnd2.jpg' );
    
    }
    
  </style>

Any help would be appreciated. Thanks.

@mtengaio

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

hey creedon! u helped me so much already! 
I do have one more question tho, I succesfully added a picture (gif) to the page. Unfortunatley I have 2 problems.

Nr 1: I can't make the Image fullscreen even if i go higher than 2400. How can I change the size

Nr 2: The Image only goes halfway in the store. It doesn't go over the footer but over the header. 

Would much apreciate the help!

redpink.pink

pw: @redp!nk

On 12/18/2021 at 1:44 PM, redpink said:

Nr 1: I can't make the Image fullscreen even if i go higher than 2400. How can I change the size

Here is the first issue. It appears your image has fairly hefty left and right margins which are going to cause issues when trying to place the image. There is also a little extra top and bottom that might be trimmed off. Images that you want to have be fullscreen need to have the absolute minimum amount or border. Technically you might be able manipulate the image to over come these issues with CSS by playing with negative margins and stuff but it's a hack. Best to start off right and save yourself the pain.

Try this cropped version of your image and see if it gets you closer to what you want.

Let us know how it goes.

Reminds me of howlround video feedback!

thank you very much!

I updated it. It's more in the middle now. But it's still cropted on the bottom and full size isn't possible unfortunatly. Is there a possibility to make the Shop block "longer on the bottom" via css?

Wow! I didn't know that howlround video. That looks amazing!!

On 12/18/2021 at 1:44 PM, redpink said:

Nr 2: The Image only goes halfway in the store. It doesn't go over the footer but over the header. 

Are you going to have a footer on your store pages? If not it could be hidden altogether and that may solve the issue of image not going the full length of the page.

@creedom Can I do this for only specific pages in 7.0 Brine template?