By default the Shopify Product block is configured to show the price, options and button, but not other details from Shopify (such as the name, image and description).
The reason for this configuration is that it gives you much more control over your product displays, shifting those responsibilities to the ConcreteCMS side, rather than having to customize the Shopify scripts that output the button (which can be complex task).
The Shopify Product block's output is HTML directly to the page (instead of output within an iframe), with additional bootstrap related classes added to elements. For Bootstrap based themes, you may find that the default output immediately matches your site.
However, if you are using a custom theme, or wish to customise the price, option and button output further, you can customize the block's CSS, by copying the files /packages/msv_shopify/blocks/msv_shopify_buy_button/view.css and view.php, to /application/blocks/msv_shopify_buy_button
Then edit the view.css file as required. Some example CSS is already present in this file.
Or, you can simply provide the styling required in your custom theme.
Another option is to use our Theme Styling Tool add-on which makes it easy to add custom CSS to your website.
The recommendation is to provide the custom CSS to style the buttons/controls, instead of the view.css override.
The Shopify cart that is automatically displayed when products are added to a cart is displayed on the site within an iframe. This means that custom CSS on your site is not able to target the contents of the cart, or the cart tab displayed on the right hand side.
If you wish to customise the styling, you can:
Copy /packages/msv_shopify/elements/shopify_cart_styling.php to /application/elements/shopify_cart_styling.php and adjust the values within the override.
If you are unable to work out how to style a particular aspect of the cart, please feel free to raise a support ticket or contact us, and we will assist where possible.