InstantMonsters Posted February 27, 2021 Share Posted February 27, 2021 Site URL: http://www.instantmonsters.com On my website I offer the option of pre-painting the prosthetics that customers order. When they add an item to the cart, a form pops up with color choices. Originally I had linked an image from an outside source since I couldn't figure out how to do it within Squarespace. It worked fine for a long while, but now I'm finding that image doesn't display. Here's the original text I inputted to the form: Quote If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen. If ordering an unpainted prosthetic, leave this field blank. <img src="http://www.chrispaynemakeup.com/colors-1.jpg"> It used to display the image just fine, but now it just shows a broken image icon (see attached screenshot). How can I fix this? Squarespace offered no help other than a link to this forum. If I have to I can add the same color sample jpg to each product's photo gallery, but I'd rather not have to go that route. Every time I add a new color I'd have to update every item I have in stock. Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 Hi. Can you share link to product in screenshot? 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
InstantMonsters Posted March 2, 2021 Author Share Posted March 2, 2021 Almost all of the products use the same form, but the one in the screenshot is here: https://www.instantmonsters.com/shop/p/beaky Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 On 3/2/2021 at 7:35 PM, InstantMonsters said: Almost all of the products use the same form, but the one in the screenshot is here: https://www.instantmonsters.com/shop/p/beaky Add to Design > Custom CSS /* Beaky lightbox img */ body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; } InstantMonsters 1 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
InstantMonsters Posted March 6, 2021 Author Share Posted March 6, 2021 Thank you for this! I'm afraid I'm a luddite with CSS, my web knowledge ends at HTML from the mid-2000s. When I entered the code I got this: Here is the exact text as it appears in the "manage form fields" for the form, cut and pasted: Quote If ordering a pre-painted prosthetic, please enter the skin tone you would like from the following options. All other highlights, shadows and detail work will be based on the skin tone chosen. If ordering an unpainted prosthetic, leave this field blank. /* Beaky lightbox img */ body#item-5f4db8566c67441473286aeb .lightbox-inner .description:after { content: ""; background-image: url(http://www.chrispaynemakeup.com/colors-1.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; } I assume I probably have one character out of place or I was meant to change something other than the image URL? Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 Add to Design > Custom CSS 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
InstantMonsters Posted March 7, 2021 Author Share Posted March 7, 2021 (edited) Gotcha, I figured I was doing something dumb. It works now with your image, but when I replace it with the location for the one I want (http://www.chrispaynemakeup.com/colors-1.jpg) it fails to load, just a blank space. Also is there a way to modify this so that it works across all of the products, or do I need to modify and re-enter the code for each one? Edited March 7, 2021 by InstantMonsters Link to comment
InstantMonsters Posted March 7, 2021 Author Share Posted March 7, 2021 (edited) Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required. Thank you so much for your help! Edited March 7, 2021 by InstantMonsters Beyondspace and tuanphan 2 Link to comment
Beyondspace Posted March 8, 2021 Share Posted March 8, 2021 5 hours ago, InstantMonsters said: Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required. Thank you so much for your help! You cna upload file here for easier manager Using the CSS Editor – Squarespace Help BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted March 8, 2021 Share Posted March 8, 2021 13 hours ago, InstantMonsters said: Actually I figured out a workaround. I added the image into the FAQ entry about pre-painting prosthetics, then used THAT image URL within the form. It displays a Squarespace image just fine, no custom CSS required. Thank you so much for your help! I see on mobile footer, between videos - gallery links has a spacing. Do you want to reduce it? 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
roseworksldn Posted March 16, 2022 Share Posted March 16, 2022 Hi there, I would love to do the exact same thing to a customisation form on my website. The website isn't live yet but we sell customised homeware and you can choose the colours the your item is made of. We would love for the colours that you can choose from to appear. We've added the swatch images to the FAQ page but can't seem to work out how to add the code so that image appears in the form. Anyone know how to do that? Many thanks Link to comment
roseworksldn Posted March 16, 2022 Share Posted March 16, 2022 We attempted this on our site but were struggling to make it show any image in the screen at all. I identified the tag in the InstantMonsters source code where 5f4db8566c67441473286aeb appeared, and replaced that segment with 6230785fc011e37e95725956 but it doesn't seem to load anything. Are you able to direct us to what we're doing wrong so we can replicate it for other use cases that are similar? Our current code going directly into the Home -> Custom CSS section is: /* Roseworks beaky test */ body#item-6230785fc011e37e95725956 .lightbox-inner .description:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; } The menu it should show up in is https://www.roseworksldn.com/shop/p/completely-customised-and-personalised-terrazzo-tray-1 after clicking a number of letters and "Add to Cart". If you can help it would be so appreciated! Thanks, Rose Works LDN Link to comment
tuanphan Posted March 18, 2022 Share Posted March 18, 2022 On 3/17/2022 at 1:49 AM, roseworksldn said: We attempted this on our site but were struggling to make it show any image in the screen at all. I identified the tag in the InstantMonsters source code where 5f4db8566c67441473286aeb appeared, and replaced that segment with 6230785fc011e37e95725956 but it doesn't seem to load anything. Are you able to direct us to what we're doing wrong so we can replicate it for other use cases that are similar? Our current code going directly into the Home -> Custom CSS section is: /* Roseworks beaky test */ body#item-6230785fc011e37e95725956 .lightbox-inner .description:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg); background-size: cover; background-repeat: no-repeat; width: 100%; height: 200px; display: block; } The menu it should show up in is https://www.roseworksldn.com/shop/p/completely-customised-and-personalised-terrazzo-tray-1 after clicking a number of letters and "Add to Cart". If you can help it would be so appreciated! Thanks, Rose Works LDN What is password? 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
roseworksldn Posted March 22, 2022 Share Posted March 22, 2022 On 3/18/2022 at 1:58 PM, tuanphan said: What is password? Sent to you via DM 🙂 Link to comment
tuanphan Posted March 24, 2022 Share Posted March 24, 2022 Use this new code body.collection-type-products .lightbox-content .field-list:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2021/02/07/09/11/sunset-5990540__340.jpg); background-size: contain; background-repeat: no-repeat; display: block; position: absolute; right: 20px; z-index: 9999; top: calc(50% + 100px); transform: translateY(-50%); width: 200px; height: 300px; visibility: visible; clear: none !important; } 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
SoniaBarron Posted August 19, 2022 Share Posted August 19, 2022 (edited) I think you have to use another application or website to add it. With Google Forms, you can just make it easier. It offers a great experience for creating different types of forms. You can have multiple choice answers, short or long answers, and even selection grids. You can add them to your form as part of your questions or allow users to upload an image as a response. You can even use an image as a header. This is the kind of work I encountered a couple of weeks ago. It worked out without problems; I even sent this image to https://www.frameshop.com.au/canvas-prints for its printing. Edited August 19, 2022 by SoniaBarron 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