Jump to content

Help moving 'additional info' block on product page

Go to solution Solved by tuanphan,

Recommended Posts

Hi all, I am attempting to move this accordion block above the add to cart button and the "no risk return..." text on on my product pages. I've tried to use some code from forum posts like this in the past, but to no avail. Any help would be so appreciated! (I would need to be able to replicate this custom placement on every product page.)

And, maybe I should clarify that I would need the accordion to be half its current size, too. Wouldn't want it jutting out.

Thanks in advance,

Rosa

Screenshot 2023-01-04 181633.png

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks for your quick response. I found that this almost worked for me, but now I just need it to show up in the same place on mobile. For some reason, on mobile, it shows up above the price. I'd like it to appear below all the text and above the quantity, like it does on desktop.  

image.thumb.png.1bdec31c9fceec95b61d10713fe0c3d0.png

 

Link to comment
On 1/6/2023 at 3:53 AM, rosan said:

Thanks for your quick response. I found that this almost worked for me, but now I just need it to show up in the same place on mobile. For some reason, on mobile, it shows up above the price. I'd like it to appear below all the text and above the quantity, like it does on desktop.  

image.thumb.png.1bdec31c9fceec95b61d10713fe0c3d0.png

 

Can you share link to this product? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
On 1/10/2023 at 7:53 AM, rosan said:

https://flounder-orange-slbh.squarespace.com/solar-panels/p/uleaf

Thanks! (I would want it to apply to all products though)

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
section.ProductItem-additional {
    order: 3;
    margin-top: 0px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/14/2023 at 6:46 AM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
section.ProductItem-additional {
    order: 3;
    margin-top: 0px !important;
}
}

 

Thank you so much! This worked beautifully. 

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.