Customization: Product Images in Bundle Summary
These steps outline a way to add product images to the line items in the bundle summary as customers add products to their bundle.
Please note that this will only add the images to the line items in the bundle builder, and not the Cart.
Example:
- Go to your Shopify admin.
- Head to Online Store > Themes > Edit Code
- In the code editor, click through to theme.liquid on the left hand side. This will open the general liquid code for your theme.
- Most themes will have all the code nestled within the <body></body> tags. Copy and paste the below code right before the closing </body> tag and Save Changes.
<!-- Bundable Code Start -->
{% if request.path contains 'bundle-builder' %}
<style>
#bdlr__bundle-widget .bdlr__products--inner {
position: static;
height: auto;
}
#bdlr__bundle-widget .bdlr__products {
height: auto;
}
.pagination li {
display: inline-block;
}
.pagination {
text-align: center;
}
body #PageContainer {
max-width: inherit;
padding: 0;
margin: 0 auto;
}
.bundler-modal-open #bdlr__bundle-widget {
padding-top: 15px;
position: relative;
z-index: 1111111111;
}
.bdlr___summary-items strong {
display: none;
}
.bdlr-toast {
background: #d4b45c;
}
.bdlr_thumb.bdlr__summary--list-item-cell {
display: inline-block !important;
}
.bdlr_thumb.bdlr__summary--list-item-cell img {
width: 35px;
}
.bdlr__summary--list{
padding-left:5px;
}
.remove.bdlr__summary--list-item-cell,
.enoble_modal-close{
color: #000;
text-decoration: none;
}
.name.bdlr__summary--list-item-cell.ng-binding,
.price.bdlr__summary--list-item-cell{
font-size: 13px;
}
.bdlr__summary .bdlr__summary--list-item{
margin:15px 0;
}
.bundler-modal-open header{
z-index:1 !important;
}
.enoble_modal-body h4 {
margin-top:0;
}
.btn.button.block.ng-binding {
padding: 14px;
background: #d4b45c;
color: #fff;
border: none;
}
.enoble_modal .enoble_modal-body textarea {
width: 100%;
min-height: 120px;
}
</style>
{%endif%}
<!-- Bundable Code End -->