Inserting html + css code

Store Design
,

Topic summary

A Shopify store owner seeks help integrating custom HTML and CSS code for a collapsible FAQ section on their basic Shopify site. They have open-source accordion code but are unsure where to insert it within Shopify’s file structure.

Key Details:

  • Target page: Custom FAQ/Q&A page
  • Code includes: CSS variables for animations, accordion styling, and chevron icons
  • Main question: Which .css or .liquid file should contain this code

Technical Context:
The provided CSS contains:

  • Custom properties for sizing, animations, and transitions
  • Accordion component styling with slide effects
  • SVG-based chevron icon implementation
  • Font Awesome icon licensing references

The discussion remains open with no responses yet. The user needs guidance on Shopify theme file structure and proper code placement for custom collapsible content functionality.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

hello, i have currently a basic shopify want to have a customized collapsible content here (link) and i want to have a customized html + css code that i found as open source, but i dont know how to insert it in my code, and which .css or .liquid file inside the shopify code editting should i insert this code:

:root {
	--size-header: 2.25rem;
	--size-accordion-title: 1.25rem;
	--size-accordion-content: 1rem;
	--animation-speed: 100;
	--slide-ease: cubic-bezier(0.86, 0, 0.07, 1);
	--slide-duration: calc(400ms * 100 / var(--animation-speed));
	--slide-delay: calc(450ms * 100 / var(--animation-speed));
	--circle-duration: calc(900ms * 100 / var(--animation-speed));
}

*,
*::before,
*::after {
	position: relative;
	left: 0;
	top: 0;
	box-sizing: border-box;
}

a,
p,
h1 {
	margin: 0;
}

html {
	height: 100%;
}

body {
	background-color: hsl(4, 91%, 60%);
	font-family: Nunito, Arial, Helvetica, sans-serif;
	font-weight: 600;
	margin: 0;
	display: grid;
	place-items: center;
	padding: 2rem 2rem;
	min-height: 100%;
}

html,
body {
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}

main > h1 {
	font-size: var(--size-header);
	margin-bottom: 1.25rem;
	color: #fff;
}

::selection {
	background-color: rgba(0, 0, 0, 0.4);
}

.accordion {
	--circle-x: 1.8rem;
	--circle-y: 0;
	--circle-r: 200%;
	--circle-bg: #fff;
	color: #000;

	background-color: var(--circle-bg);
	max-width: 56ch;
	margin-bottom: 1rem;
	border-radius: min(8px, 0.5rem);

	display: grid;
	grid-template-rows: 0fr 0fr;
	transition-timing-function: var(--slide-ease);
	transition-duration: 200ms, 200ms, var(--slide-duration);
	transition-property: opacity, box-shadow, grid-template-rows;
	transition-delay: 0ms, 0ms, var(--slide-delay);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	opacity: 0.9;
}

.accordion:not(:target):hover {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}

.accordion:not(:target):active {
	opacity: 1;
	box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.3);
}

.accordion,
.content {
	overflow: hidden;
}

.accordion:target {
	--d: 90deg;
	grid-template-rows: 0fr 1fr;
	transition: grid-template-rows var(--slide-ease) var(--slide-duration)
		var(--slide-delay);
}

.wrapper {
	padding-block: 0 1.05rem;
	padding-inline: 1.25rem;
}

.content {
	font-size: var(--size-accordion-content);
	line-height: 140%;
}

.content p {
	margin-bottom: 1rem;
}

.content a {
	color: currentColor;
	font-weight: 800;
	text-decoration: underline;
}

main :last-child,
.content :last-child {
	margin-bottom: 0;
}

.title a {
	padding: 1rem 1.25rem;
	font-size: var(--size-accordion-title);
	font-weight: 800;
	color: currentColor;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	place-items: center;
}

.title a::before {
	--chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath fill='white' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
	content: "";
	left: 0;
	top: 0;
	width: 0.65rem;
	aspect-ratio: 320 / 512;
	display: inline-block;
	margin-right: 0.75rem;
	transform: rotate(var(--d, 0deg));
	transition: transform var(--slide-ease) var(--slide-duration)
		var(--slide-delay);
	mask-image: var(--chevron-icon);
	mask-size: 100% 100%;
	-webkit-mask-image: var(--chevron-icon);
	-webkit-mask-size: 100% 100%;
	background-color: currentColor;
}

.accordion::before,
.accordion::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--circle-bg);
	mix-blend-mode: difference;
	transform-style: preserve-3d;
	transition-timing-function: ease;
	transition-property: opacity, clip-path, visibility;
	pointer-events: none;
	clip-path: circle(var(--r) at var(--circle-x) var(--circle-y));
	border-radius: inherit;
	z-index: 4;
}

.accordion::before {
	--r: 0%;
	transition-delay: var(--circle-duration), var(--circle-duration), 0ms;
	transition-duration: 0ms, var(--circle-duration), 0ms;
	opacity: 0;
}

.accordion:target::before {
	--r: var(--circle-r);
	transition-delay: 0ms, 0ms, 0ms;
	transition-duration: 0ms, var(--circle-duration), 0ms;
	opacity: 1;
}

.accordion::after {
	--r: var(--circle-r);
	transition-delay: 0ms, 0ms, var(--circle-duration);
	transition-duration: 0ms, var(--circle-duration), 0ms;
	visibility: hidden;
	opacity: 1;
}

.accordion:target:after {
	--r: 0%;
	transition-delay: 0ms, 0ms, 0ms;
	transition-duration: 0ms, 0ms, 0ms;
	visibility: visible;
	opacity: 0;
}

.title a:focus-visible {
	background-color: hsl(0, 100%, 90%);
	outline: none;
}

.accordion:target .title a:focus-visible {
	background-color: hsl(183, 100%, 93%);
}

i would like to get some help with it in order to replace with my current collapsible content. thanks