MorganePinet Posted September 20, 2021 Posted September 20, 2021 (edited) Site URL: https://www.mademoisellemorgane.com.au/boutique/p/versailles-black Hello, https://www.mademoisellemorgane.com.au/boutique/p/versailles-black I have few problems. 1. I would like to move and resize my " add to card " and " size " box. It takes too much space specially on mobile. Please find photos attached. I have also attached a sample. 2. Also I would like to add a " Shipping " and " product information " boxes like the sample below. Thank you for your help !! Edited September 20, 2021 by MorganePinet
Solution tuanphan Posted September 21, 2021 Solution Posted September 21, 2021 Hi, #1. Reduce boxes height & Make them same line? #2. It is Accordion. You can use some tools to achieve this Free tool 1 Accordions Plugin (paid plugin) Free guide It will add accordion to Additional Info. If you want to move it under description, add it first, then we will give the code to move it under Description 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!)
MorganePinet Posted September 21, 2021 Author Posted September 21, 2021 Hello Tuanphan, Thank you for your reply ! 1. Yes exactly, I would like to reduce the boxes sizes. Height + width and align '' size " and '' quantity '' box. 2. I have added the Accordion , Thank you so much ! Could you please let me know how to move it under ''description '' ?
tuanphan Posted September 24, 2021 Posted September 24, 2021 On 9/21/2021 at 1:11 PM, MorganePinet said: Hello Tuanphan, Thank you for your reply ! 1. Yes exactly, I would like to reduce the boxes sizes. Height + width and align '' size " and '' quantity '' box. 2. I have added the Accordion , Thank you so much ! Could you please let me know how to move it under ''description '' ? #1. Add to Design > Custom CSS /* variant */ div.variant-select-wrapper { padding-top: 5px !important; padding-bottom: 5px !important; } /* quantity */ input[aria-label="Quantity"] { padding-top: 5px !important; padding-bottom: 5px !important; } #2. Add to Last line in Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.ProductItem .ProductItem-additional').appendTo('.ProductItem-details .ProductItem-details-checkout'); }); </script> <style> .ProductItem .ProductItem-additional {order:5;} </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!)
Jo_SQSP Posted March 3, 2022 Posted March 3, 2022 Hi @MorganePianet, We have recently launched the Accordion Block which could be helpful to you going forward. This Block makes it possible to add an accordion menu without using custom code. You can find out more about it in our Accordion Block guide. tuanphan 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment