How can I modify CSS to adjust product picture layout and remove Zip payment section?

Store Design
1

Hi

I have 2 issues - I think I probably need some Custom CSS help with both.

  1. I need to remove the white space between the product picture and the reviews so that they are closer together.

KrisTech_0-1677250039601.png
KrisTech_0-1677250039601.png1893×720 167 KB

  1. I need to remove 4 interest free payments Zip section which seems to have embedded itself in the template, I removed the app but they are not moving.

KrisTech_1-1677250167794.png
KrisTech_1-1677250167794.png1902×870 176 KB

2

Hi @Kris-Tech ,
can you please share your store URL so that I can share with you the exact codes that will help you in fixing the CSS issues.
Thanks & Regards
KaalTechGeeks

3

I’m kinda working on a theme right now which hasn’t been published yet (probably next week) so I can show you the 2nd issue when it’s live.

But I can show you my Store now and you can probably fix the white space issue between the product and the reviews.

https://techfirmstore.com/products/car-rear-view-camera

4

Hi @Kris-Tech ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

  1. For the first problem
    Step 1: Go to Online Store->Theme->Edit code
    Step 2: Asset->/->theme.css paste below code at the bottom of the file:
.page-content.page-content--product {
    padding-bottom: unset;
}

PageFlyVictor_0-1677274402432.png
PageFlyVictor_0-1677274402432.png996×592 151 KB

  1. I don’t see what you describe on my screen, please check again.

Hope my answer will help you.

Best regards,

Victor | PageFly

5

Perfect that worked!

Can you help me on the other issue if I give you access to my themes?

6

Thank you. If you have any problems, please post it and I am willing to help

7

Hi Victor, wonder if you can help me out with the following:

https://techfirmstore.com/

  1. I need to scrolling text underneath the Hero banner to slow down

  2. The ‘View all’ C2A buttons need to have inverted colours so they stand out, so black background and white text

  3. Can you reduce the gap in between the Tech-Firm Bargains section and the testimonial section, there’s a bit too much white space and same for the gap between Check out our latest deals section and the email sign up space.

Thanks

8

Hi @Kris-Tech ,

You can add this code below to theme.css

.scrolling-text__inner.scrolling-text__inner--left {
    animation: scrolling-text 500s linear infinite !important;
}

a.btn.btn--secondary.btn--small.section-header__link {
    background: black;
    color: white
}

div#shopify-section-template--18161253024050__86d4e68e-61ed-4aeb-bc68-45a1c933d083 {
    margin-bottom: unset;
}

div#shopify-section-template--18161253024050__featured-collection {
    margin-bottom: unset;
}
9

Fantastic, worked perfectly

Thank you!