This guide is for Shopify users who add their products to their blog posts (see this guide on how to add products to blog posts), but want to change the design of the product embeds.
By default, we adjust the product embed area to your existing Shopify store's design. However, if you want to customize the product embed further, you will need to follow the below steps.
The below steps are for developers and users who are comfortable with CSS. If this isn't the case for you, please reach out to our support and we will do the changes for you!
1. Go to Settings and then Layout/Design
2. Scroll all the way down to the Custom CSS section
3. Here, you can add additional CSS code to change the product embed display
Some notes on the CSS structure:
- Always start with
#bh-posts, as this is our main blog wrapper, and this guarantees that any CSS changes aren't affecting other parts of your store - All product embeds are built the same way. The main wrapper is a div element with the class name
.shopify-product - The price has the class name
.bh-prod-price - The product description has the class name
.bh-prod-desc
Please reach out to our support if you need any help.
