NOWAD Posted July 24, 2023 Share Posted July 24, 2023 Can I add URL links for product variants to redirect to the specific variant (color) product page? For example, if a tshirt is available in 3 colors - Black, White and Blue and I have product pages with corresponding photographs for each colorway, is it possible for customer to select the variant/swatch on product page and redirect to the product page link that connects with that colorway? Without this, inventory is getting doubled up. Link to comment
NOWAD Posted July 24, 2023 Author Share Posted July 24, 2023 For example, in the image below, by clicking on khaki, it should direct me to the khaki url so that inventory is always accurate. Link to comment
Solution paul2009 Posted July 25, 2023 Solution Share Posted July 25, 2023 (edited) On 7/24/2023 at 5:03 PM, NOWAD said: if a tshirt is available in 3 colors - Black, White and Blue and I have product pages with corresponding photographs for each colorway, is it possible for customer to select the variant/swatch on product page and redirect to the product page link that connects with that colorway? If the colourways are variants of the same product - colours of the same T-shirt - the variants will share the same product URL. It is not currently possible to link to a specific variant using any of the built-in features. In theory, it could be custom coded, but I am not aware of any existing code solutions for this. The code would need to check if the page has a URL slug that quotes the variant code. If it existed, it would then need to check if this code exists on the page and then select it from the variant dropdown. Edited January 18 by paul2009 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
takis-7124 Posted March 14 Share Posted March 14 (edited) On 7/24/2023 at 7:03 PM, NOWAD said: Can I add URL links for product variants to redirect to the specific variant (color) product page? For example, if a tshirt is available in 3 colors - Black, White and Blue and I have product pages with corresponding photographs for each colorway, is it possible for customer to select the variant/swatch on product page and redirect to the product page link that connects with that colorway? Without this, inventory is getting doubled up. Looking for the same solution, for different reasons. Did you come up with a solution how to link a variant photo to url? In theory, indeed it should be possible but my skills are nowhere near there. My only need is to add a link to the variant picture Edited March 14 by takis-7124 Link to comment
austinalltheway21 Posted July 9 Share Posted July 9 (edited) FOR THE PRODUCT PAGE /* Variant Button */ label.sqs-button-element--secondary{ width:4rem; aspect-ratio: 1/1; background-position: 50% 50%; background-size: contain!important; background-repeat: no-repeat!important; padding:unset !important; transition: scale 300ms !important; color:transparent !important; background-color: transparent; visibility:hidden !mportant; text-indent: -9999px; &:hover { scale:1.1; background-color: transparent !important; } &::before { display:none; } } /* T-Shirt Color Red*/ .sqs-button-element--secondary[for="variant-option-Color-Red"] { background-image: url() !important; } /* T-Shirt Color White*/ .sqs-button-element--secondary[for="variant-option-Color-White"] { background-image: url() !important; } /* T-Shirt Color Black*/ .sqs-button-element--secondary[for="variant-option-Color-Black"] { background-image: url() !important; } /* T-Shirt Size Small*/ .sqs-button-element--secondary[for="variant-option-Size-Small"] { background-image: url() !important; } /* T-Shirt Size Medium*/ .sqs-button-element--secondary[for="variant-option-Size-Medium"] { background-image: url() !important; } /* T-Shirt Size Large*/ .sqs-button-element--secondary[for="variant-option-Size-Large"] { background-image: url() !important; } /* T-Shirt Size XLarge*/ .sqs-button-element--secondary[for="variant-option-Size-X Large"] { background-image: url() !important; } I have multiple variants and I replaced the variant buttons with PNG images that I uploaded into the CSS file uploader. You have to rename your variant types to be specific. You can have spaces in the variants like X Large. Edited July 9 by austinalltheway21 Link to comment
austinalltheway21 Posted August 8 Share Posted August 8 Sorry I guess I was on the wrong thread. @paul2009 Is there a way to build a link for something like any of these /shop/?variant-option-Color=Black /shop/?variant-option-Size=XXL Link to comment
paul2009 Posted August 8 Share Posted August 8 (edited) 8 hours ago, austinalltheway21 said: Is there a way to build a link for something like any of these /shop/?variant-option-Color=Black /shop/?variant-option-Size=XXL As I mentioned above, there isn't a built-in feature that allows you to pre-select specific variant options in this way, although it should be possible to build a custom solution with JavaScript. I'm not aware of any existing plugins or code as this is a fairly niche requirement. Edited August 8 by paul2009 austinalltheway21 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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