Re: Styling Complementary products block

Solved

Styling Complementary products block

rebelcopenhagen
Excursionist
22 0 2

Hi.

 

How do I get the product name to be below the image, remove the price and center all the items/text?

 

The link is https://www.rebelcopenhagen.dk/products/stovler-gron? 

 

Thank you

 

Udklip_Complentery.JPG

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@rebelcopenhagen ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3. Add this code before </body> tag 

 

<style>
.t4s-complimentary_product > div {
    display: flex;
    flex-direction: column;
}
.t4s-product__info-wrapper .t4s-complimentary_products {
    justify-content: space-between;
}
.t4s-widget__pr-price {
    display: none;
}
.t4s-complimentary_product .t4s-widget_if_pr {
  padding: 0 4px;
}
.t4s-complimentary_product .t4s-widget__pr-title {
  text-align: center;
}
</style>

 

Result:

BSSCommerceB2B_0-1727188670942.png

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@rebelcopenhagen ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3. Add this code before </body> tag 

 

<style>
.t4s-complimentary_product > div {
    display: flex;
    flex-direction: column;
}
.t4s-product__info-wrapper .t4s-complimentary_products {
    justify-content: space-between;
}
.t4s-widget__pr-price {
    display: none;
}
.t4s-complimentary_product .t4s-widget_if_pr {
  padding: 0 4px;
}
.t4s-complimentary_product .t4s-widget__pr-title {
  text-align: center;
}
</style>

 

Result:

BSSCommerceB2B_0-1727188670942.png

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

rebelcopenhagen
Excursionist
22 0 2

It worked perfect!

Thank you