smdreyer Posted April 1, 2022 Share Posted April 1, 2022 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! Link to comment
tuanphan Posted April 2, 2022 Share Posted April 2, 2022 Hi, Can you share link to your site? We dont see product on demo url https://avenue-demo.squarespace.com/ 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
smdreyer Posted April 3, 2022 Author Share Posted April 3, 2022 (edited) 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! Edited April 3, 2022 by smdreyer Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 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? 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
smdreyer Posted April 5, 2022 Author Share Posted April 5, 2022 Hi Tuan, Yes, I'd like the text (product price and info) to be more to the right. Thanks! Steve Link to comment
smdreyer Posted April 5, 2022 Author Share Posted April 5, 2022 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 Link to comment
tuanphan Posted April 6, 2022 Share Posted April 6, 2022 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; } 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
smdreyer Posted April 8, 2022 Author Share Posted April 8, 2022 (edited) 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 Edited April 9, 2022 by smdreyer Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 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 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
smdreyer Posted April 15, 2022 Author Share Posted April 15, 2022 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. Link to comment
tuanphan Posted April 22, 2022 Share Posted April 22, 2022 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? 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
smdreyer Posted May 2, 2022 Author Share Posted May 2, 2022 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment