ADDING & REPLACING ATC WITH WALMART LINK

If you have a walmart link and need to replace with buy it on walmart instead of the add to cart button- this is for you.

First, make a custom metafield under the custom data in the back end of your shopify store.

Create the metafield, name it Walmart link namespace should be: custom.walmart_link type: URL One value

Go into the code

find the snippets product-form.liquid product-item .liquid walmart-icon

and custom.css file in assets

add in the product-form around line 143 and after the 3 renders,

    {% if product.metafields.custom.walmart_link != blank %}
                <a
                    class="btn btn-primary btn-walmart  w-100"
                    href="{{ product.metafields.custom.walmart_link }}"
                    target="_blank">
                   {% render 'walmart-icon' %}
                    <span class="ms-2">
                        {{ 'product.buy_walmart' | t }} 
                    </span>
                </a>
            {% else %}    
            

Go into the product-item and add around line 204 and before

<div data-gb-custom-block data-tag="if"></div>
      {% if product.metafields.custom.walmart_link != blank %}
                <a
                    class="btn btn-primary btn-walmart  w-100"
                    href="{{ product.metafields.custom.walmart_link }}"
                    target="_blank">
                   {% render 'walmart-icon' %}
                    <span class="ms-2">
                        {{ 'product.buy_walmart' | t }} 
                    </span>
                </a>
            {% else %}
        

Then go into the custom.css and add this code


.btn-walmart {
  background: #0071dc;
  border-color: #0071dc;
  border-radius: 50rem;
}
.btn-walmart:hover,
.btn-walmart:focus,
.btn-walmart:active {
  background: #004f9a !important;
  border-color: #004f9a!important
}

Then create a new snippet called walmart-icon and add this


<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 50">
 <g>
  <g id="layer1">
   <path d="m23.548721,17.863708c1.023743,0 1.866257,-0.532471 1.979996,-1.219971l1.011261,-11.430054c0,-1.130005 -1.32251,-2.057495 -2.987503,-2.057495c-1.662506,0 -2.983749,0.92749 -2.983749,2.057495l1.008743,11.430054c0.112503,0.6875 0.955002,1.219971 1.975006,1.219971l-0.003998,0" id="path2974" fill-rule="nonzero" fill="#fdbb30"/>
   <path d="m17.371231,21.433716c0.513748,-0.88501 0.473755,-1.881226 -0.066193,-2.32251l-9.395004,-6.589966c-0.976303,-0.565002 -2.441299,0.116211 -3.272552,1.557495c-0.833755,1.438721 -0.686249,3.047485 0.288742,3.612488l10.40126,4.84375c0.651245,0.241272 1.537491,-0.222534 2.047501,-1.107483l-0.003998,0.005981" id="path2976" fill-rule="nonzero" fill="#fdbb30"/>
   <path d="m29.731232,21.42749c0.512497,0.88501 1.395004,1.348755 2.046249,1.107483l10.402496,-4.84375c0.980011,-0.565002 1.12001,-2.173706 0.292511,-3.612488c-0.835007,-1.441223 -2.302505,-2.122499 -3.27626,-1.557495l-9.395004,6.590027c-0.537491,0.441223 -0.577499,1.4375 -0.066193,2.322449l-0.003998,-0.005981" id="path2978" fill-rule="nonzero" fill="#fdbb30"/>
   <path d="m23.548721,32.140015c1.023743,0 1.866257,0.528748 1.979996,1.216248l1.011261,11.428772c0,1.132507 -1.32251,2.058716 -2.987503,2.058716c-1.662506,0 -2.983749,-0.926208 -2.983749,-2.058716l1.008743,-11.428772c0.112503,-0.6875 0.955002,-1.216248 1.975006,-1.216248l-0.003998,0" id="path2980" fill-rule="nonzero" fill="#fdbb30"/>
   <path d="m29.731232,28.570007c0.512497,-0.88623 1.395004,-1.347473 2.046249,-1.102478l10.402496,4.838745c0.980011,0.566223 1.12001,2.176208 0.292511,3.617493c-0.835007,1.436218 -2.302505,2.118713 -3.27626,1.554993l-9.395004,-6.58374c-0.537491,-0.446289 -0.577499,-1.442505 -0.066193,-2.326233l-0.003998,0.000977" id="path2982" fill-rule="nonzero" fill="#fdbb30"/>
   <path d="m17.371231,28.568726c0.513748,0.883728 0.473755,1.880005 -0.066193,2.326233l-9.395004,6.58374c-0.976257,0.563782 -2.441254,-0.118713 -3.272507,-1.554993c-0.833801,-1.441223 -0.686295,-3.051208 0.288696,-3.617493l10.40126,-4.838745c0.651245,-0.244995 1.53749,0.216248 2.047502,1.102478l-0.003998,-0.000977" id="path2984" fill-rule="nonzero" fill="#fdbb30"/>
  </g>
 </g>
</svg>

From there, go into any product you want the walmart to replace the add to cart

Last updated