Changing the width of a CTA button on product page debut theme

New Member
10 0 0



I'm sure this is a very basic question, but for the love of me, I can't change the width of JUST the CTA button I have added into my product page, without it changing every single button width across my site.


So in short: 

Currently my CTA button is at the bottom of the page on the left hand side. I added it by adding the following code:

<a class="btn" style="margin-top:50px"; href="#">Etsy Reviews</a> to my product-liquid-template.

Screen Shot 2020-01-02 at 21.20.49.pngButton on product page.

I am then trying to change it's width to 100% by adding the following code to the theme.scss sheet:


a.btn {
width: 100%;


Whilst this does change the width on the product page... it also ends up changing the width of every button on the website to 100%. 


Can anyone provide a resolution to this?


Kind Regards,



New Member
10 0 0

Solved it myself by playing about!


Heres how i managed to do it:

Rather than making changes to the theme.scss.liquid sheet, I instead added a line to the button HTML code in the product-template liquid which did the job.


So before it was:

<a class="btn" style="margin-top:50px"; href="#">Etsy Reviews</a> 


And after i changed it to:

<a class="btn" style="width:100%"; href="#">Etsy Reviews</a>  (also removed the margin).


Thank you for posting your solution, even though you ended up figuring out yourself! That's super helpful for anyone that comes across this in the future.

Andre Ani | Technical Support Engineer, Shogun |
Try Shogun Page Builder for FREE!

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution.