Shopping Cart Layout

Squarespace 7.0 (Avenue) question). The page that allows a user to add a product to the shopping-cart shows the image of the product on the left and the product info (Name, price, add-to-cart button, etc.) on the right. The space between the image and the product info is very small.

Is there a way to adjust the space between the 2 areas? I'd also like to know how I can change the fonts/text sizes.

Thanks!

Hi,

Can you share link to your site? We dont see product on demo url

https://avenue-demo.squarespace.com/

Sorry, here's a link: https://stevedreyer.com/bow-bridge-print/the-bow-bridge

I also have these questions about the same page:

1- Can I change the font size/style of the title? (in this case THE BOW BRIDGE).

2- I saw the post on adding text under the Add to Cart button. I'd like to have portions of the text linked to another page on the site.

Thanks!

On 4/4/2022 at 3:35 AM, smdreyer said:

Sorry, here's a link: https://stevedreyer.com/bow-bridge-print/the-bow-bridge

I also have these questions about the same page:

1- Can I change the font size/style of the title? (in this case THE BOW BRIDGE).

2- I saw the post on adding text under the Add to Cart button. I'd like to have portions of the text linked to another page on the site.

Thanks!

 

Thank you

#1. You mean adjust red spacing?

#2. Add to Design > Custom CSS

/* product title */
h1.product-title {
    font-size: 50px;
    color: red;
    font-family: monospace;
}

#3. All products will use same text link or different?

Hi Tuan,

Yes, I'd like the text (product price and info) to be more to the right.

Thanks!

Steve

Tuan, not sure what you mean by #3. I will have separate pages with thumbnails for products, but I want the product purchase pages to all have the same format.

If you click on this link and then on the first thumbnail (The Bow Bridge), you'll see the product page - with your code to change the font (my color, type, size) - thanks for that. https://stevedreyer.com/new-york-city-prints

Steve

15 hours ago, smdreyer said:

Hi Tuan,

Yes, I'd like the text (product price and info) to be more to the right.

Thanks!

Steve

#1. Add to Design > Custom CSS

/* product image text */
div#productDetails {
    width: 45%;
}

#3. Use this CSS
 

div.product-excerpt a[href="/contact"] {
    background-color: black;
    color: white;
    padding: 10px 20px;
}

Tuan,

Now looks great, thank you!

Wondering if the link to the /contact (which opens a form page linked to Mailchimp) can somehow populate the Subject Field with the title of the image on the add-to-cart page.

For your reference, here's the thumbnail page. Click the "Bow Bridge" thumbnail to open the add-to-cart page. https://www.stevedreyer.com/nycprints

Thanks,
Steve

On 4/9/2022 at 2:20 AM, smdreyer said:

Tuan,

Now looks great, thank you!

Wondering if the link to the /contact (which opens a form page linked to Mailchimp) can somehow populate the Subject Field with the title of the image on the add-to-cart page.

For your reference, here's the thumbnail page. Click the "Bow Bridge" thumbnail to open the add-to-cart page. https://www.stevedreyer.com/nycprints

Thanks,
Steve

Hi,

I don't know this

Okay, I understand. No problem.  I have one other issue at the moment.

I want to have a page for each image and the title under it. That's not a problem as I can place the image on the page and have a text cell under it to show the title.

I can also have an index page so when a thumbnail image is clicked or tapped on the mobile device it goes directly to the page with the large image that has the text under it.

But I want to have an arrow on the left and right part of the screen (or in the text line) that when clicked or tapped it scrolls to the previous or next image pointed to in the index page (instead of going back to the index page to make the selection).

I can of course create text boxes with the arrows and hard code the location of each page that has the next or previous image. The problem is that on the mobile device it renders differently because each text box (with the arrows) is a different cell so they don't appear on the same level as the image.

I hope this makes some sense.

On 4/16/2022 at 5:22 AM, smdreyer said:

Okay, I understand. No problem.  I have one other issue at the moment.

I want to have a page for each image and the title under it. That's not a problem as I can place the image on the page and have a text cell under it to show the title.

I can also have an index page so when a thumbnail image is clicked or tapped on the mobile device it goes directly to the page with the large image that has the text under it.

But I want to have an arrow on the left and right part of the screen (or in the text line) that when clicked or tapped it scrolls to the previous or next image pointed to in the index page (instead of going back to the index page to make the selection).

I can of course create text boxes with the arrows and hard code the location of each page that has the next or previous image. The problem is that on the mobile device it renders differently because each text box (with the arrows) is a different cell so they don't appear on the same level as the image.

I hope this makes some sense.

Hi,

Have you found a solution yet?

Thanks. No, no solution yet. In the end, all a want is to have an image slideshow with a title under it (not overlayed).  I created something for this, but it's not a good way to do it.

What I did was create a page with a slideshow that has a prev/next link below the image that will allow scrolling from image to image.

But in order to get the title under it, I have to:

1- Place an image into a transparent background in Photoshop so that there's some "transparent" space below the image.

2- In the transparent space I place the title.

3- I save the file (that includes the image and the title text in the transparent space) as a PNG file (to preserve the transparency).

The problem of course is that I have to manually do this for each image and need to have templates for different size/orientation images. Also, since the title is part of the image, it gets blurry when I pinch-zoom on a phone.

Here's the page to see how it looks. I'd like this to be easier:

https://stevedreyer.com/framed-images

THANKS!