Jump to content

Product Variant redirect links

Go to solution Solved by paul2009,

Recommended Posts

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
  • Solution
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 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
  • 7 months later...
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 by takis-7124
Link to comment
  • 3 months later...
Posted (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.

Variants on Squarespace.png

Edited by austinalltheway21
Link to comment
  • 5 weeks later...
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 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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.