Minimal theme - how to add a themed "shop now" button to pages

LucasSoler
Tourist
4 0 1

I've been able to add a "shop now" button using the below code on Custom HTML sections of the homepage.   However, this same code is not working when I use it on pages (see attachments).   

I think I'm missing some definition of class in the page.liquid.    Any help would be appreciated.

 

The code that adds a button on Custom HTML on homepage:

<a href="/collections/all-products" class="btn">shop now</a>

 

 

Using the HTML editorUsing the HTML editorSeeing the previewSeeing the preview

alvinkonda
Shopify Partner
44 5 9

Hi,

Do you mean you want to see the button styled through the editor or that the button is not styled on your site?

It seems your HTML code is fine.

FireTheme.com - The Best Free Shopify Theme To Increase Conversion Rates (CVR)
Increase your store conversion rates (CVR) and average order value (AOV) with FireTheme, the world's most-loved Free Shopify Theme. Developed for maximum performance, flexibility in mind, and simplicity at core, you can be 100% sure that...
0 Likes
dmwwebartisan
Shopify Partner
5805 1330 1703

@LucasSoler 

please try following code 

<a href="/collections/all-products" class="slides__btn btn">shop now</a>

Please add the following code at the bottom of your assets/timber.scss.liquid  OR assets/theme.scss.liquid  file.

.btn {
    display: inline-block;
    padding: 8px 16px;
    margin: 0;
    font-size: 1em;
    font-family: "Optima nova",sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.8;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 2px;
    background-color: #f25c54;
    color: #fff;
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
LucasSoler
Tourist
4 0 1
Hi! I mean the button styled through the themed site. Red with white text.
0 Likes
LucasSoler
Tourist
4 0 1

Yes, I mean like shown below... it's using the theme settings via the customizations.

 

LucasSoler_0-1619703628671.png

 

0 Likes
dmwwebartisan
Shopify Partner
5805 1330 1703

yes !

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes