Case Study Single
The challenge
Founded in 1999, Brown Bag Clothing is an established online brand offering customers high- profile menswear at affordable, discounted prices. With a mission to “provide customers with top designer men’s fashion at the very best prices”, they supply a range of brands including New Balance, Tommy Hilfiger
and True Religion.
Getting the delivery mix right is increasingly important when it comes to meeting consumers’ heightened service expectations. With this in mind, Brown Bag Clothing and their sibling site Woodhouse were keen to get a local Click & Collect solution up and running as quickly as possible.
Giving customers who might be out during the day an alternative delivery option, and thus reducing customer service queries and issues resulting from missed or failed deliveries was crucial to Brown Bag. Ease of implementation and compatibility with existing solutions were also key priorities.
The Solutions
Brown Bag Clothing was able to implement Click & Collect without having to make any changes to their existing couriers, warehouse management system (WMS) or label printing, making the process smooth and straightforward. Using HubBox’s pre-built module for Magento, Brown Bag completed the integration themselves in a matter of days.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-blog-post {
text-align: center;
position: relative;
// h3 {
// margin-bottom: 0;
// }
// .heading {
// margin-bottom: 0;
// }
.block-cta {
.container {
padding: 0;
}
}
&__wrapper {
.block-general__user-wrapper {
justify-content: center;
}
}
p {
@include fluid-type(14, 18, 375, $max-container-size);
font-weight: 400;
text-align: left;
}
.p--large {
font-weight: 400;
color: $secondary;
margin: auto;
@include fluid-type(18, 22, 375, $max-container-size);
text-align: center;
@include bp($lg, true) {
max-width: 100%;
}
a {
color: $secondary;
font-weight: 400;
border-bottom: 0.063px solid $secondary;
&:hover {
color: $primary;
}
}
}
&__text-wrapper {
max-width: 66%;
margin-left: auto;
margin-right: auto;
@include bp($lg, true) {
max-width: 100%;
}
h2 {
text-align: left;
@include margin-bottom(rem-calc(1.938rem));
}
}
.p--medium {
font-weight: 400;
margin-left: auto;
margin-right: auto;
@include margin-bottom(rem-calc(1.875rem));
text-align: left;
@include bp($lg, true) {
max-width: 100%;
}
a {
@include fluid-type(14, 18, 375, $max-container-size);
font-weight: 400;
border-bottom: 0.063px solid $secondary;
}
}
&__quote-wrapper {
@include margin-top(rem-calc(4.625rem));
@include margin-bottom(rem-calc(4.625rem));
@include margin-left(rem-calc(8.375rem));
border-left: 0.25rem solid $primary;
position: relative;
@include padding-left(rem-calc(2.375rem));
@include bp($lg, true) {
margin-left: 0;
}
p {
font-weight: 500;
@include fluid-type(18, 28, 375, $max-container-size);
text-align: left;
max-width: 84%;
}
.p--x-small {
@include fluid-type(12, 12, 375, $max-container-size);
text-transform: uppercase;
font-weight: 700;
}
}
&__boxes {
margin: 4.625rem auto;
max-width: 67.25rem;
@include bp($lg, true) {
max-width: 100%;
}
.col-lg-4 {
@include margin-bottom(rem-calc(2rem));
}
picture {
img {
width: 100%;
}
}
}
&__boxes-wrap {
border: 1px solid $secondary-light;
box-shadow: 0px 14px 24px $secondary-light;
@include padding(rem-calc(2.813rem));
text-align: left;
height: 100%;
h3 {
color: $primary;
@include margin-bottom(rem-calc(0.5rem));
}
p {
margin-bottom: 0 !important;
}
}
&__quote-wrapper-image {
position: absolute;
right: 3.125rem;
top: 30%;
@include bp($lg, true) {
right: 0;
}
}
&__float {
position: relative;
margin: 3.25rem 0;
}
&__float-wrapper {
position: absolute;
background-color: $white;
@include padding(rem-calc(2.813rem));
bottom: 6.25rem;
left: 6.875rem;
max-width: 20.75rem;
text-align: left;
min-height: 213px;
&--2 {
left: 29.125rem;
@include bp($xl, true) {
bottom: 2.25rem;
left: 25.875rem !important;
}
}
@include bp($lg, true) {
position: initial;
max-width: 100%;
margin-top: 1.5rem;
border: 0.063rem solid $secondary-light;
padding: 1.813rem;
min-height: 100%;
}
h3 {
color: $primary;
@include margin-bottom(rem-calc(0.438rem));
}
.p--medium {
max-width: 100%;
color: $secondary;
margin: 0;
}
}
&__social-media {
text-align: center;
@include margin(rem-calc(2rem 0));
ul {
li {
display: inline-block;
@include fluid-type(18, 22, 375, $max-container-size);
font-weight: 700;
margin-right: 2.875rem;
color: $secondary;
img {
transform: translateY(0px);
transition: all 0.5s ease;
&:hover {
transform: translateY(-5px);
}
}
}
}
}
.block-general__btn-flex {
justify-content: center;
}
}