Can I custom design my product page with a bordered price box?

[thomasmrgn99]

Hi,

Is it possible to custom design my product page like this?

With the box around the price and variants, as well as border lines in the box. Everything is centered. I appreciate any help and would potentially pay for custom code, please let me know if this is needed.

This is my product page :

Website: https://pawcopets.co.uk/calmingbed

Theme is Gecko on both websites

Thanks in advance for any help!

[dmwwebartisan]

@thomasmrgn99

Please add the following CSS code to your assets/pre_theme.min.css bottom of the file.

#callBackVariant_ppr{border: 1px solid #e2e2e2!important; padding: 10px}

Thanks!

[Denishamakwana]

Please add below css in bottom of assets/theme.css file
.theiaStickySidebar {
text-align: center;
}
.price-review {
border: 1px solid #e2e2e2;
padding: 10px 0 10px 10px;
justify-content: center;
}
.swatch.is-color {
border: 1px solid #e2e2e2;
}

Thank you.

[thomasmrgn99]

@dmwwebartisan @Denishamakwana Hi thank you for the help

This is what I have so far, the box is great, I just need it to cover the price as well now (keep the border line under price)

For the short description (get a free ebook) I would like to move it down outside the box but if this is too complicated I can do it later.

Also tighten the space between size variant and add to cart button

This is the code so far:

#callBackVariant_ppr{border: 1px solid #e3e3e3!important; padding: 10px}

.theiaStickySidebar {
      text-align: center;
}
.price-review {
justify-content: center;
}

Thanks for the help