Components
28
Background Gradients Blog Post Bullet Left Card Stack Case Study Large Case Study Single Contact Form Cta Demo Faqs Header Resources Homepage Hero Homepage Stats Illustration Left Illustration Right Image Left Image Right Impact Carousel Logo Carousel Logos Software Logo Tab Blocks Table Testimonial Three Blocks Two Column Usp Carousel Video

Faqs

FAQ'S

Any further quesitons?

The direct cost savings alone typically represent 2-4x greater than our fees. We expect you will generate/save $10 for $1 in fees based on the additional conversions, operational benefits and logistics savings.

Yes. We can add your stores as an additional pick up option. We can also push your store locations to the top of search results (where practical) to drive as much foot traffic your way as possible. We can share plenty of examples of this with you.

Usually, your customers will only be shown the local pickup option if they are based in your country. Please note: if you have customers in other countries and want to offer this solution, we offer international pickup locations through our partnerships with carriers including UPS, DPD, Hermes and Evri.

We work with subscription services and there are a couple of different ways of handling this depending on your ecommerce system and how you manage your particular offering. We work with a number of subscription-based retailers including wine and beer shippers

No need to tell your warehouse anything. These packages are palletized and shipped the same way as the rest of your volume.

Field
Field Type
Field Name
Instructions
Block Data
tab
First block of the page
true_false
is_first_block_of_the_page
Overline
text
overline
Heading Type
select
heading_type
Heading Text
text
heading_text
FAQs
repeater
faqs
-- Question
text
question
-- Answer
textarea
answer
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-faqs {
    position: relative;
    h5 {
        text-align: center;
        @include margin-bottom(rem-calc(2.375rem));
        @include margin-top(rem-calc(2rem));
        color: $secondary;
    }

    h3 {
        text-align: center;
        @include margin-bottom(rem-calc(5.938rem));
        color: $secondary;
    }

    .heading {
        text-align: center;
        @include margin-bottom(rem-calc(5.938rem));
        color: $secondary;
        @include fluid-type(32, 70, 375, $max-container-size);
        line-height: 100%;
        font-weight: 700;
    }

    &__card {
        border-bottom: 0.063rem solid $secondary-light;
        @include margin-bottom(rem-calc(0.938rem));
    }

    &__card-body {
        @include margin-bottom(rem-calc(0.938rem));
        display: none;

        p {
            font-weight: 400;
            margin-bottom: 0;
            color: $secondary;
        }
    }

    &__card-header {
        svg {
            .s0 {
                fill: #ffffff;
                stroke: #263238;
                stroke-width: 1.3;
            }
            .s1 {
                fill: $secondary;
            }

            @include bp($md, true) {
                max-width: 1.125rem;
            }
        }

        &.rotate {
            a {
                svg {
                    transform: rotate(180deg);
                }
            }
        }

        a {
            @include fluid-type(20, 24, 375, $max-container-size);
            line-height: 120%;
            color: $secondary;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            @include margin-bottom(rem-calc(0.938rem));
            gap: 1.25rem;
            color: $secondary;

            &:hover {
                color: $primary !important;

                svg {
                    .s0 {
                        stroke: $primary;
                    }
                    .s1 {
                        fill: $primary;
                    }
                }
            }

            @include bp($md, true) {
                font-size: 1.125rem;
            }
        }
    }
}

.block-cta {
    text-align: center;

    &__wrapper {
        background-color: $light-blue;
        @include padding(rem-calc(5.125rem 3rem));
        max-width: 67.25rem;
        margin-left: auto;
        margin-right: auto;

        h2 {
            @include margin-bottom(rem-calc(1.063rem));
            margin-left: auto;
            margin-right: auto;
            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        .heading {
            @include margin-bottom(rem-calc(1.063rem));
            margin-left: auto;
            margin-right: auto;
            @include fluid-type(28, 50, 375, $max-container-size);
            line-height: 100%;
            font-weight: 700;
            color: $secondary;

            @include bp($lg, true) {
                max-width: 100%;
            }
        }

        p {
            margin-left: auto;
            margin-right: auto;
            @include margin-bottom(rem-calc(2.438rem));
            font-weight: 400;
            @include bp($lg, true) {
                max-width: 100%;
            }
        }
    }
    &__text-wrapper {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
}
$(document).ready(function () {
    $(".block-faqs__card-header").click(function () {
        $(this).parent().find(".block-faqs__card-body").slideToggle();

        $(this).toggleClass("rotate");
    });
});
Page Title
Page Type
Page URL
Frequently Asked Questions
page
There are is no readme file with this component.