ievavi

Heey, Kill! Thanks for sweet words — yes, of course! 🙂 Squarestylist's mega menu could be a good starting point and then you can customised according to your needs: https://www.squarestylist.com/shop/mega-menu If free alternative, this article can be very helpful: https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/

No I haven't. Since I would love to reorder the items (push the price down).

Exactly! That the sub-items (sub-pages) (weddings / portraits / lifestyle / gift vouchers) would expand automatically. Any advice?

The solution was not found. Would you have some suggestions, @tuanphan?

I would love to know as well how the links in folder would be displayed in mobile (without the arrow). May you have a spare minute to shed some light, @tuanphan? The site: www.ievaviphoto.com I'm looking for something similar to the attached example for the links in the folder.

Site URL: https://www.ievaviphoto.com/ Hi! I'm looking for a solution how the pages inside the folder (Info) would be visible on Mobile Menu without clicking. Something similar to the attached example: My site: www.ievaviphoto.com

Thomas @creedon, any chance you might be able to share some knowledge how the reorder of the product details can be achieved making the quantity & add to cart buttons to stay in one row?

Ah, I see! The intention is to keep add to cart & variants buttons to stay in one line. How could I reorder the productItem-details and also make those two stay in one line, @bangank36?

Thanks so much!

Hmm .. I added this piece of code to the store page, however, no changes are visible. The site is built on 7.0 .. <style> /* begin store product details reorder desktop Version : 0.1d0 SS Version : 7.1 Dependancies : store product details display flex desktop By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ @media screen and ( min-width : 768px ) { .ProductItem-details .ProductItem-details-checkout { /* this is where you control the order of elements. replace unset with a number. use 1, 2, 3, etc. */ --add-to-cart-button : 3; --description : 1; --price : 4; --quantity : unset; --variants :2; } /* do not change anything below, there be the borg here */ .ProductItem-details .product-quantity-input { -webkit-box-ordinal-group : calc( var( --quantity ) + 1 ); -moz-box-ordinal-group : calc( var( --quantity ) + 1 ); -ms-flex-order : var( --quantity ); -webkit-order : var( --quantity ); order : var( --quantity ); } .ProductItem-details .product-variants { -webkit-box-ordinal-group : calc( var( --variants ) + 1 ); -moz-box-ordinal-group : calc( var( --variants ) + 1 ); -ms-flex-order : var( --variants ); -webkit-order : var( --variants ); order : var( --variants ); } .ProductItem-details .ProductItem-details-excerpt { -webkit-box-ordinal-group : calc( var( --description ) + 1 ); -moz-box-ordinal-group : calc( var( --description ) + 1 ); -ms-flex-order : var( --description ); -webkit-order : var( --description ); order : var( --description ); } .ProductItem-details .ProductItem-product-price { -webkit-box-ordinal-group : calc( var( --price ) + 1 ); -moz-box-ordinal-group : calc( var( --price ) + 1 ); -ms-flex-order : var( --price ); -webkit-order : var( --price ); order : var( --price ); } .ProductItem-details .sqs-add-to-cart-button-wrapper { -webkit-box-ordinal-group : calc( var( --add-to-cart-button ) + 1 ); -moz-box-ordinal-group : calc( var( --add-to-cart-button ) + 1 ); -ms-flex-order : var( --add-to-cart-button ); -webkit-order : var( --add-to-cart-button ); order : var( --add-to-cart-button ); } } /* end store product details reorder desktop */ </style>

Hi, @creedon! Any chance you would be able to give a hand to pushing the price title above quantity and add to cart to button? I find it a little challenging task due to the code we added earlier this year to the site. Example: https://rocksforlife.com/our-jewellery/double-pav-hoop-large-white-gold

Site URL: https://rocksforlife.com/ Hello, I would love the price to be displayed above Quantity and Add to Cart buttons rather than under the product title. How could I achieve that? This code doesn't work for me since I also want Quantity and Add to Cart buttons to be displayed in one line for desktop. section.ProductItem-details .ProductItem-details-checkout { display: flex; flex-flow: column; } .ProductItem-details .ProductItem-details-excerpt { order: 1 !important; } .ProductItem-details .product-variants { order: 2 !important; } .ProductItem .ProductItem-details .product-quantity-input { order: 3 !important; } .ProductItem-details .ProductItem-product-price { order: 4 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 5 !important; } .ProductItem .ProductItem-additional { order: 6 !important; } Example: https://rocksforlife.com/our-jewellery/double-pav-hoop-large-white-gold Thank you!

Did you find a solution? Having the same issue 🙂

Any chance how this code could be tweaked for mobile? That it could change direction to one column and all go down (like in the attached example)?

Did you find the answer? Also, looking for some help how to change to Monday! 🙂

This is how it looks on iphone 11, Safari (& wish it to be centered)

That's s much appreciated! Thanks a lot for the code. Any chance you would know how I can put all images in the middle ? Now all the content is for some reason pushed to the left...

I was wondering how I could put them into a grid for smaller screens? Tablets and devices. The reference is taken from this page: https://www.nataliewalkerphoto.com/about

It's called, SNIPPETS FROM MY LIFE Section: section[data-section-id="60ff30b2bbf0a573aa1873d5"] Block: #block-yui_3_17_2_1_1627379114686_22447

Sure - it's in about page. https://guitar-whale-z827.squarespace.com/about Pass: TrialWebsite

Hello, @bangank36. I would be referring to this text (see the attached picture):

Site URL: https://ievaviphoto.com/ Hello, there! Does anybody know how could this cool text scroll effect be achieved on Squarespace? I believe it's called locomotive text scroll? Website for reference: https://www.undesigned.studio/

That's amazing stuff! Thanks so much! Any chance do you know how to appropriate this for mobile screens? (that it would fo horizontal rather than vertical?)

Hey, @tuanphan! I used the code from https://codepen.io/skkhan/pen/MWWdXbb So the code below is: <!-- Source: https://codepen.io/skkhan/pen/MWWdXbb --> <!-- Tweak by @tuanphan --> <ul class="main-box"> <li class="box active"><span>Slide One</span> <div class="detail active"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Two</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Three</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Four</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> <li class="box"><span>Slide Five</span> <div class="detail"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p> </div> </li> </ul> <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap'); body .main-box { display: flex; background: #000; margin: 70px auto 70px auto; padding:0; width: 991px; } .box { height: 322px; padding:15px; border-right: 1px solid white; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; position: relative; overflow: hidden; list-style: none; } .detail { width: 85%; height: 100%; position: absolute; right: 0; top:0; background: white; color:black; opacity: 0; padding:30px; box-sizing:border-box; webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateY(100%); transform: translateY(100%); } .box.active { width: 70% !important; } .box.active .detail { opacity: 1; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; transform: none; } .box span { writing-mode: vertical-rl; font-size: 20px; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; text-transform: uppercase; letter-spacing: 4px; width: 40px; transform: rotate(180deg); font-weight: 400; cursor: pointer; position: absolute; left: 0; right: 0; margin: 0 auto; } .box.active span { left:25px; right:auto; margin:0; font-weight:600 } .box p { line-height: 23px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var getslide = $('.main-box li').length - 1; var slidecal = 30/getslide+'%'; $('.box').css({"width": slidecal}); $('.box').click(function(){ $('.box').removeClass('active'); $(this).addClass('active'); }); </script>

Site URL: https://ievaviphoto.com/ Hello, people! Would anyone give me a hand implementing this code onto my site? Would love to know the logic behind this! Thanks loads!! https://codepen.io/arjancodes/pen/gbweYB My site www.ievaviphoto.com