Top

Code for Responsive Builder Layout

"Arrow Headers" Builder theme Instructions

  1. Click on the "Edit Product" button on the builder you want to make responsive.
  2. If you are using a default builder theme then scroll down and select the "Arrow Headers" theme.
  3. Scroll to the bottom of the page and click the "Customize Selected Theme" button.
  4. Scroll down until you see "Customize Theme CSS". At the very top of text box you will see the following: /* Shappify Inc - Product Builder App Styles - theme 3 */
  5. Directly underneath that text paste the following and hit Save:

 

 

"

In the app admin, navigate to the "display settings" page, scroll down to the "Page Header HTML:" text box, and add the following code:

 

<script>

$( document ).ready(function() {

var w = window.innerWidth;
if (w < 630) {

$( '.builder_verify_button .btn-success ' ).remove();

$( '.next-btn' ).after( '<div id="builder_verify_button" class="builder_verify_button" style="display:none"><button type="button" class="btn btn-success" onclick="popup_confirm()">Finish</button></div>' );

$( '.steps_body' ).after('<div id="total_price" class="total_price">$0.00</div>');
}

var image_resize = $('.option_image_pane').width();
$('div#option_image').css('max-height', image_resize);

});
</script>

<style>

@media (max-width: 630px) {


.step_title {
font-size: 18px !important;
}

#option_image {
height: auto !important;
}

#step_container {
font-size: small !important;
}

.shappify_product_builder .total_price {
margin-top: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 50px !important;
}

.verify_pane .total_price {
padding-top: 5px !important;
}

#navigation_buttons button {
padding: 10px 18px !important;
}

#builder_verify_button {
margin-top: 0px !important;
margin-left: 0px !important;
}

.option_image_pane {
height: auto !important;
min-height: 250px !important;
padding-bottom: 10px !important;
}

.shappify_product_builder .option_image_pane, .steps_body {
width: 100% !important;
}

.step_header {
width:100% !important;
}

.shappify_product_builder .option_image_pane {
border: 1px solid #ddd !important;
}

.shappify_product_builder {
width: 80% !important;
}

.option_value, .option_id {
width: 90% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}

.option_value select {
width: 100% !important;
}

.choices {
width:100% !important;
margin:0px !important;
height: auto !important;
padding: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
font-size: 12px !important;
}

.choices.selected {
border-color: lightgrey !important;
border-left: 0px !important;
border-right: 0px !important;
background-color: #DDD !important;
}

.option_image {
width: 20% !important;
max-width: 325px !important;
}

.shappify_product_builder .choices img {
float: left !important;
margin: 0px !important;
width: 25% !important;
height: auto !important;
}

.steps_body, .option_choices {
padding: 0px !important;
margin:0px !important;
}

.step_details {
height: 350px !important;
}


.step_container {
text-align: center !important;
}

.steps_body {
height: 425px !important;;
}

.option_image_pane {
margin-top:30px !important;
}

.step_header {
display: none !important;
font-size: 20px !important;
padding: 0px !important;
}

.current {
display: block !important;
}

.shappify_product_builder .total_price {
font-size: 26px !important;
}
}

@media (max-width: 768px) {
.tooltip {
display: none !important;
}


.shappify_product_builder {
max-width: 1060px !important;
margin-left: auto !important;
margin-right: auto !important;
color:black !important;
}


.navigation_buttons {
display: block !important;
}

.shappify_product_builder .choices img {
margin: 5px 0px 5px 5px !important;
}

.description {
margin: 10px !important;
}

.shappify_product_builder .option_image .spritespin-stage {
margin-left: auto !important;
margin-right: auto !important;
position: inherit !important;
}

#builder_addtocart_button {
clear:both !important;
padding-top:5px !important;
}

div#add_qty {
padding-top: 5px !important;
}
input#qty {
margin-top: -5px !important;
}
}

.step_info_facebox {
width: auto !important;
}

#facebox {
top: 0 !important;
left: 0 !important;
width: 100% !important;\
}

.step_info_facebox .step_info_description {
width: auto !important;
}

#facebox .popup {
position: relative;
border: 15px solid rgba(0,0,0,0) !important;
-webkit-box-shadow: 0 0 0 !important;
-moz-box-shadow: 0 0 0 !important;
box-shadow: 0 0 0 !important;
}

div#image_preview img {
height: auto !important;
}

#facebox .content {
width: 100% !important;
box-sizing: border-box !important;
}

div#image_preview {
max-width: 325px !important;
margin-left: auto;
margin-right: auto;
}

.steps {
width: 84% !important;
margin-left: auto !important;
margin-right: auto !important;
}

</style>

Have more questions? Submit a request