Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Go to solution Solved by creedon,

Recommended Posts

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?

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@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.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

 

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?

Edited by pavilion
Link to comment
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!

Link to comment

@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.

1432093322_ScreenShot2021-03-25at8_09_08PM.thumb.png.4593db30197da431887ff0e37cf159a3.png

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?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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.

1432093322_ScreenShot2021-03-25at8_09_08PM.thumb.png.4593db30197da431887ff0e37cf159a3.png

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?

Link to comment
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?

Edited by pavilion
Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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;
  
  }
Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...