Jump to content

Moving Button in My Store

Recommended Posts

4 hours ago, JohnBoy said:

Hi,

Is it possible to move my 'Ask for Price' Button to where the green 'check' mark is in this example, please?

ss123.png

Kindly share your site with the protected password so we can take a look

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment
20 hours ago, JohnBoy said:

Hi, 

Site: haddock-bear-m9z6.squarespace.com

Pass: bubbletea

Thanks.

 

Try adding to Home > Design > Custom Css

.product-details .product-quantity-input, .product-details .sqs-add-to-cart-button-wrapper {
  min-height: 6em;
  width: 50%;
  float: left;
  display: block !important;
  position: relative;
}
.product-details .sqs-add-to-cart-button  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment
14 hours ago, JohnBoy said:

Thanks for your help. We're almost there!

It did work for 'Purchase' Buttons, but not for 'Add to Cart'. See screenshots....

Any suggestions?

 

 

 

vts 2.png

vts 3.png

Hi there

Where can i find it? Can you show me the direct link?

Greeting, it's 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, Delivery Date Picker, Keyword Highlighter
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 comment
On 12/16/2021 at 8:03 PM, JohnBoy said:

Hi, sorry.....

Here is a typical link that's working OK.... https://haddock-bear-m9z6.squarespace.com/config/

Here is (a typical) link which isn't... https://haddock-bear-m9z6.squarespace.com/config/

Thanks.

 

Hi,

/config is admin url, we can't access it.

See how to find exact page url.

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
10 hours ago, tuanphan said:

Hi,

/config is admin url, we can't access it.

See how to find exact page url.

Hi, OK, sorry about that....

This is a typical URL that IS working for the button change change: https://haddock-bear-m9z6.squarespace.com/products/p/vts-obdii-to-2x-db9

And this is a typical URL that isn't working:  https://haddock-bear-m9z6.squarespace.com/products/p/klari-logger

Basically, where there are 'Add to Cart' buttons..or 'Purchase' it's working.

Where we have 'Ask for Price' it's NOT working (which is most of our products).

Thanks.

 

 

Link to comment

The first step is going be moving the button please the following.

By default this code will move the first n blocks of all product detail pages. If you are only ever going to put a button block in the additional info for the products that you want an Ask for price button then you are done. If not then we need to add a little more code to control for which products additional info blocks are moved.

Since you have a no-cart ( or no cart ) tag and are using that to hide the product button with CSS we can leverage off of that to create a guard processor function that the above code can use to decide when to move additional info blocks.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page before the code above. Order is important. Please see per-page code injection.

<script>

  /*
  
    has tag not
    
    Version         : 0.1d0
    
    SS Versions     : 7.0, 7.1
    
    v7.0 Templates  : Brine ( Aria, Blend, Burke, Cacao, Clay, Fairfield, Feed,
                      Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact,
                      Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta,
                      Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva,
                      Pedro, Pursuit, Rally, Rover, Royce, Sofia, Sonora,
                      Stella, Thorne, Vow, Wav, West )
                      
                      your template is not listed? then it is not currently
                      supported
    
    Dependancies    : jQuery
                      
                      move product detail additional info first n blocks to end
                      of product details v0.3d0
    
    By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    const hasTagNot = ( ) => {
    
      // a tag as appears in the SS product editing interface
      
      let tag = '[enter tag here between single quotes]';
      
      // do not change anything below, there be the borg here
      
      tag = tag.replaceAll ( ' ', '-' );
      
      tag = `tag-${ tag }`;
      
      const b = ! $( '.ProductItem' ).hasClass ( tag );
      
      return b;
      
      };
      
  </script>

Now we need to customize each piece of code.

First in the hasTag function you need to add your tag where indicated in the code.

In the Move Product Detail Additional Info First N Blocks to End of Product Details code you need to change the following line...

        guardProcessor : undefined
        

...to...

        guardProcessor : hasTagNot
        

After this it's a matter of coming up with some CSS to manipulate the elements to look how you want.

I don't have CSS for that.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.