Jump to content

Adding an image background to each product summary item

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://saxophone-calliope-f29a.squarespace.com/

Hello,

To better my skills, I'm re-creating a website that I love and I think has some great design. There are several things I'm still working on but I specifically need help with the product summary block. I would like to add a background image to each product card.  A photo of exactly what I would like to achieve is below. 

I would also love to move the copy from below the image to above it, again to mimic the screenshot below. 

If you have any idea what code to use for this I would greatly appreciate it!

Here is the link to my site: https://saxophone-calliope-f29a.squarespace.com/
The password to access my site is: brineintopedro

Here is the original site I am using as a reference: https://ujjo.com/

ujjo-product-summary.png

Edited by Carlieann
Link to comment
  • Solution

Try adding to Design > Custom CSS

div#block-yui_3_17_2_1_1648922134937_19653 .summary-item {
    background-image: url(https://cdn.shopify.com/s/files/1/0568/4694/2380/t/1/assets/product-item-background.svg?v=1146526704590749047);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/14/2022 at 7:11 AM, Carlieann said:

Thanks! I was able to implement this and the image now shows up. I was also able to re-order the content as I wanted, but now everything is looking compact and I'm having trouble getting it to size correctly. Anyone have any ideas there? 

Hi,

You mean resize bold text size???

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. 

ujjo-wrong-summary-item-size.png

Link to comment
On 4/21/2022 at 5:52 AM, Carlieann said:

Actually, I mean each card! I changed the display type to flex in order to change the positioning of the meta data and title of each summary card to be above the image (instead of below) but that also changed the size of each summary item. Attaching a screenshot of what it currently looks like. 

ujjo-wrong-summary-item-size.png

Yes. Flex will break summary layout. You can remove the code, then we will try some other code to move title/meta data position

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.