Jump to content

Product Page Styling

Go to solution Solved by DreamrW,

Recommended Posts

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?

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

Link to comment
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! 

Link to comment
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>

image.thumb.png.618ee615ab260f6a716552cfe710ccda.png

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

image.thumb.png.618ee615ab260f6a716552cfe710ccda.png

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? 

 

 

Link to comment
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

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
  • 2 weeks later...
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? 

Screenshot 2023-09-06 at 16.06.34.png

Link to comment
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? 

Screenshot 2023-09-06 at 16.06.34.png

Add this under

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

 

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
  • 3 months later...
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?

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.