How can I alter and reposition my 'Shop Now' button?

[PeppePro02]

Hi i would like to change the shape of my button shop now with this one like the photo and also move it in same position . Thanks !

R&D GADGETS MALTA : Online Shopping For Electronic Products Malta (rdmalta.com)

[niraj_patel]

Hello @PeppePro02

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.button:before{ border-radius: unset !important; } .button:after{ border-radius: unset !important; } .banner__content.banner__content--middle-center { align-items: flex-end !important; justify-content: flex-start !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[PeppePro02]

Hi thank you for your reply , with this code not appering any button on mobile version , by the way in desktop mode is almost good .

[Vinsinfo]

@PeppePro02

Please follow below steps to change the button shape and move the button to bottom left. Let me know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes” → “Customize”.
2. Click “Image banner” block.
3. Change “Desktop content position” to bottom left and change “Mobile content alignment” to Left.

4. Paste below code in the “Custom CSS” field as shown in below image.

@media screen and (max-width: 750px) {
  .banner__content.banner__content--bottom-left {
    align-items: end;
  }
}
.banner__box .button:before, .banner__box .button:after {
  border-radius: unset !important;
}

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[PeppePro02]

Thank you it works , can be also changed the color inside of the box? So can be easier to find it, where is SHOP NOW .

[Vinsinfo]

@PeppePro02 Sure. Please follow below steps to change the button color and let me know whether it is helpful for you.

1. As done previously, go to “Online Store” → “Themes” → “Customize” from store admin panel.
2. Click “Image banner” block and paste below code in the bottom of the “Custom CSS” field as shown in below image.

.banner__content .banner__box .banner__buttons a.button {
    background-color: #FFFFFF;
    color: #000000;
    border-radius: unset;
}

It will shown like below,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[PeppePro02]

Thank you works!