Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 13, 2013 at 12:47 pm #199910
    sundialstudios

    Hi – I am having an issue where my single product (product details) page is pushed up under the menu. On the other pages in my site I am using a full-width layer slider, which by design slides up under the menu, but I read another post that I cannot use that on the single product page.

    My 2 questions here are:
    Is it possible to use a static image in the header on the single product page?
    If not, how can I push the content down on the page?

    I have tried using the following to push the content down 

    .single-product .template-shop {
padding-top: 110px !important;
}

    but that did not work (although it does work in Firebug).

    You can see the site by clicking here
    If you click on the product and go to the details page you’ll see my issue.

    Thanks!
    John

    December 14, 2013 at 4:39 am #200142
    Devin

    Hi sundialstudios!

    Where did you put the css that it wasn’t working? The theme already has a bit of padding added in for the single product pages so the following should work as well:

    #top.single-product .template-shop {
padding-top: 110px;
}

    Even without the !important declaration. If it doesn’t, leave it in and let us know again so we can see whats taking priority over it.

    Cheers!
    Devin

    December 14, 2013 at 7:08 pm #200253
    sundialstudios

    Thanks Devin – I don’t think I put the #top in there before because adding that worked.

    Is there a way to add a static image to the header in the single product pages? I’m using a full-width layer slider in the header on all the other pages, and since I can’t do that on the single-product page I was wondering if I can just use a static image on the product details page to give me a similar look.

    Thanks!
    John

    December 15, 2013 at 3:05 am #200317
    Ismael

    Hi!

    You can try this. We will use the title container. Edit the product then look for Layout > Header Settings > enable the header. Add this on Quick CSS to hide the title and breadcrumb:

    .single-product .main-title.entry-title, .single-product .breadcrumb {
display: none;
}

    You can then add an image background on the title container for single product pages only. 

    .single-product .stretch_full.container_wrap {
background: url('http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
}

    You can adjust the height. Change the background image url.

    Cheers!
    Ismael

    December 15, 2013 at 7:17 pm #200470
    sundialstudios

    Ismael – you rock! That’s exactly what I was looking for!

    There isn’t another company out there that has as good of support and assistance as you guys have! I really appreciate the help!

    Thanks,
    John

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Single Product (Product Details) Page Header’ is closed to new replies.