Add border to Add To Cart Button - Dawn Theme

Store Design
1

Hi,

How can I add a border to my add to cart button on the dawn theme? It appears when I hover over the button but I can’t figure out how to make it permanently visible.

cartborder1.PNG
cartborder1.PNG1100×1221 46.3 KB

Any help would but be greatly appreciated!

Thanks

2

Link to store

3

https://pobladocoffi.co.uk/

4

Go to Edit code and in the section-main-product.css file line 261, it should look like this

.product-form__submit {
    margin-bottom: 1rem;
    border: 1px solid black;// add this.
}
5

Hi,

I can’t find this section, all I have in my Sections are main-product.liquid.

On line 255 - 267 of main-product.liquid is:

{% comment %}ly_i18n_replace_for_[ 'products.product.quantity.decrease' | t: product: product.title | escape ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}{% endcapture %}{% capture ly_translation %}{% render 'ly-static-string' with '20219665' render:true %}{% endcapture %}{% if ly_translation != '' and ly_translation != nil %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% capture ly_translation %}{% render 'ly-title' with product render:true %}{% endcapture %}{% assign replacement = ly_translation %}{% assign ly_template = ly_template | replace: '[[product]]', replacement %}{% if escape_content %}{{ ly_template | escape | escape }}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %} {% render 'icon-minus' %}
6

Oh no, you’ll find this file in the assets folder.

7

Hello @PobladoCoffi

Try this code: it will be helpful

Go to the online store> Theme>Edit Code>Assets>base.CSS>Add code in this file.

.product-form__submit {
    margin-bottom: 1rem !important;
    border: 2px solid #708090 !important;
}
8

Hi,

I’ve added this as you’ve instructed but it still hasn’t changed the appearance of the add to cart button.

It only shows up when I’m hovering over it, any ideas what this might be?

Thanks for your help!

9

Did you find a solution to this? I have the same issue

10

Are you using the dawn theme?