Incorporating personalized CSS and JavaScript into Shopify

Currently, my project involves integrating vertical tabs into a Shopify page that is utilizing the 'Atlantic' theme. Since this particular theme doesn't come with vertical tabs built-in, I have incorporated external JS and CSS files known as "jquery-jvert-tabs."

I am seeking guidance on how to properly upload these JS and CSS files as assets and link them to the specific page where I intend to implement the vertical tabs. Additionally, I am curious about the best approach for incorporating these elements while also considering any existing style elements present on the page.

javascriptjqueryhtmlcssshopify

Answer №1

To add your filename.js file, simply upload it to the designated assets folder.

After that, insert the following snippet into the theme.liquid file's head section:

{{ 'filename.js' | asset_url | script_tag }}

Don't forget to rename your file and include a .liquid extension

filename.js.liquid

Best of luck!

Answer №2

It seems like the solution you need is the asset_url filter.

To add a JavaScript file to a .liquid file, simply use:

{{ 'script.js' | asset_url | script_tag }}

For a CSS file:

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

Answer №3

To avoid cluttering the global namespace, it is possible to confine JavaScript or CSS to specific areas.

Shopify employs a straightforward if statement in conjunction with the page's handle (e.g. for www.foo.com/abcd/bar - "bar" serves as the handle).

{% if page.handle == "bar" %}
    {{ 'your_custom_javascript.js' | asset_url | script_tag }}
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %}

This method proves particularly beneficial when implementing minor alterations on select pages.

Answer №4

To avoid issues with JS files on Shopify, it is recommended not to use the "Create a blank file" option in the platform. Instead, save your JavaScript file locally as .js (not .js.liquid) and then upload it to the assets folder.

After uploading, you can easily reference the file in the theme.liquid head section using the following code:

{{ 'filename.js' | asset_url | script_tag }}

Background Information:

Shopify tends to set the MIME type to text/x-liquid for new files, especially if liquid is used in the theme, regardless of the actual file extension. This could lead to browser errors like the one seen in Chrome:

Refused to apply style from ... because its MIME type ('text/x-liquid') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Answer №5

Take a look at the theme.liquid file to see how the css and js files are included, and then add your own accordingly. Make sure to upload your custom file to the assets folder.How to Add CSS And JS Check out the attached image for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to execute the delete script, some errors were encountered

The following error has occurred: An issue with the SQL syntax has been detected; please refer to the manual specific to your MySQL server version for guidance on the correct syntax to use near ''sarojini'_bookings WHERE date=2014-07-24 A ...

phphtml

Angular - Ensure completion of a function call before continuing with the code execution

I'm currently working on developing a code snippet that checks for potential adverse drug reactions between two medications. Within my checkForClash() function, there is a call to getCollisionsList(), which is responsible for populating the interacti ...

javascriptangularasynchronousfrontend

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

javascriptc#jquerystringrazor

Click on every sublist within the unordered list items

In this coding example, there are multiple ul and li elements. Upon running the code, you will observe that test1 is positioned 10px from the left as it is nested within TEster, but achieving an additional 10px offset for Tester2 appears to be a challenge ...

htmlcss

Receive a response in fragments from express on the browser

As I work on creating a progress bar to track long-running server-side tasks that may take up to a few minutes, I am exploring different methods to display the progress of each task. While WebSockets and interval polling are options, I prefer using long-po ...

javascriptexpressxmlhttprequestfetchlong-polling

Issue with QuickSand Script not displaying properly on Internet Explorer 7

My website features an edited version of Quicksand that displays correctly on Chrome, Opera, and Firefox, but runs into CSS issues on IE. Oddly enough, when I was using the static version, the CSS displayed properly even on IE until I added the Quicksand e ...

jquerycssquicksand

Engaging in payment processing

Currently facing a significant dilemma. I am utilizing Stripe as my payment gateway, which functions in a two-step process: Collect billing information to generate a token Charge the client using the generated token The issue arises because the token ca ...

javascriptphpjqueryhtmlstripe-payments

The reverse is concealed following a CSS flip transition

After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card": <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Rest of th ...

htmlcss

Updating the active tab in the navigation bar whenever the router navigates

I'm struggling with changing the active tab in Angular 2 and Bootstrap 4. I have managed to get the active tab to change using this code snippet: navbar.component.html <nav class="navbar navbar-fixed-top navbar-light bg-faded"> <button cl ...

htmlcssangularbootstrap-4

Strange outcomes observed with array created from HTML code

html : <input type="text" name="ps[part1['test']]" value="testing multiple array"> Current result : [ps] => Array ( [part1['test'] => testing multiple array ) Expecting result : [ps] => Array ( ...

phphtmlarrays

value assigned to ng-model does not update beyond its scope

My issue involves binding an ng-model to an input field. Despite this, the value of the variable it is connected to does not update outside of the specific div where the directive is defined: <div input-field ng-if="startTypes.selected.value == &a ...

javascriptangularjsangularjs-forms

PHP DOMDocument - Script tag containing Chinese characters is improperly formatted

Can anyone help me figure out why my PHP DomDocument is converting Chinese characters inside a script tag to strange symbols in the output? <?php $html = <<<EOD <!DOCTYPE html> <html> <head> <script> ...

phphtmldomdomdocument

Ways to create a downward expanding navigation menu when collapsed

Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below. https://i. ...

cssbootstrap-4

Exploring VueJS templating: Loading external templates

Being new to Vue.js, I have some experience with AngularJS where we used to load templates like this: template: '/sometemplate.html', controller: 'someCtrl' My question is how can we achieve something similar in Vue? Instead of embeddi ...

javascriptjqueryangularjsvue.js

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

htmlangularjsindexingangularjs-ng-repeatangularjs-ng-click

After modifying the select option, the input field remains disabled

I successfully developed a self-contained code snippet that toggles the enable/disable state of input fields. It works flawlessly on my HTML page. Check it out below: Identification Type: <select name="Identification-Type" id="Identification-Type"& ...

javascriptjqueryhtml

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

htmlcssflexbox

Issue with the table background in Internet Explorer

My website displays a table with a background image that appears normal in FF and Chrome, but not in IE. The background image seems to shift and produce strange results. Can anyone here help me figure out what's causing this issue? Please refer to the ...

csshtmlinternet-explorer

Passing state data from parent to child components in React

I am currently facing an issue with binding the state of a parent component to a child component. Here is a snippet of the code: Parent Component: class ParentForm extends React.Component { constructor(){ super(); this ...

javascriptreactjsreact-reduxmaterial-ui

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

In the process of creating a scripts and styles manager for a WordPress-based single page application, I initially believed that simply loading missing scripts on each route change would suffice. However, I now understand that certain scripts need to be ex ...

javascriptcssreactjsvue.jssingle-page-application