Changing Add to Cart Buton to IMAGE

Highlighted
Tourist
26 0 1

Hey!  So I've been learning how to do all the coding stuff here. I would really like to change the add to cart button on my page.  It's using the megatronic theme.  This seems to be the code:

  <input class="btn" style="float:left;" type="submit" name="add" id="add-to-cart" value="Buy This Thing!" /> 

As you can see, I already changed the text displayed from "Add to Cart" to "Buy this Thing!", which was easy.  But I'd love to use an image there instead, thus allowing me to customize what the button looks like (and use a bigger, brighter button).

Seems like one of those really simple things that I just don't know how to do! :)

0 Likes
Highlighted
New Member
2 0 0

I am trying to do the same thing. I want the button to be wider. Which is not possible in the theme settings on MINIMAL. And I cannot find how it can be done through CSS yet. 

0 Likes
Highlighted
Shopify Expert
9872 100 1710

But I'd love to use an image there instead, thus allowing me to customize what the button looks like (and use a bigger, brighter button).

Not sure if you've need a button. Size and colour can be set with the CSS. What are you trying to achieve? Knowing that might help us point you in the right direciton. If you must use an image you can either just use an input with a src:

<input src="{{ 'some-image.png' | asset_url }}" style="float:left;" type="submit" name="add" id="add-to-cart" />

or just use the background-image css:

#add-to-cart{
    background:url({{ 'some-image.png' | asset_url }}) none;
    text-indent:-9999px; /* gross hack, but it works */
    width:100px; /* must match your image size */
    height:50px; /* must match your image size */
}

I am trying to do the same thing. I want the button to be wider.

You might just want to add even more padding to the button. This will effect all your buttons though so you might not want this. 

a.btn, input.btn {
   /* I HAVE NOT SHOWN ALL THE EXISTING CSS HERE FOR NEATNESS. DON'T DELETE IT. */
   padding: 0 50px; /* <<---- change to this */
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
New Member
1 0 0

I am new here and I hope it is ok to jump on this thread because I am looking to CHANGE current minimal theme AddToCart button to AddToCart image. I have been reading some of the other codings but my bigger problem is how to treat out of stock items without crashing the page or getting an error. 

I set up two use cases and tried to embed my new code so I can see the behavior of my code while the existing code exists. 

Here is my base code without modification or changes:

product-template.liquid (from around line 230)

          {% form 'product', product, class:productform_class %}
         
             <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}

                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>
 		
           
              
              <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>                              
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          {% endform %}

and here is my reference image URL : https://cdn.shopify.com/s/files/1/0266/7787/0628/files/Add-To-Cart-720x360_360x.jpg?v=1592281002

I would like to take that image and replace the current scenario with the image but have it jump to an OUT OF STOCK condition when it exists while not disrupting the 

section.settings.enable_payment_button 

function because it is easy to break as I have noticed. 

 

I am a novice but I have some experience with manipulating code from the old days. I just don't have enough run time with Liquid yet so I am asking. Spent too much time on this already. 

 

Thank you in advance!  

0 Likes