Add CSS file to Shopify

CoderHomie answered on May 23, 2022 Popularity 1/10 Helpfulness 1/10

answer Add CSS file to Shopify

related shopify include css file

related create modal using shadcn dialog

Add CSS file to Shopify

Comment

// To create your own CSS file go to store admin > 
// Online Store > Themes > Actions > Edit code > 
// Assets folder, and click on Add a new asset. On 
// the pop-up select Create a blank file and name it 
// whatever you want (for example, custom.css)

// Then, add the following code to your theme.liquid 
// file, between the <head> </head> tags:

{{ 'custom.css' | asset_url | stylesheet_tag }}

// NB: Don't forget to name your asset file accordingly in
// the code. (must match the filename that you created)

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: add css file shopify

Link to this answer
Share Copy Link

Contributed on Jan 14 2025

CoderHomie

0 Answers Avg Quality 2/10

Closely Related Answers

shopify include css file

Comment

<!-- add this line after creating your custom.css file -->
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}" type="text/css">

Popularity 9/10 Helpfulness 10/10 Language html

Source: Grepper

Tags: css file fi

Link to this answer
Share Copy Link

Contributed on May 23 2022

CoderHomie

0 Answers Avg Quality 2/10

create modal using shadcn dialog

Comment

export type TabValue = 'account' | 'security' | 'history' | 'connections'

export const isValidTabValue = (value: string): value is TabValue => {
    return [
        SETTINGS_TAB_VALUE.ACCOUNT,
        SETTINGS_TAB_VALUE.SECURITY,
        SETTINGS_TAB_VALUE.HISTORY,
        SETTINGS_TAB_VALUE.CONNECTIONS
    ].includes(value as TabValue)
}

export const SETTINGS_TAB_VALUE = {
    ACCOUNT: 'account',
    SECURITY: 'security',
    HISTORY: 'history',
    CONNECTIONS: 'connections'
} as const


const SettingsModal = ({
    children,
    className,
}: {
    children: React.ReactNode
    className?: string
}) => {
    const router = useRouter()
    const pathname = usePathname()
    const searchParams = useSearchParams()

    const tab = searchParams.get('tab') as TabValue

    const handleTabChange = (value: string): void => {
        if (isValidTabValue(value)) {
            router.push(`?tab=${value}`, { scroll: false })
        } else {
            console.error(`Invalid tab value: ${value}`)
        }
    }

    const handleOpen = () => {
        router.push(`${pathname}?tab=${SETTINGS_TAB_VALUE.ACCOUNT}`, { scroll: false })
    }

    const handleClose = () => {
        router.push(pathname, { scroll: false })
    }

    // TODO: Swap out Icons for equivalent library choice

    return (
        <Dialog open={!!tab} onOpenChange={open => !open && handleClose()}>
            <DialogTrigger onClick={handleOpen} className={className}>
                {children}
            </DialogTrigger>
            <DialogContent className="rounded-2xl p-0 max-w-[78%] gap-0">
                <DialogHeader className="p-2 border-b border-nuetral-100">
                    <div className="flex gap-2 items-center">
                        <div className="bg-neutral-100 border border-zinc-200 h-10 w-10 rounded-full grid place-items-center">
                            <SettingsIcon width={24} height={24} className="text-product-primary" />
                        </div>

                        <DialogTitle className="font-medium text-gray-700">Settings</DialogTitle>
                    </div>
                </DialogHeader>
.....

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dialog javascript using

Link to this answer
Share Copy Link

Contributed on Jan 11 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Add CSS file to Shopify

Contents

More Related Answers

Add CSS file to Shopify

Closely Related Answers

shopify include css file

create modal using shadcn dialog

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.