<!--
SCOOTH PET — FAQ
Shopify-ready HTML fragment.
Paste into a Shopify page using the HTML editor or a Custom Liquid section.
-->
<style>
.sp-faq {
--sp-orange: #ff9554;
--sp-teal: #129eb7;
--sp-indigo: #2710b2;
--sp-ink: #17173b;
--sp-muted: #62667a;
--sp-cream: #fff8f3;
--sp-soft-blue: #f2f7fb;
--sp-white: #ffffff;
--sp-border: rgba(23, 23, 59, 0.11);
--sp-shadow: 0 18px 50px rgba(23, 23, 59, 0.08);
color: var(--sp-ink);
font-family: inherit;
line-height: 1.65;
}
.sp-faq *,
.sp-faq *::before,
.sp-faq *::after {
box-sizing: border-box;
}
.sp-faq__container {
width: min(1080px, calc(100% - 40px));
margin: 0 auto;
}
.sp-faq__hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(76px, 10vw, 128px) 0;
text-align: center;
background:
radial-gradient(circle at 14% 18%, rgba(255, 149, 84, 0.26), transparent 32%),
radial-gradient(circle at 88% 14%, rgba(18, 158, 183, 0.22), transparent 30%),
linear-gradient(135deg, #fff8f3 0%, #ffffff 48%, #f2f3ff 100%);
}
.sp-faq__hero::before,
.sp-faq__hero::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
}
.sp-faq__hero::before {
width: 170px;
height: 170px;
left: -65px;
bottom: -45px;
border: 26px solid rgba(39, 16, 178, 0.07);
}
.sp-faq__hero::after {
width: 120px;
height: 120px;
right: -35px;
top: 24px;
background: rgba(255, 149, 84, 0.12);
}
.sp-faq__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
color: var(--sp-indigo);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
}
.sp-faq__eyebrow::before,
.sp-faq__eyebrow::after {
content: "";
width: 28px;
height: 2px;
border-radius: 999px;
background: var(--sp-orange);
}
.sp-faq h1,
.sp-faq h2,
.sp-faq h3,
.sp-faq p {
margin-top: 0;
}
.sp-faq h1 {
max-width: 780px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
font-size: clamp(2.7rem, 7vw, 5rem);
font-weight: 850;
letter-spacing: -0.055em;
line-height: 0.98;
}
.sp-faq__lead {
max-width: 680px;
margin: 0 auto;
color: var(--sp-muted);
font-size: clamp(1.05rem, 2vw, 1.24rem);
}
.sp-faq__content {
padding: clamp(64px, 8vw, 104px) 0;
}
.sp-faq__intro {
max-width: 720px;
margin: 0 auto 46px;
text-align: center;
}
.sp-faq__intro h2 {
margin-bottom: 16px;
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 850;
letter-spacing: -0.045em;
line-height: 1.05;
}
.sp-faq__intro p {
margin-bottom: 0;
color: var(--sp-muted);
font-size: 1.06rem;
}
.sp-faq__layout {
display: grid;
grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
gap: clamp(28px, 5vw, 64px);
align-items: start;
}
.sp-faq__nav {
position: sticky;
top: 24px;
padding: 26px;
border: 1px solid var(--sp-border);
border-radius: 24px;
background: var(--sp-cream);
}
.sp-faq__nav-title {
margin-bottom: 15px;
font-size: 1.02rem;
font-weight: 800;
}
.sp-faq__nav a {
display: block;
padding: 9px 0;
color: var(--sp-muted);
font-weight: 650;
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}
.sp-faq__nav a:hover {
color: var(--sp-indigo);
transform: translateX(3px);
}
.sp-faq__groups {
display: grid;
gap: 34px;
}
.sp-faq__group {
scroll-margin-top: 24px;
}
.sp-faq__group-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.sp-faq__group-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 16px;
background: rgba(39, 16, 178, 0.09);
color: var(--sp-indigo);
font-size: 1.25rem;
font-weight: 900;
}
.sp-faq__group:nth-child(2) .sp-faq__group-icon {
background: rgba(18, 158, 183, 0.11);
color: var(--sp-teal);
}
.sp-faq__group:nth-child(3) .sp-faq__group-icon {
background: rgba(255, 149, 84, 0.14);
color: #d85f18;
}
.sp-faq__group:nth-child(4) .sp-faq__group-icon {
background: rgba(39, 16, 178, 0.09);
color: var(--sp-indigo);
}
.sp-faq__group:nth-child(5) .sp-faq__group-icon {
background: rgba(18, 158, 183, 0.11);
color: var(--sp-teal);
}
.sp-faq__group h2 {
margin-bottom: 0;
font-size: clamp(1.55rem, 3vw, 2.15rem);
font-weight: 820;
letter-spacing: -0.035em;
line-height: 1.15;
}
.sp-faq__accordion {
display: grid;
gap: 12px;
}
.sp-faq__item {
border: 1px solid var(--sp-border);
border-radius: 20px;
background: var(--sp-white);
box-shadow: var(--sp-shadow);
overflow: hidden;
}
.sp-faq__item[open] {
border-color: rgba(39, 16, 178, 0.22);
}
.sp-faq__question {
position: relative;
display: flex;
align-items: center;
min-height: 72px;
padding: 19px 64px 19px 24px;
cursor: pointer;
list-style: none;
font-size: 1.03rem;
font-weight: 790;
line-height: 1.35;
}
.sp-faq__question::-webkit-details-marker {
display: none;
}
.sp-faq__question::before,
.sp-faq__question::after {
content: "";
position: absolute;
right: 25px;
top: 50%;
width: 17px;
height: 2px;
border-radius: 999px;
background: var(--sp-indigo);
transform: translateY(-50%);
transition: transform 180ms ease;
}
.sp-faq__question::after {
transform: translateY(-50%) rotate(90deg);
}
.sp-faq__item[open] .sp-faq__question::after {
transform: translateY(-50%) rotate(0deg);
}
.sp-faq__question:focus-visible {
outline: 3px solid rgba(18, 158, 183, 0.34);
outline-offset: -3px;
}
.sp-faq__answer {
padding: 0 24px 23px;
color: var(--sp-muted);
}
.sp-faq__answer p {
margin-bottom: 12px;
}
.sp-faq__answer p:last-child {
margin-bottom: 0;
}
.sp-faq__answer a {
color: var(--sp-indigo);
font-weight: 750;
}
.sp-faq__contact {
margin-top: clamp(54px, 7vw, 82px);
padding: clamp(36px, 6vw, 64px);
border-radius: 30px;
color: var(--sp-white);
background:
radial-gradient(circle at 82% 18%, rgba(255, 149, 84, 0.36), transparent 30%),
linear-gradient(135deg, var(--sp-indigo), #180a70);
box-shadow: 0 26px 70px rgba(39, 16, 178, 0.22);
text-align: center;
}
.sp-faq__contact h2 {
margin-bottom: 14px;
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 850;
letter-spacing: -0.045em;
line-height: 1.08;
}
.sp-faq__contact p {
max-width: 650px;
margin-right: auto;
margin-bottom: 26px;
margin-left: auto;
color: rgba(255, 255, 255, 0.82);
font-size: 1.05rem;
}
.sp-faq__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 14px 25px;
border-radius: 999px;
color: var(--sp-ink);
background: var(--sp-orange);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
font-size: 0.98rem;
font-weight: 820;
line-height: 1;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.sp-faq__button:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}
.sp-faq__button:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.72);
outline-offset: 4px;
}
@media (max-width: 860px) {
.sp-faq__container {
width: min(100% - 28px, 1080px);
}
.sp-faq__layout {
grid-template-columns: 1fr;
}
.sp-faq__nav {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 18px;
}
.sp-faq__nav-title {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.sp-faq__hero {
padding: 68px 0;
}
.sp-faq h1 {
font-size: clamp(2.45rem, 13vw, 3.5rem);
}
.sp-faq__nav {
grid-template-columns: 1fr;
padding: 22px;
}
.sp-faq__question {
min-height: 66px;
padding: 18px 56px 18px 20px;
font-size: 0.98rem;
}
.sp-faq__question::before,
.sp-faq__question::after {
right: 21px;
}
.sp-faq__answer {
padding: 0 20px 21px;
}
.sp-faq__contact {
padding: 36px 24px;
border-radius: 25px;
}
}
@media (prefers-reduced-motion: reduce) {
.sp-faq__nav a,
.sp-faq__question::before,
.sp-faq__question::after,
.sp-faq__button {
transition: none;
}
}
</style>
<main class="sp-faq">
<section class="sp-faq__hero" aria-labelledby="sp-faq-title">
<div class="sp-faq__container">
<p class="sp-faq__eyebrow">Help Centre</p>
<h1 id="sp-faq-title">Frequently asked questions.</h1>
<p class="sp-faq__lead">
Find quick answers about orders, delivery, returns, products and shopping
with Scooth Pet.
</p>
</div>
</section>
<section class="sp-faq__content">
<div class="sp-faq__container">
<div class="sp-faq__intro">
<p class="sp-faq__eyebrow">How can we help?</p>
<h2>Everything you need to know.</h2>
<p>
Select a question below to view the answer. For anything not covered here,
our customer care team will be happy to help.
</p>
</div>
<div class="sp-faq__layout">
<nav class="sp-faq__nav" aria-label="FAQ categories">
<p class="sp-faq__nav-title">Browse by topic</p>
<a href="#orders">Orders & payments</a>
<a href="#delivery">Delivery & tracking</a>
<a href="#returns">Returns & refunds</a>
<a href="#products">Products & care</a>
<a href="#account">Account & support</a>
</nav>
<div class="sp-faq__groups">
<section class="sp-faq__group" id="orders" aria-labelledby="orders-title">
<div class="sp-faq__group-header">
<div class="sp-faq__group-icon" aria-hidden="true">01</div>
<h2 id="orders-title">Orders & payments</h2>
</div>
<div class="sp-faq__accordion">
<details class="sp-faq__item">
<summary class="sp-faq__question">How do I place an order?</summary>
<div class="sp-faq__answer">
<p>
Choose the product you would like, select any available options,
add it to your basket and proceed to checkout. At checkout, enter
your delivery details and choose one of the payment methods shown.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How will I know my order was successful?</summary>
<div class="sp-faq__answer">
<p>
After completing checkout, you should see an order confirmation
page and receive a confirmation email. Please check your spam or
junk folder if it does not arrive shortly after your purchase.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Can I change or cancel my order?</summary>
<div class="sp-faq__answer">
<p>
Contact us as soon as possible after ordering. We will do our best
to help, but changes or cancellations may not be possible once an
order has entered processing or has been dispatched.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Which payment methods do you accept?</summary>
<div class="sp-faq__answer">
<p>
The payment methods currently available are displayed securely at
checkout. Availability may vary depending on your device, location
and the payment options enabled on our store.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Is my payment information secure?</summary>
<div class="sp-faq__answer">
<p>
Payments are processed through secure payment providers available
through our Shopify checkout. Scooth Pet does not directly store
your full card details.
</p>
</div>
</details>
</div>
</section>
<section class="sp-faq__group" id="delivery" aria-labelledby="delivery-title">
<div class="sp-faq__group-header">
<div class="sp-faq__group-icon" aria-hidden="true">02</div>
<h2 id="delivery-title">Delivery & tracking</h2>
</div>
<div class="sp-faq__accordion">
<details class="sp-faq__item">
<summary class="sp-faq__question">Where does Scooth Pet deliver?</summary>
<div class="sp-faq__answer">
<p>
We currently focus on deliveries within the United Kingdom. Any
available delivery destinations and charges will be shown at
checkout after you enter your address.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How long will delivery take?</summary>
<div class="sp-faq__answer">
<p>
Estimated delivery information is shown during checkout and may
also appear in your order confirmation. Delivery times can vary by
product, destination, carrier availability and seasonal demand.
</p>
<p>
Please visit our
<a href="/pages/delivery-info">Delivery Information</a>
page for the most relevant details.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How can I track my order?</summary>
<div class="sp-faq__answer">
<p>
When tracking is available, we will send it by email after your
order has been dispatched. Tracking updates may take a little time
to appear after the carrier receives the parcel.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Why did my order arrive in separate parcels?</summary>
<div class="sp-faq__answer">
<p>
Some items may be prepared or dispatched separately. This means
products from the same order can occasionally arrive in more than
one parcel and on different days.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">What should I do if my parcel is delayed?</summary>
<div class="sp-faq__answer">
<p>
First, check the latest tracking information and confirm that the
delivery address is correct. If there has been no meaningful update
or the estimated delivery window has passed, contact our team with
your order number.
</p>
</div>
</details>
</div>
</section>
<section class="sp-faq__group" id="returns" aria-labelledby="returns-title">
<div class="sp-faq__group-header">
<div class="sp-faq__group-icon" aria-hidden="true">03</div>
<h2 id="returns-title">Returns & refunds</h2>
</div>
<div class="sp-faq__accordion">
<details class="sp-faq__item">
<summary class="sp-faq__question">Can I return an item?</summary>
<div class="sp-faq__answer">
<p>
Eligible items may be returned in accordance with our Returns &
Refunds Policy. Items should be unused, in their original condition
and returned with any original packaging where reasonably possible.
</p>
<p>
Please read our
<a href="/pages/returns-refunds">Returns & Refunds</a>
page before sending anything back.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How do I start a return?</summary>
<div class="sp-faq__answer">
<p>
Contact our customer care team with your order number, the item you
wish to return and the reason for the return. Please wait for our
instructions before posting the item.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">What if my item arrives damaged or incorrect?</summary>
<div class="sp-faq__answer">
<p>
Contact us promptly with your order number and clear photographs of
the item, packaging and shipping label. This helps us review the
issue and offer the most appropriate solution.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">When will I receive my refund?</summary>
<div class="sp-faq__answer">
<p>
Once an approved refund is processed, it is sent to your original
payment method. Your bank or payment provider may require additional
time before the funds appear in your account.
</p>
</div>
</details>
</div>
</section>
<section class="sp-faq__group" id="products" aria-labelledby="products-title">
<div class="sp-faq__group-header">
<div class="sp-faq__group-icon" aria-hidden="true">04</div>
<h2 id="products-title">Products & care</h2>
</div>
<div class="sp-faq__accordion">
<details class="sp-faq__item">
<summary class="sp-faq__question">How do I choose the right size?</summary>
<div class="sp-faq__answer">
<p>
Check the size guide and measurements shown on the product page.
Measure your pet carefully and compare the result with the guide
rather than choosing only by breed or usual size.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Are product colours always exactly as shown?</summary>
<div class="sp-faq__answer">
<p>
We aim to display colours accurately, but shades may look slightly
different depending on lighting, screen settings and normal
manufacturing variation.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How should I clean or care for a product?</summary>
<div class="sp-faq__answer">
<p>
Follow the care instructions on the product page, packaging or
label. Where no specific instructions are provided, avoid harsh
chemicals and discontinue use if the item becomes damaged.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Should pets be supervised while using products?</summary>
<div class="sp-faq__answer">
<p>
Yes. Pet products should be used responsibly and under suitable
supervision, especially toys and chewable items. Remove any product
that becomes damaged, loose or unsuitable for continued use.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">Will sold-out products return?</summary>
<div class="sp-faq__answer">
<p>
Some products may be restocked, while others may be seasonal or
discontinued. Check the product page regularly or contact us to ask
about a particular item.
</p>
</div>
</details>
</div>
</section>
<section class="sp-faq__group" id="account" aria-labelledby="account-title">
<div class="sp-faq__group-header">
<div class="sp-faq__group-icon" aria-hidden="true">05</div>
<h2 id="account-title">Account & support</h2>
</div>
<div class="sp-faq__accordion">
<details class="sp-faq__item">
<summary class="sp-faq__question">Do I need an account to place an order?</summary>
<div class="sp-faq__answer">
<p>
If guest checkout is available, you can order without creating an
account. Creating an account may make it easier to view order
information and manage your details.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">I have not received an email from Scooth Pet. What should I do?</summary>
<div class="sp-faq__answer">
<p>
Check your spam, junk and promotions folders. Also confirm that the
email address entered at checkout is correct. If you still cannot
find the message, contact us with your name and order details.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">How can I contact Scooth Pet?</summary>
<div class="sp-faq__answer">
<p>
Visit our <a href="/pages/contact">Contact</a> page and send us a
message. Including your order number, where relevant, will help us
assist you more quickly.
</p>
</div>
</details>
<details class="sp-faq__item">
<summary class="sp-faq__question">When will I receive a reply?</summary>
<div class="sp-faq__answer">
<p>
We aim to respond as quickly as possible. Response times may be
longer during weekends, public holidays, promotions and periods of
unusually high demand.
</p>
</div>
</details>
</div>
</section>
</div>
</div>
<section class="sp-faq__contact" aria-labelledby="sp-faq-contact-title">
<h2 id="sp-faq-contact-title">Still need a little help?</h2>
<p>
Send our customer care team a message and include your order number whenever
your question relates to an existing purchase.
</p>
<a class="sp-faq__button" href="/pages/contact">Contact Scooth Pet</a>
</section>
</div>
</section>
</main>