[Shopify-Brooklyn] How to DIFFERENTIATE two buttons on same page & avoid conflicting/duplicated code

Solved
Spr123
Excursionist
28 1 6

Hi Everyone,

 

I am using the Brooklyn theme.

I added a button on my homepage with the CUSTOM HTML field in the Theme Editor.

However, every time I add a new CUSTOM HTML field in the Theme Editor (in this case a banner image), a duplicate button also appears.

I notice that if I do a quick display:none to the unwanted button, my previous button is also deleted, since they both have the same "code name" (.rte .text-link ).

 

My question is, how can I differentiate the two buttons in a way that modifying one, won't make the same modification happen on the other button?

If this is not possible, then my question is, is there a way to have an image/content COVER that button (so the unwanted button is not deleted, but just covered by an image, and thus un-clickable).

 

Many thanks!!

 

Preview URL: https://ri8ps0aqn9hfa8xs-55506731197.shopifypreview.com

Screenshots below:

double button image 1.png

 

-----

 

double button image 2.png

Accepted Solution (1)

Accepted Solutions
Spr123
Excursionist
28 1 6

This is an accepted solution.

@Anonymous thanks again for the helpful and speedy edit of my code via private message.

The solution is very nice, thanks a lot!

 

If you can share the file modified (theme.scss.liquid only, or others?) and lines of code to tweak I think this thread can also be helpful to others with the same question in the future.

 

Thanks again!!

View solution in original post

Replies 5 (5)
Anonymous
Not applicable

@Spr123 
Can You Provide me a proper screenshot so,
I can understand your problem.
Thank You.

Spr123
Excursionist
28 1 6

Hi @Anonymous thanks for the quick reply.

What part isn't clear in the screenshots provided? There should be everything there, but please let me know and I can explain anything further in detail, or if you may need me to send additional screenshots.

 

As you can see from the screen shots and preview URL I linked above, there is the same button twice on the page.

I want to hide one of the buttons, without affecting the other button. How do I do that?

That is to say, how can I remove only one of those two buttons from the page, considering they are currently the "same code" (.rte .text-link)?

 

Thanks!

Anonymous
Not applicable

@Spr123 
Can you mark which button you want to remove,
I will remove that button.
Thank You.

Spr123
Excursionist
28 1 6

Hi @Anonymous please could you remove just the button in the screenshot below?

 

Many thanks!

button to remove.png

Spr123
Excursionist
28 1 6

This is an accepted solution.

@Anonymous thanks again for the helpful and speedy edit of my code via private message.

The solution is very nice, thanks a lot!

 

If you can share the file modified (theme.scss.liquid only, or others?) and lines of code to tweak I think this thread can also be helpful to others with the same question in the future.

 

Thanks again!!