Avenue Template Shopping Cart

Avenue - I'd like to create my shopping pages as follows:

1- I will have a page with thumbnails of my products (I can do that).

2- When someone goes to the page, they can select an image and it will bring them to the purchase page for that product (I can do that).

3- On the purchase page I want the "back to" function to remain on the left above the product image so they can go back to the thumbnails (that works fine as is).

Things I need:

4- On the right side of the product page (above the description) I want a "prev / next" that will allow them to see the previous or next product page (as if they went "back to" the thumbnails and selected one.

5- On the product info page some products can show the cost and the ability to add to cart (as usual). BUT

6- On other product pages, I want NO price and a button for more info (which will be sent to my email).

THANKS MUCH!

#6. You can add a text link with email info, then share link to a product, we can give the code to turn link to button + hide current add to cart on that product.

Thank you for looking into this!

The link to the current page:

https://www.stevedreyer.com/central-park-prints/curved-path

That page is a result of clicking on a product on the following page (which may or may not have a price under thumbnails):

https://www.stevedreyer.com/central-park-prints

See the attached image for red areas. I'd like to (1) add the prev / next links for the previous and next product cart page, (2) the option (or just delete) the price, (3) replacing the "add to cart" button with an "inquire" button - which can link to an email address.

Note: I don't what the red color - just regular text.

On 11/13/2021 at 10:01 PM, tuanphan said:

#1. To remove price on one product, edit product >> Add a Code Block in Additional Info >> paste this code

<style>
  .product-price {
    display: none;
}
</style>

#2. To change contact text link to button, add this to DESIGN > CUSTOM CSS

/* contact link to button */
div.product-excerpt a[href="/contact"] {
    border: 2px solid black;
    text-decoration: none !important;
    padding: 20px;
    display: inline-block;
    margin-top: 20px;
}

and to hide add to cart on one product, add a Code Block in Additional Info >> paste this code

<style>
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

 

Thanks much. I'll try this out! Appreciate the help.

Tuan - works great! I also used your idea to remove the quantity after looking in the source code 🙂

Here's the revision:

https://stevedreyer.com/central-park-prints/the-bow-bridge

One last thing (I think). Is there a way to add the "prev/next" links to the upper right of the cart page so that they allow for switching to the cart page for the previous and next thumbnails for products in this page? See my diagram with the red prev/next links (red so you know what I mean).

If that's possible, I won't need to code links on every cart page to get to the cart pages for the previous and next images.

Here's another site (not Squarespace) that has this functionality. The software they use has arrows at the far left and right to go to the previous and next cart pages. I don't need that (although it would be nice), but the "prev/next" links described above could have the same functionality without going back to the product thumbnails.

https://www.irastehmann.com/artists/25/series/bittersweet/1948-christopher-thomas-bittersweet-102-2020/

Thanks very much - looking good!

Steve

#1. You mean add here?

8 hours ago, tuanphan said:

#1. You mean add here?

Yes, I think that would look good. So when someone goes to the product page (the one with the thumbnails mentioned above) and they click on a thumbnail, that brings them to the description page for the product (which is actually the add to cart page modified above without the add to cart button and the Inquire button).

When they get there they have the options to go back to the thumbnails on the product page (standard that's in the upper left). On the upper right (where you circled) they would have the prev / next buttons to sequentially scroll directly to different "cart" pages without going back to the thumbnails.

If possible, it would be great if the "prev / next" links are on the same line as the "back to ..." link at the left.

Lastly, I'm not sure if it's possible to do the left-right arrows at the sides of the cart page that would have the same functionality as prev / next - as in the example site above shows (https://www.irastehmann.com/artists/25/series/bittersweet/1948-christopher-thomas-bittersweet-102-2020/. To be honest, I'm not sure which is best, but if I have the prev / next code it might be more customizable.

Thanks Tuan. I appreciate the interest in this.  It is already looking really great, as it provides something like a "slideshow" of product pages.

Steve

15 hours ago, smdreyer said:

Yes, I think that would look good. So when someone goes to the product page (the one with the thumbnails mentioned above) and they click on a thumbnail, that brings them to the description page for the product (which is actually the add to cart page modified above without the add to cart button and the Inquire button).

When they get there they have the options to go back to the thumbnails on the product page (standard that's in the upper left). On the upper right (where you circled) they would have the prev / next buttons to sequentially scroll directly to different "cart" pages without going back to the thumbnails.

If possible, it would be great if the "prev / next" links are on the same line as the "back to ..." link at the left.

Lastly, I'm not sure if it's possible to do the left-right arrows at the sides of the cart page that would have the same functionality as prev / next - as in the example site above shows (https://www.irastehmann.com/artists/25/series/bittersweet/1948-christopher-thomas-bittersweet-102-2020/. To be honest, I'm not sure which is best, but if I have the prev / next code it might be more customizable.

Thanks Tuan. I appreciate the interest in this.  It is already looking really great, as it provides something like a "slideshow" of product pages.

Steve

#1. You will need to add links manually in Each Product Description, then I will give code to move links to that position

#2. You can add 2 arrow links in Additional Info, then I will give code to float it left/right like the demo.

On 11/13/2021 at 10:01 PM, tuanphan said:

#1. To remove price on one product, edit product >> Add a Code Block in Additional Info >> paste this code

<style>
  .product-price {
    display: none;
}
</style>

#2. To change contact text link to button, add this to DESIGN > CUSTOM CSS

/* contact link to button */
div.product-excerpt a[href="/contact"] {
    border: 2px solid black;
    text-decoration: none !important;
    padding: 20px;
    display: inline-block;
    margin-top: 20px;
}

and to hide add to cart on one product, add a Code Block in Additional Info >> paste this code

<style>
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

 

Thanks much. I'll try this out! Appreciate the help.

Hi Tuan,

This page has the "prev / next" links in the description area (under the title). I'd want that on the same line and to the far right as the "back to" link. https://stevedreyer.com/central-park-prints/pond-and-southwest-view

I also added the left and right arrow in the additional info section. I'm not sure how you would put the < centered to the left of the photo and the > to the right side of the screen as in the demo. If that is too much trouble I would just go with the prev / next option. No problem.

In both cases I coded the links to the cart pages for the previous and next product. I understand I'd have to do that manually, which is fine, but more work since I have a lot of products and it would be prone to error on my part (unless I use less obvious page urls, like "img1, img2.." etc. That's why I was hoping it would be possible to automatically go to the cart pages that match the links in the thumbnail page. But it's better than nothing - so thanks for letting me know!

Appreciate the help!

Steve

On 11/23/2021 at 11:43 PM, smdreyer said:

Hi Tuan,

This page has the "prev / next" links in the description area (under the title). I'd want that on the same line and to the far right as the "back to" link. https://stevedreyer.com/central-park-prints/pond-and-southwest-view

I also added the left and right arrow in the additional info section. I'm not sure how you would put the < centered to the left of the photo and the > to the right side of the screen as in the demo. If that is too much trouble I would just go with the prev / next option. No problem.

In both cases I coded the links to the cart pages for the previous and next product. I understand I'd have to do that manually, which is fine, but more work since I have a lot of products and it would be prone to error on my part (unless I use less obvious page urls, like "img1, img2.." etc. That's why I was hoping it would be possible to automatically go to the cart pages that match the links in the thumbnail page. But it's better than nothing - so thanks for letting me know!

Appreciate the help!

Steve

Add this to Last Line in Code Injection > Footer

<script>
$(document).ready(function() { 
		$('.product-excerpt>p:first-child').appendTo('div#productNav');
	});
</script>
<style>
  div#productNav {
    display: flex !important;
    justify-content: space-between;
}
</style>

I think there is still an automatic way, but maybe you need to hire someone with deep understanding of JavaScript code & Squarespace to do this.

Tuan - thanks so much for your help.

You can see the result of your expertise, here. I hope others will recognize how helpful you are!

https://stevedreyer.com/central-park-prints/the-bow-bridge

Steve