How to add a text above a Custom Image Swatch on Brooklyn

Highlighted
New Member
6 0 0

Hello,

 

I'm using the brooklyn theme.  I've found a guide on how to add custom images swatches with this theme and I would like to know how to put the name of the choice above the swatch selected ?

 

For the swatch, this is the guide I've follow :

https://gist.github.com/carolineschnapp/ed47c42d48ae4100f7be

 

This is the code I've add at the bottom of the file theme.scss.liquid :

 

$options: ( 
  'color-Normal'      'swatch_normal.png', 
  'color-Bones'       'swatch_bones.png',
  'color-Nautica'     'swatch_nautica.png',
  'color-Cool'        'swatch_cool.png'
);

$url_prefix: '{{ '*' | asset_url | split: '*' | first }}';
$url_suffix: '{{ '*' | asset_url | split: '*' | last }}';

@each $option in $options {
  $optionName: nth($option, 1);
  $bgImage:    nth($option, 2);

  #ProductSelect-option-#{$optionName} + label {
    background-image: url( $url_prefix + $bgImage + $url_suffix );
    background-size: cover;
    color: transparent;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 25px;
    margin: 5px;
    text-indent: 100%;
    white-space: nowrap;
  }
  
  #ProductSelect-option-#{$optionName}:checked + label {
    border-color: #555;
    border-width: 3px;
  }
}

How can I add a the name of the color over the selection of the swatch ?How can I add a the name of the color over the selection of the swatch ?

 

 

Kind regards,

0 Likes
Highlighted
Shopify Partner
1001 43 119

Dear HarmanKardon,

 

Are you looking for something like this https://mssignature.myshopify.com/products/stylish-backless-fashion-dress-m4?variant=30225167745084

Thanks & Regards
MS Web Designer
Get Free Store Audit Report
20000+ Task Completed
1000+ Satisfied Client
9.9*/10 Customer Rating
10*/10 Shopify Services Marketplace
0 Likes
New Member
6 0 0

Yes exactly something like that

0 Likes
Highlighted
Shopify Partner
1001 43 119

You need to do some coding and for that please hire shopify developer or reach us at: https://www.task4store.com/pages/contact-us

Thanks & Regards
MS Web Designer
Get Free Store Audit Report
20000+ Task Completed
1000+ Satisfied Client
9.9*/10 Customer Rating
10*/10 Shopify Services Marketplace
0 Likes
Highlighted
New Member
6 0 0

How do you call this featured ?


@MS-WEB-DESIGNER wrote:

You need to do some coding and for that please hire shopify developer or reach us at: https://www.task4store.com/pages/contact-us


 

0 Likes
Highlighted
Shopify Partner
152 14 18

Hi @HarmanKardon,

Please shoot me an email, I'll help you with that.
denis@thewebave.com

Thank you!

Shopify Expert Support
denisaksutik@gmail.com
https://thewebave.com/
0 Likes