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.
However, the styling of the cart can be adjusted in some ways through a configuration file. This configuration file is written in PHP, and is converted to Javascript for use by the cart when it initilizes. The default settings within the configuration file will set the cart styling to be as plain as possible, meaning it may simply look appropriate with your theme.
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.
The options within the existing file should be self explanatory, and provide the ability to change elements such as the checkout button. Further customizations of styling will need to be inferred from the pattern, adding further CSS properties in the same format. This javascript file can be useful to find the names of further components to style.
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.