How can I change swatch title from 'colour' to 'metal' without altering images?

Solved

How can I change swatch title from 'colour' to 'metal' without altering images?

Ess91
Shopify Partner
36 0 5

Hi,

 

I wanted to change the title of the swatches. At the minute its "colour" but I wanted to change it to "metal" but when I change it to "metal" via the variants on the products page, the swatches of the images changes to written, which I don't want. I want the title to be "Metal" but with the image swatches.

 

Here's a screenshot of what i mean:

Screenshot 2023-03-20 170719.pngScreenshot 2023-03-20 170602.png

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3127

This is an accepted solution.

Hi @Ess91 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
p.swatches__option-name.h5 > strong {
    font-size: 0px;
}

p.swatches__option-name.h5 > strong:before {
    content: 'Metal:';
    font-size: 16px
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1786 3127

Hi @Ess91 ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

Ess91
Shopify Partner
36 0 5

PageFly-Victor
Shopify Partner
7865 1786 3127

This is an accepted solution.

Hi @Ess91 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
p.swatches__option-name.h5 > strong {
    font-size: 0px;
}

p.swatches__option-name.h5 > strong:before {
    content: 'Metal:';
    font-size: 16px
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

Ess91
Shopify Partner
36 0 5

That worked perfectly!

 

Thank you so much.

Ess91
Shopify Partner
36 0 5

Hi, sorry.

 

Just wanted to ask. Is there anyway of targeting just the first variant and not the others being affected. As the change in title for just the first variant has also affected the second variant. I just want the first variant to have the "metal" and the second variant to have "size".

Screenshot 2023-03-21 121604.png

comfyfusion
Visitor
2 0 0

This code not working ,please provide the correct code.

comfyfusion
Visitor
2 0 0

comfyfusion_0-1713613793010.png

 

 i want here only ,when click color swatch then change the title of the product.

this is booster theme.