Complementary Products Spacing in Blockshop Theme

Store Design
1

Hi there,

I needed help with spacing on this part of the website. The specific setup can be seen on the Alba product on the website. I would also like to know how to change the font for this widget and make it bigger.

Any help is greatly appreciated, thank you so much.

Site: geneboutique.com

Psw: dewblo

2

@unknowndev - are you referring to shop pay part?

3

No, this

Screenshot at Apr 16 20-27-22.png
Screenshot at Apr 16 20-27-22.png848×822 104 KB

4

@unknowndev - it is combination of margin and padding, for padding please add below css to the end of your theme–critical.css file, you can adjust number as per your need

for margin it is set for all the sections of the page, you can check customize settings to reduce some margin for all the sections, it is same setting for all

.spr-container {padding: 5px !important;}
5

Add the following CSS to the custom css feature to that templates main product section, or the theme custom-css.

Read: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.flexbox-gap .complementary-products--container {
    gap: calc( var(--spacing--item) + 6px );
}

Tailor the 6px to need.

Font sizes

/* title */
[data-block-type=complementary-products] [data-item=paragraph] { font-size: 20px; }
/* price */
[data-block-type=complementary-products] [data-item=accent-text] { font-size: 20px; }

Tailor the 20px to need.

6

Hi @unknowndev

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->theme–critical.css

.product-page--block {
    margin-top: 10px !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly