My problem is that when trying to insert some kind of a background image in Shopify, it never shows anything.
I have a navigation bar that has a pattern which the client wants and when I try to enable it, again nothing happens.
The code I'm using on that css background line (from googling around) is
background:url( "{{'navBggreen.jpg' | asset_url }}")
I've also tried
background:url( {{'navBggreen.jpg' | asset_url }} )
and nothing. Tutorials or any kind of documentation is extremely scarce for Shopify so...
Anyway, does anyone know how to get this working?
Make sure your css file has .liquid extension so that it can process liquid code as asset_url is part of liquid. so make sure, your css file name is something like style.css.liquid.
You call it like this from your CSS file in Assets:
.nav{background: url("navBggreen.jpg");}
if you want to include images in your layout you will have to use the asset_url filter. However, if your images are called via a CSS stylesheet then you do not need to use asset_url - except if they are used in a theme settings form. Take out the asset_url and it should work ok.
Related
My test site has a huge loading time and test shows I can cut performance by minifying JS and CSS assets.
What Shopify uses to minimize JavaScript and CSS?
Thanks
Shopify doesn't have the ability to auto-minify your Javascript (you need to do that yourself), but it does have the ability to auto-minify your CSS by giving it an 'scss' suffix, then including it in your site with the suffix .scss.css
So if your CSS file is currently named theme.css.liquid and included in your site with {{ 'theme.css' | asset_url | stylesheet_tag }}:
Change the name of your CSS file to end with .scss (or .scss.liquid, if the file in question ends with .css.liquid) - so in this case, the file becomes theme.scss.liquid
Change the reference to the file to end in .scss.css - so in this case, the include becomes {{ 'theme.scss.css' | asset_url | stylesheet_tag }} (Note that a .liquid suffix, if any, is not included here)
The result will be a minified CSS file built from your un-minified source code.
As John Bell mentions in a comment to your main post, though, minification alone probably won't resolve the underlying problems. If you look at the waterfall results from your speed test, look for files that have a long 'Waiting' or 'TTFB' time - those are files that are taking a long time for Shopify to compile, and indicate that your Liquid code is what needs to be optimized. Also look for files with a long 'Downloading' time, and see if those files could be compressed or only deferred so that they only load after the initial page has completed.
I currently face the following problem:
I included a couple of assets (PNG images) in src/assets/images/img.png. Inside the snippet where I want to display the image, I wrote this (as defined in the documentation):
<img src="{{ '../assets/images/img.png' | asset_url }}"/>
When executing slate build I can also see those images show up during the build process in the log. But when I start my dev server (npm run start:dev) the link to the image is broken and it doesn't get displayed. Any thoughts on how to solve this issue?
Your link is built all wrong. The Liquid filter asset_url resolves the path for you. All you need to provide is the name of the asset. So if you rewrite your Liquid correctly it would look like this:
{{ 'img.png' | asset_url }}
Reads as hey Shopify, go find img.png in the assets and return for me the complete path to it.
I was wondering if it is possible to modify <script> tags on the fly with the Shopify API?
Scenario:
A page renders some <script> tags.
Before the <script> get rendered, my app adds an attribute to them, so that the tag is rendered with the attribute.
Thanks in advance
No. Your script is taken from Shopify with a GET request where it is inserted into the Liquid rendering pipeline for eventual inclusion in the client's HTML payload. If you want that script to do custom stuff, have it do a callback with an App Proxy which would then make it dynamic.
Read this to learn a lot: https://help.shopify.com/api/sdks/shopify-apps/modifying-online-store/use-javascript-responsibly
A Shopify App with the write_themes scope (see Shopify Documentation) can access and edit Assets and the Theme. Your editing of the Theme could include the modification of a <script> tag to as your put it "add an attribute".
Take into consideration whether the Theme designer hard coded the URL of the script or used liquid tags such as {{ 'example.js' | asset_url | script_tag }} to create the asset URL.
Hello guys I have two small questions about my facebook application link and JS SDK. So let me explain:
1- Well as I understood from Facebook JS SDK, the should be left just empty. But still I am a little dizzy and I want to make sure whether we should put our page content into it or it should be left empty?
Please make me sure about it.
2- I have put some changes in my css and markup of my page but after one day I can not see some of the changes in my facebook application link.
How can I see the result of changes if there is such a way??
Thank you very much indeed.
Let me answer this for you:
1) Yes, It should be left empty and here's the info on why it's required quoted from JS SDK docs:
The JavaScript SDK requires the fb-root element in order to load properly and a call to
FB.init to initialize the SDK with your app ID correctly.
The fb-root element must not be hidden using display: none or
visibility: hidden, or some parts of the SDK will not work properly in
Internet Explorer.
The SDK inserts elements into fb-root which expect to be positioned
relative to the body or relative to an element close to the top of the
page. It is best if the fb-root element is not inside of an element
with position: absolute or position: relative. If you must place the
fb-root element inside of a positioned element, then you should also
give it a position close to the top of the body or some parts of the
SDK may not work properly.
2) It's most probably a cache problem, there's a similar question with an issue of css which has been answered previously: Caching for css content for iphone FB APP
Also to get your browser/visitors browser to re-fetch your CSS file, The trick is to pass a query param/variable at the end of the CSS file url like so: ?v=1
<link rel="stylesheet" href="css/style.css?v=1">
This will automatically make your browser or maybe even facebook to fetch your CSS file again with the new changes. Make sure to change the number everytime you update your files so you could see the changes instantly.
I'm having a problem with the django templating system.
I have a template with html, css, and js. When I use this template for my site, all of its margins and paddings change, and my template seems to become another template. For example margin 0 auto; seems to become margin 0 0;.
Note: I have a temp.html file and, for example, in the index of my home app, I have a file index.html that contains a {% extends "temp.html" %} tag and other block that they are in temp.html. (ed: ?)
If you need more code, please let me know.
You will need to make use of Django's built-in media hooks and relative URLs:
Django media URLs in CSS files