Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add to cart + Quantity position / Markdowns in Product Details


Jarren88

Question

Hello!

First time posting here.. I'm an absolute beginner when it comes to website designing in general and it seems i've been somewhat "forced" into utilizing some CSS to get any chance or coming closer to my ideal store design..

I managed to play around with margins, padding whatnot and have a rough idea of what to do to control the display for mobile and desktop versions.. 

I want my Quantity and Add to cart buttons to be directly under the price and in one line. 

image.png.211dbc9bcf8c6ac459e8c2b2c21ff2c1.png

Like this.

I have added a markdown block as well as a lightbox text link and embedded them into my main product description window ( instead of having it below the gallery and details ) using this in my footer: 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>
<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-code").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

I noticed that if i only play with margins to position my quantity and add to cart where i want them, they move up and down as I expand and collapse my markdowns...I believe its because both quantity and the button are still embedded in the same place ( below the markdowns ) but are forced to appear higher than they actually sit.. How do I go about this? I want to keep the them where they are on the attached photo but at the same time keep my markdowns and lightbox links right below product details.. 

Any help is greatly appreciated. 

once again i've literally discovered css yesterday...

Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

Hello! First time posting here.. I'm an absolute beginner when it comes to website designing in general and it seems i've been somewhat "forced" into utilizing some CSS to get any chance or comin

https://angeliqueskincare.com/shop It's open, only the home page requires a password. Something died since I posted that and the buttons are all in a weird position now but they still move o

I removed everything that affected the quantity box, add to card button and positioning of details outside of title and price. all that remains now is  .markdown-block p { margin-left:1.5e

Posted Images

10 answers to this question

Recommended Posts

  • 0
26 minutes ago, Jarren88 said:

Hello!

First time posting here.. I'm an absolute beginner when it comes to website designing in general and it seems i've been somewhat "forced" into utilizing some CSS to get any chance or coming closer to my ideal store design..

I managed to play around with margins, padding whatnot and have a rough idea of what to do to control the display for mobile and desktop versions.. 

I want my Quantity and Add to cart buttons to be directly under the price and in one line. 

image.png.211dbc9bcf8c6ac459e8c2b2c21ff2c1.png

Like this.

I have added a markdown block as well as a lightbox text link and embedded them into my main product description window ( instead of having it below the gallery and details ) using this in my footer: 

<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-markdown").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>
<script>
$(document).ready(function (){

var myBlock = $(".sqs-block-code").detach();

myBlock.appendTo(".ProductItem-details-excerpt");

})
</script>

I noticed that if i only play with margins to position my quantity and add to cart where i want them, they move up and down as I expand and collapse my markdowns...I believe its because both quantity and the button are still embedded in the same place ( below the markdowns ) but are forced to appear higher than they actually sit.. How do I go about this? I want to keep the them where they are on the attached photo but at the same time keep my markdowns and lightbox links right below product details.. 

Any help is greatly appreciated. 

once again i've literally discovered css yesterday...

Could you share your current site url (with site wide password) so we can help having a look?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
5 minutes ago, Jarren88 said:

https://angeliqueskincare.com/shop

It's open, only the home page requires a password.

Something died since I posted that and the buttons are all in a weird position now but they still move once tabs are opened.

could you remove the custom css you placed for the quantity and add to cart button so I can see them in their origin position? then I can provide a solid answer

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

I removed everything that affected the quantity box, add to card button and positioning of details outside of title and price.

all that remains now is 

.markdown-block p {
margin-left:1.5em;
  text-align: left;
}
.markdown-block .ui-closed:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"- ";
}
.ProductItem .ProductItem-details {
    padding-top: 0em;
    margin-top: 0.5em;
  text-align: left;
}
 

Link to post
  • 0
19 minutes ago, Jarren88 said:

I removed everything that affected the quantity box, add to card button and positioning of details outside of title and price.

all that remains now is 

.markdown-block p {
margin-left:1.5em;
  text-align: left;
}
.markdown-block .ui-closed:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"+ ";
}

.markdown-block .ui-open:before {
  font-family:cinzel;
  padding-left: 1em;
  content:"- ";
}
.ProductItem .ProductItem-details {
    padding-top: 0em;
    margin-top: 0.5em;
  text-align: left;
}
 

I modified your js snippet and the custom css

<script>
	jQuery(document).ready(function($) {
    	$(".ProductItem-details .sqs-add-to-cart-button-wrapper, .collection-type-products .ProductItem-details .product-quantity-input").wrapAll("<div class='product-quantity-wrap'></div>" );
		$(".product-quantity-wrap").insertAfter('.ProductItem-product-price');
    });
</script>
.quantity-label {
  display: none;
}
.collection-type-products .ProductItem-details .product-quantity-input {
  display: inline-block !important;
  float: left;
  width: auto;
}
.collection-type-products .ProductItem-details .product-quantity-input input {
      padding: 1rem;
    margin-right: 10px;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: inline-block;
    margin: 0;
  width: auto;
}
.ProductItem-details .ProductItem-product-price {
  margin-bottom: 0;
}
.product-quantity-wrap {
  margin-bottom: 25px;
}
@media only screen and (max-width: 768px) {
    .product-quantity-wrap {
      order: 2;
      margin-bottom: 0px;
    }
}

image.thumb.png.adcfbb7a372dd58d38dbe1b6224c654f.png

image.png.e2772c66605a0ede91145313c2774cf7.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
9 minutes ago, Jarren88 said:

It worked!!!

Thank you so much!

 

You rock!

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
9 minutes ago, Jarren88 said:

It worked!!!

Thank you so much!

 

I have a plugin that can display different markdown for different products in case you looking for it

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, 360 Degree Photo block, Seperator Block (SVG Shape divider for sections)
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

No, you! 

If i can bother you a little longer.. how would I go about changing the gallery on the left to appear as circles rather than squares? I've looked up some codes but it seems they would affect more than just that part.

Link to post
  • 0
2 minutes ago, bangank36 said:

I have a plugin that can display different markdown for different products in case you looking for it

I'm currently looking to have my markdowns fairly consistent for all products. Just text editing under each of them. Though I'll definitely keep that in mind should I decide to expand beyond those 🙂

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...