Further Shop Page Customization

  • As you’ll see, my shop page currently has a solid color background. I would like to put full page image(s) in the background rather than a color. Another part of wanting to do that would require me to make all 3 boxes (the white lines) that are around each product image, description, and price, be a solid color color so that the background image doesn’t show through those.

    How can I accomplish this?

    As an example here is a link to another page I did (using a pricing table plugin) that you’ll see that the pricing table has a solid color fill which prevents from the background showing through. This is exactly what I am wanting to do on my shop page.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi therealcrazy8,

    You could use the following custom CSS to change the color of the catalog item divs:

    
.prod-cat-mid-detail-div.upcp-mid-detail-div, .prod-cat-end-detail-div.upcp-end-detail-div, .prod-cat-thumb-image-div.upcp-detail-image-div {
    background:  orange !important;
}

    Also, you could use the following CSS to add a background image to the body:

    

div#main {
        background-image: url('https://7art-screensavers.com/wallpapers/abstract-0/xls/sky-blue-purple-background.jpg');
  
}
    Thread Starter therealcrazy8

    (@therealcrazy8)

    Thank you very much. That first bit of CSS worked, however, the second one isn’t working. Like the first one, the second CSS code is supposed to be placed in the “Custom CSS” area of the catalog, correct? I went to the provided URL in that, and that came up fine, so I know that part works, just not sure why the code doesn’t work. Any ideas? Is there a way to have multiple, stacked, background images if I wanted to? Think of it being 2 or 3 full width images stacked on top of each other. Not for sure if I’ll be doing it, but just in case I do, I’d still like to see if it’s possible.

    Hi therealcrazy8,

    It seems that you the div structure of your site was modified and the CSS was not being applied to the correct div. Could you try the following CSS and see if it works:

    
div#av_section_1 {
        background-image: url("https://YourBackgroundImageURLhere.com") !important;
}

    We’re not sure if the styling to the background image could be done the way you explained, we suggest you to contact the theme developer as they would be able to better assist you on this.

    Thread Starter therealcrazy8

    (@therealcrazy8)

    Currently I was able to get one image to cover the background from an image (for experimenting with) I have loaded into my Media, but how can I have multiple images stacked on top of each other? Best case scenario, I would like to be able to stack multiple images, similar to what you’ll see on my /shop-woo/ page. You’ll notice that theirs multiple images stacked on top of each other. In this example there’s on 2, but I would like to see if I could get 3 stacked on top of each other. Worst case scenario, I would like to at least not have one image that doesn’t repeat itself on the background, like it currently does.

    Thank you

    • This reply was modified 6 years, 2 months ago by therealcrazy8.

    Hi therealcrazy8,

    For stacking images, do you mean you’d want them to appear above the catalog on your /shop/ page? If so, you should see if you can add blocks (via the page builder your site uses) above the Product catalog shortcode on that page.

    Alternatively, if you want the stacked images to appear for the full height of your /shop/ page, then we would suggest combining your images into one image and applying that image as a background to div#av_section_1

    Thread Starter therealcrazy8

    (@therealcrazy8)

    Awesome! I will give that a try. because of all the custom CSS I have, is there a way to comment out the code I don’t want to use at the moment? Can I just do ** or */ or something?

    Thread Starter therealcrazy8

    (@therealcrazy8)

    Just discovered I can use /* */ for beginning and end ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Further Shop Page Customization’ is closed to new replies.

Tags