CC the add-to-basket button and move it

New Member
9 0 0

Hello! 

 

Anyone knows how I can move this Shopify buy-button a bit to the left with CC. 

 

See image below.Screenshot 2019-11-02 14.46.38.png 

 

Here is the custom code for the button that I pasted in at Squarespace:

 

 

 

<div id='product-component-1572341221107'></div>

<script data-shopify-buy-ui="">

window.open = function (open) {

return function (url, name, features) {

// Pass through non-shopify URLS

if (url.indexOf("myshopify") < 0) {

return open.call(window, url, name, features);

}

// Use current window

console.log("Redirecting to:", url);

window.location.href = url;

return null;

};

}(window.open);

/*<![CDATA[*/

(function () {

  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

  if (window.ShopifyBuy) {

    if (window.ShopifyBuy.UI) {

      ShopifyBuyInit();

    } else {

      loadScript();

    }

  } else {

    loadScript();

  }

  function loadScript() {

    var script = document.createElement('script');

    script.async = true;

    script.src=scriptURL;

    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);

    script.onload = ShopifyBuyInit;

  }

  function ShopifyBuyInit() {

    var client = ShopifyBuy.buildClient({

      domain: 'kassettkompaniet-com.myshopify.com',

      storefrontAccessToken: 'c00a75f8db82692f48071e2c91582f98',

    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {

      ui.createComponent('product', {

        id: '4333030735921',

        node: document.getElementById('product-component-1572341221107'),

        moneyFormat: '%7B%7Bamount_with_comma_separator%7D%7D%20kr',

        options: {

  "product": {

    "styles": {

      "product": {

        "@media (min-width: 601px)": {

          "max-width": "calc(25% - 20px)",

          "margin-left": "20px",

          "margin-bottom": "50px"

        }

      },

      "title": {

        "font-family": "Big Caslon, serif",

        "font-weight": "normal"

      },

      "button": {

        "font-family": "Roboto, sans-serif",

        ":hover": {

          "background-color": "#000000"

        },

        "background-color": "#000000",

        ":focus": {

          "background-color": "#000000"

        },

        "border-radius": "0px",

        "padding-left": "32px",

        "padding-right": "32px"

      }

    },

    "contents": {

      "img": false,

      "button": false,

      "buttonWithQuantity": true,

      "title": false,

      "price": false

    },

    "text": {

      "button": "LEGG I HANDLEKURV"

    },

    "googleFonts": [

      "Roboto"

    ]

  },

  "productSet": {

    "styles": {

      "products": {

        "@media (min-width: 601px)": {

          "margin-left": "-20px"

        }

      }

    }

  },

  "modalProduct": {

    "contents": {

      "img": false,

      "imgWithCarousel": true,

      "button": false,

      "buttonWithQuantity": true

    },

    "styles": {

      "product": {

        "@media (min-width: 601px)": {

          "max-width": "100%",

          "margin-left": "0px",

          "margin-bottom": "0px"

        }

      },

      "button": {

        "font-family": "Roboto, sans-serif",

        ":hover": {

          "background-color": "#000000"

        },

        "background-color": "#000000",

        ":focus": {

          "background-color": "#000000"

        },

        "border-radius": "0px",

        "padding-left": "32px",

        "padding-right": "32px"

      }

    },

    "googleFonts": [

      "Roboto"

    ],

    "text": {

      "button": "Add to cart"

    }

  },

  "cart": {

    "styles": {

      "button": {

        "font-family": "Roboto, sans-serif",

        ":hover": {

          "background-color": "#000000"

        },

        "background-color": "#000000",

        ":focus": {

          "background-color": "#000000"

        },

        "border-radius": "0px"

      },

      "title": {

        "color": "#000000"

      },

      "header": {

        "color": "#000000"

      },

      "lineItems": {

        "color": "#000000"

      },

      "subtotalText": {

        "color": "#000000"

      },

      "subtotal": {

        "color": "#000000"

      },

      "notice": {

        "color": "#ffffff"

      },

      "currency": {

        "color": "#000000"

      },

      "close": {

        "color": "#000000",

        ":hover": {

          "color": "#000000"

        }

      },

      "empty": {

        "color": "#000000"

      },

      "noteDescription": {

        "color": "#000000"

      },

      "discountText": {

        "color": "#000000"

      },

      "discountIcon": {

        "fill": "#000000"

      },

      "discountAmount": {

        "color": "#000000"

      }

    },

    "text": {

      "title": "Handlekurv",

      "total": "Subtotal",

      "empty": "Din handlekurv er tom",

      "button": "Til kassen"

    },

    "googleFonts": [

      "Roboto"

    ]

  },

  "toggle": {

    "styles": {

      "toggle": {

        "font-family": "Roboto, sans-serif",

        "background-color": "#000000",

        ":hover": {

          "background-color": "#000000"

        },

        ":focus": {

          "background-color": "#000000"

        }

      }

    },

    "googleFonts": [

      "Roboto"

    ]

  },

  "lineItem": {

    "styles": {

      "variantTitle": {

        "color": "#000000"

      },

      "title": {

        "color": "#000000"

      },

      "price": {

        "color": "#000000"

      },

      "fullPrice": {

        "color": "#000000"

      },

      "discount": {

        "color": "#000000"

      },

      "discountIcon": {

        "fill": "#000000"

      },

      "quantity": {

        "color": "#000000"

      },

      "quantityIncrement": {

        "color": "#000000",

        "border-color": "#000000"

      },

      "quantityDecrement": {

        "color": "#000000",

        "border-color": "#000000"

      },

      "quantityInput": {

        "color": "#000000",

        "border-color": "#000000"

      }

    }

  }

},

      });

    });

  }

})();

/*]]>*/

</script>

0 Likes

Hello 
Can you please share your site url so that i can check.
And provide you solution here.
Its looking that you have to add some css.

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
New Member
9 0 0

Sure thing :) 

 

URL: kassettkompaniet.com   (type 123 to enter)

 

 

0 Likes

Hello 
Add this css at bottom of your css file:

.shopify-buy__btn {
    padding-left: 0px!important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

I did like this, but it did not move:

 

Screenshot 2019-11-04 10.53.24.png

0 Likes

Hello 
Remove css from there.
Can you please share your file structure like this:
32.jpg
So that i can let you know where to add that css.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

Sure: 

 

Screenshot 2019-11-04 11.29.08.png

0 Likes

Ok.

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.shopify-buy__btn {
    padding-left: 0px!important;
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
9 0 0

I inserted it like this, but the button did not move: 

 

Screenshot 2019-11-04 11.40.56.png

0 Likes

Hello 
This button display from iframe so you can add this css to display content in same line:
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.ProductItem-details-excerpt {
    padding-left: 10px!important;
}

 Try this css and let me know.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes