Prestige Theme

Now we're still trying to figure it out, but we've noticed that Bundable has some troubles integrating off the bat with the Shopify Prestige theme.

Are you a Prestige user? This article is for you. Let's get your bundle page looking spotless!

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, make sure to update the button hex codes with your brand colour and Save Changes.

<!-- Bundable Code Start -->
  {% if request.path contains 'bundle-builder' %} 
<style> 
.product-card .bdlr__product--qty {
  position: static !important;
  opacity: 1 !important;
  top: 0;
  left: 0;
  transform: translate(0%);
}
#bdlr__bundle-widget .bdlr__products--inner {
  position: static;
  height: auto;
}
#bdlr__bundle-widget .bdlr__products {
  height: auto;
}
  
#bdlr__bundle-widget {
  padding-top: 25px;
}
  
.pagination li {
    display: inline-block;
}
.bdlr-toast {
  background: #E6086E;
}
  
.btn {
    position: relative;
    display: inline-block;
    padding: 14px 28px;
    line-height: normal;
    border: 1px solid transparent;
    border-radius: 0;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.2em;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: transparent;
    transition: color 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),border 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 1;
    -webkit-tap-highlight-color: initial;
}
  
  .btn::before {
    position: absolute;
    content: '';
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: -webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86),-webkit-transform 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
  
  .btn, .btn-primary {
    color: #fff;
    border-color: #E6086E;
  }
  
   .btn:before, .btn-primary::before {
    background: #E6086E;
  }
  
 .btn:hover, .btn-primary:hover {
    color: #E6086E;
    background-color: transparent;
  }
  
  .btn:hover::before {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  
.bundler-modal-open #bdlr__bundle-widget {
    padding-top: 15px;
    position: relative;
    z-index: 11111;
}
  
h1 {
  font-size: 2em;
}

  .product-card .btn {
    min-width: auto;
    margin: 0;
    padding: 8px 12px;
}
  
</style> 
{%endif%}
<!-- Bundable Code End -->