Product Page Styling

I want to replicate the style of some of the features on a product page. I'd be so grateful if someone could help me with the necessary CSS 🙏

See attached. 

https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9 

3 minutes ago, DreamrW said:

I want to replicate the style of some of the features on a product page. I'd be so grateful if someone could help me with the necessary CSS 🙏

See attached. 

https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9 

 

The website I want to replicate is https://studioluxe.co/shop/balanced

I also want to add an accordion below the product description like that found at https://www.shopcreativelaw.com/shop/the-web-designer-agreement

The site is private. You can setup an access password, we can check easier

With accordion, you can add it to Additional Info, then we can give code to move it under product description

3 hours ago, tuanphan said:

The site is private. You can setup an access password, we can check easier

With accordion, you can add it to Additional Info, then we can give code to move it under product description

 

Ooops! It's Energy2023 

On 8/21/2023 at 8:19 PM, DreamrW said:

Ooops! It's Energy2023 

If each product have a different accordion, you can add an Accordion Block to Product Additional Info, then we can give code to move it into Product Description.

If all product will same accordion, you can add an Accordion Block to Site Footer, then we can give the code

And you want to place it under Description or under Add to Cart button?

2 hours ago, tuanphan said:

If each product have a different accordion, you can add an Accordion Block to Product Additional Info, then we can give code to move it into Product Description.

If all product will same accordion, you can add an Accordion Block to Site Footer, then we can give the code

And you want to place it under Description or under Add to Cart button?

Thanks Tuan, I've added an accordion on the below page. I want to have it sit before product description. 

https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9

You might also take a look at my first post on this thread as there are a couple of other styling issues I'd appreciate your help with 🙏

Just now, DreamrW said:

Thanks Tuan, I've added an accordion on the below page. I want to have it sit before product description. 

https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9

You might also take a look at my first post on this thread as there are a couple of other styling issues I'd appreciate your help with 🙏

SORRY i mis spelt - I want it to sit BELOW the product description please! 

On 8/23/2023 at 6:43 PM, DreamrW said:

SORRY i mis spelt - I want it to sit BELOW the product description please! 

Add to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').insertAfter('.sqs-add-to-cart-button-wrapper');
})
</script>

4 hours ago, tuanphan said:

Add to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').insertAfter('.sqs-add-to-cart-button-wrapper');
})
</script>

Thanks Tuan, is it possible to get it to sit directly below the product description, and above the quantity and Add to Cart button please? 

On 8/26/2023 at 9:09 PM, DreamrW said:

Thanks Tuan, is it possible to get it to sit directly below the product description, and above the quantity and Add to Cart button please? 

 

 

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').insertAfter('div.ProductItem-details-excerpt');
})
</script>

If it doesn't work, please keep new code, we can check it again easier

On 8/29/2023 at 10:56 AM, tuanphan said:

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('section.ProductItem-additional .accordion-block').insertAfter('div.ProductItem-details-excerpt');
})
</script>

If it doesn't work, please keep new code, we can check it again easier

This is perfect Tuan, thanks! 

I wonder can you tell me how to extend the text margin on the right? 

On 9/6/2023 at 10:08 PM, DreamrW said:

This is perfect Tuan, thanks! 

 

I wonder can you tell me how to extend the text margin on the right? 

Add this under

<style>
  .accordion-item__description {
    max-width: 100% !important;
}
</style>

I'd like to reduce the space above the accordion and increase the space below it. Can you tell me how to do this please?

https://tarpon-pineapple-9x9c.squarespace.com/shop-pdus/p/bn0000-basic-pdu-6bs1363-3kva-tjmh3

Energy2023

On 12/12/2023 at 2:05 AM, DreamrW said:

I'd like to reduce the space above the accordion and increase the space below it. Can you tell me how to do this please?

https://tarpon-pineapple-9x9c.squarespace.com/shop-pdus/p/bn0000-basic-pdu-6bs1363-3kva-tjmh3

Energy2023

The url doesn't work. Can you check it again?

On 12/13/2023 at 3:49 AM, tuanphan said:

The url doesn't work. Can you check it again?

I've scrapped it thanks Tuan. 

You're welcome. If you still need help, just let me know