Tab Blocks
Pickup fits into their day.
They don’t have to worry about being in to sign for anything and can pick up their package when it suits them.
Secure and discreet.
Deliveries arrive in a safe place, avoiding packages left on steps or porches being stolen or damaged. And what’s inside is their business alone.
They’ll never miss a package again.
No more wondering where their package is and spending time and energy chasing retailers for replacements or returns.
Higher conversion rate.
With local pickup as an option, more customers will complete their purchase.
Far fewer WISMO calls.
Calls from customers wondering where their package is or when it will arrive will be almost a thing of the past.
Increased order value.
Customers spend an average 22% more when they choose local pickup over home delivery.
Cheaper delivery.
It’s more economical to transport multiple packages to one location, and you won’t have any return shipment costs, either.
Field
Field Type
Field Name
Instructions
Block Data
tab
Tab Blocks List
repeater
tab_blocks_list
-- Tab Title
text
tab_title
-- Blocks
repeater
blocks
---- Image
image
img
---- Title
text
title
---- Sub Title
text
sub_title
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-three-blocks {
text-align: center;
.row {
justify-content: center;
}
&.bg--black {
background-color: transparent;
position: relative;
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: $secondary;
border-radius: 20px;
z-index: -2;
}
img {
@include margin-bottom(rem-calc(3.25rem));
width: 100%;
border-radius: 20px;
min-height: 345px;
max-height: 345px;
object-fit: cover;
@include bp($xl, true) {
min-height: 245px;
max-height: 245px;
}
}
h4 {
color: $white;
max-width: 75%;
margin-left: auto;
margin-right: auto;
}
p {
color: $white;
margin-bottom: 0;
@include bp($lg, true) {
@include margin-bottom(rem-calc(1.938rem));
}
}
}
h2 {
color: $secondary;
@include margin-bottom(rem-calc(1rem));
span {
color: $primary;
}
}
p {
max-width: 58%;
margin-left: auto;
margin-right: auto;
@include margin-bottom(rem-calc(3.938rem));
color: $secondary;
font-weight: 700;
@include bp($lg, true) {
max-width: 100%;
}
}
&__wrapper {
img {
@include margin-bottom(rem-calc(3.25rem));
}
h4 {
font-size: 2.25rem;
@include margin-bottom(rem-calc(0.938rem));
color: $secondary;
@include bp($xl, true) {
font-size: 1.5rem;
}
}
p {
color: $secondary;
max-width: 100%;
font-weight: 700;
}
}
&__slider {
.slick-track {
display: flex;
cursor: grab;
}
.slick-slide {
@include margin-right(rem-calc(15));
@include margin-left(rem-calc(15));
}
.slick-slide > div {
height: 100%;
}
.slick-list {
overflow: hidden;
}
}
&__tabs {
ul {
@include margin-bottom(rem-calc(3.75rem));
@include padding(rem-calc(0.625rem));
border: 0.063rem solid $off-white;
max-width: 67.25rem;
margin-left: auto;
margin-right: auto;
@include bp($lg, true) {
max-width: 100%;
}
li {
display: inline-block;
@include padding(rem-calc(1.063rem 0));
min-width: 32.75rem;
text-align: center;
@include bp($xl, true) {
min-width: 26.75rem;
}
@include bp($lg, true) {
min-width: 100%;
}
&.active {
background-color: $off-white;
}
a {
@include fluid-type(24, 30, 375, $max-container-size);
display: block;
color: $white;
@include bp($lg, true) {
font-size: 1.25rem;
}
}
}
}
}
&__tab-wrapper {
display: none;
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
&.active {
display: block;
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
}
}
}
import "../../node_modules/slick-carousel/slick/slick";
$(document).ready(function () {
$(".block-three-blocks__tabs li").click(function () {
$(".block-three-blocks__tabs li").removeClass("active");
$(this).addClass("active");
let tabId = $(this).attr("data-tabid");
$(".block-three-blocks__tab-wrapper").hide();
$(".tab-wrapper-" + tabId).show();
$(".block-three-blocks__slider").slick("refresh");
});
});
$(".block-three-blocks__slider").slick({
slidesToShow: 3,
prevArrow: false,
nextArrow: false,
// centerMode: true,
autoplay: true,
cssEase: "linear",
infinite: true,
responsive: [
{
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 2,
autoplay: false,
},
},
{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 2,
autoplay: false,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
autoplay: false,
},
},
],
});
Page Title
Page Type
Page URL
There are is no readme file with this component.