-
Posts
78 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by 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).
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
Change nav bar on Mobile? Separate Nav bar for Mobile?
ievavi replied to JordanAWH's topic in Customize with code
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?
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
Change nav bar on Mobile? Separate Nav bar for Mobile?
ievavi replied to JordanAWH's topic in Customize with code
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?
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
Display price above Quantity and Add to Cart Buttons
ievavi replied to ievavi's topic in Customize with code
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!
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
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>
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
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
- 26 replies
-
- ecommerce
- add-to-cart
-
(and 1 more)
Tagged with:
-
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)?
- 5 replies
-
- custom-css
- dropdown
-
(and 1 more)
Tagged with:
-
Did you find the answer? Also, looking for some help how to change to Monday! 🙂
- 13 replies
-
- calendar
- custom-css
-
(and 1 more)
Tagged with:
-
-
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
-
Horizontal Text Scroll Effects (Locomotive Text Scroll)
ievavi replied to ievavi's topic in Customize with code
- 3 replies
-
- custom-css
- text
-
(and 1 more)
Tagged with:
-
Horizontal Text Scroll Effects (Locomotive Text Scroll)
ievavi posted a topic in Customize with code
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/- 3 replies
-
- custom-css
- text
-
(and 1 more)
Tagged with:
-
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
- 5 replies
-
- custom-css
- dropdown
-
(and 1 more)
Tagged with: