Valisco

Hello! I'm sure that something this complex would require some pretty hefty code. I'm not sure if anyone has recommendations on where to look/who to reach out to for a quote/advice on how to attempt to even do something like this. My business has custom dog collars/leashes/etc that are made to order based on the customer's color selection/hardware color/etc. Would it be possible to have an interactive page where they could "design their own" with a visual? For example, it would have an image like this and as they click different colors, the image would update to show that color? Some products do have multiple colors (half of the collar one color, the other half another), so it would be super neat to be able to "show" someone what it would look like before purchasing. Simulating the color on an actual photo of a white collar or something would be great, but even just a drawn outline PNG of the collar that could fill in with color would be neat. It would be ideal to have it on the product page itself, but I could even be up for a separate page to include something like this. Here is a sample product if it helps: https://www.valiscosupply.com/products/p/unity-collar-one-tone Again, this may be waaayy out of the scope of anyone to help with/give code for here, but would something like this be possible on a Squarespace website? Any recommendations on where to even start looking for this kind of thing? Thank you!

Sample Product URL: https://www.valiscosupply.com/products/p/aura-collar-one-tone Is it possible to have "responsive" variant selections? Not all combinations of each option are available for purchase. Right now, it's not clear if a combination is available until all options are selected. Only then will it populate "sold out". Ideally, it would be nice for it to grey out any options that aren't available based on previous selection. Example: If someone selects size small, only 5/8" and 3/4" are available, so 1" would be greyed out. If large is selected, only 3/4" and 1" are available, so 5/8" would be greyed out. I know this seems a bit complex, it would be awesome though if it can be done! Or not sure if a plugin exists somewhere for this? Thanks in advance!

This worked perfectly!! Thank you!

Did something just recently update with Squarespace for the form? I used this code and changed some of it around yesterday (see below for what I used) and it worked perfectly! I looked at my website today and everything reverted back. Do you know of any reason why this would be? The only thing that DOES seem to be working still is the padding/margins I did on the form button. https://www.valiscosupply.com/contact /* Contact form */ .form-wrapper .field-list .field .field-element { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 15px !important; border-radius: 10px !important; font-size: 14px !important; } /* form input size */ .form-wrapper .field-list .field .caption .field-element { font-size: 14px !important; } /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; } ***** EDIT ****** I figured out the issue from another post. It looks like Squarespace is updating the form to other "naming conventions" (not sure what they're officially called, newbie here) but I was able to fix it with these changes if it helps anyone else. /* Contact form */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { background: #F5F4F0 !important; border-top: none !important; border-left: none !important; border-right: none !important; color: #000000 !important; margin-top: 5px !important; border-radius: 10px !important; font-size: 14px !important; }} /* form input size */ .form-wrapper .react-form-contents .field-list .form-item { input, text area, select, textarea { font-size: 14px !important; }} /* form button */ input.button.sqs-system-button.sqs-editable-button { padding-left: 3em !important; padding-right: 3em !important; padding-top: 1em !important; padding-bottom: 1em !important; margin-top: 10px; }

Maybe. I went a little different direction with the menu (having the folders open down instead of sliding across the screen), which made this work better. Not sure if it's the best solution though? Let me know if there's a better way! I used the following: .header-menu.header-menu--folder-list { width: 13.5em; margin-left: auto; } A follow up question that might impact the above - the only way to close the menu now is by clicking the "x". Is there a way to allow it to close if the user clicks in the blank space to the left (area in pink)? Not essential, but would like to include this function if possible! Thank you!

Hello! My mobile menu/navigation has drop down arrows for folders that expand down. For items without subfolders, I would like to indent that page title in the nav menu to be right aligned with the other page titles, instead of being right aligned to the arrow. This mostly just applies to the "Home" link/page. The "Login" can stay where it is. I've tried a handful of things to change the right padding, but haven't been able to figure it out. Any help is much appreciated! Thank you! https://www.valiscosupply.com

Jumping in here! https://www.valiscosupply.com How can this code be changed to have the menu be on the right side instead of the left? (In the picture added, positioned where the blue box is.) Thank you!

That worked beautifully! Thank you!! Last question, I decided I liked this layout on desktop as well. When I use the same code, the quantity input box doesn't move to center like the rest. Is there a solution for this? Thank you!

Yes, here it is! https://www.valiscosupply.com/products/p/double-braided-collar-two-color

You're amazing!! Thank you SO much!!

Hello! I'm trying to center my variant section options/add to card button (circled in red on the photo). I've tried the following code (below) from another post, but it wants to move the price/afterpay line as well. I do not want those to move. .ProductItem-details-checkout { display: flex !important; justify-content: center; align-items: center; } I've tried playing with it, but don't know how to isolate only the variants and add to cart button. Any help would be appreciated! Thank you!

Hello! I would like to make the following changes to the product review section if possible: Change case of "Reviews" to all uppercase and/or change "Reviews" to say something else Remove the underline from the hyperlink to the product each review is referencing Change the color of the stars/"average store rating" under the title "Reviews" Change the color of the stars in each review https://www.valiscosupply.com/products/p/double-braided-collar-two-color Above is the link to a product with only store reviews. https://www.valiscosupply.com/products/p/convertible-training-tab Above is a link to a product with a product specific review. Thank you!

Is there a way to use code to allow for "hold and drag" scrolling on mobile for summary block items? As of right now, it seems like the only way to toggle through is using the arrows. I know a lot of people instinctually want to swipe to look through them. On my website, this would specifically be the summary blocks on the homepage for "Best Sellers" and "Ready to Ship." Thank you!