Based on answers to this question, I've added BOTH checkout.scss.liquid (for responsive checkout, which is what I am using) and checkout.css.liquid (when scss one failed to do anything) to Assets. According to the answers I found, Shopify will search for these filenames and include them on the checkout pages. This doesn't work for me.
One of these answers also included a screenshot of the Checkout settings page (Settings > Checkout > Customize checkout). The screenshot shows a lot more options than what I see. All I see are:
1) "Use a logo" drop down
2) Tagline
3) Order Summary and Text Entry Fields - Background
4) Colors - Accent
For example, the screenshot shows 3 options under Colors - Accent, Buttons, Call to Action. (would be nice to be able to change the button color without trying to get the css file to work)
You can't use custom CSS for the checkout unless you're in the Shopify Plus plan. More details at: https://help.shopify.com/themes/development/templates/checkout-scss-liquid
In all other plans you just able to use the options you see in your theme customizer (like you already named).
Related
Which ways are possible to edit the live preview of the product page in Shopify with Inputboxes next to it?
Let's say the product is a poster, and i want to add a custom text on it.
When typing into the inputbox the text changes in real time on the product.
Can this be implemented in the shopify code with the basic version of shopify?
Or does this necessarily needs an app?
ADDITIONALLY:
Let me go a bit deeper. I have a code that can generate a QR code.
Now i want that the QR code to be previewed in the product. Now position and color of the QR code is different from any product. Would that need an app?
Yes you can to an extent.
First the ground rules:
You can't modify the product from the front-end and update the content or media in the back-end - this would be a huge security hole
The changes applied to the product will be visible only to the user who changed them
The solution is to use Javascript and update the content of the front-end. If you like to store the changes for that specific user you can save them as cookie or localstorage.
If you like to share this change to other people you will need to add a custom parameter in the URL of the page and generate the content from it and share that url.
Each one of these steps will require some custom Javascript that will affect only the user in question, if you like to modify the product in the back-end directly you will need some kind of an app for this.
On my mind it can be done if the dynamic text is applied over product image.
Detailed code would be too long to write here but here are the steps:
Add an input to your product form to add a custom property (https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503)
Write a Javascript function to get input value in real time
Use this value to display it in a div in product image container
Position this div in CSS as absolute and style it as you wish
While image container position should be set as relative in CSS
HTH
I tried following this guide to create an alternative template for customization.
https://shopify.dev/tutorials/customize-theme-create-alternate-templates
However, every single section edit I makee are global.
For example: I have two page template: pages.alternative1.liquid and pages.alternative2.liquid
Whenever I edit a section on a page with pages.alternative1.liquid, the same
edit affects the same section on pages.alternative2.liquid as well. Is this normal behavior from
Shopify? How should I edit the page then so that a change in one section
doesn't affect all template?
*Note: I am editing the Debut default theme
using Shopify editor: Theme => Customize
Best Regards
Yes this is a normal behavior.
Static sections ( they are the section that are called like so {% section 'your section' %} ) share content between them. This means that if you edit one anywhere it will update everywhere you use it.
On another hand section that are used on the homepage via the {{content_for_index}} tag are dynamic and you can create the same section with different content. (but only on the homepage or where the tag in question is present)
So if you like to have different content on the page a single section will not do you any good. You can create multiply sections with different names in order to use them on different pages, but if you have 5-10+ page it's not a viable option, since it will become too much of a cluster of section files.
We use Bigcommerce Stencil theme for our store, but we have some issue with a checkout page. We don't need have Shipping Details before Shipping Method because we have only Click&Collect option, without shipping. How can we change an order of questions in a checkout page and put Shipping Method before Shipping Details or maybe just hide it, as you pick Click&Collect option? Is it possible to change checkout.php or maybe add some JavaScript code for this? Thank you.
You should be able to modify what is happening on the checkout page by making your changes to checkout_express.html.
In Stencil, I found that the checkout_express.html file may not be available in the Stencil Theme Editor (Storefront Design -> My Themes, click on the "Customize" button on your current theme). If this is the case, you may need to go and change the setting for your checkout to allow for modification. Go to Advanced Settings -> Checkout and select "Custom One Page Checkout (for developers)" and Save your changes. This will set you up to be able to edit checkout_express.html.
Next, go to Storefront Design -> Design Options, and select the "More" navigation item. You should now have the option "Template Files". Selecting this option will give you a list of files for the current template; checkout_express.html should be among them. Find the file, and click on the ellipsis (...) on the right side of the screen for the file and select "Edit". That should open a new window with an in-browser editor that will allow you to make adjustments to the checkout page layout as you see fit.
We designed and developed a custom theme for BigCommerce using Stencil for a client.
After an order is submitted, the finishorder.php page is shown. I've attached a screenshot. We cannot find a way to modify this page. I know the checkout.php can't be edited other than targeting CSS, is the same true for finishorder.php? By default its showing base pricing. The customers' products use options to create the final price, so products appear cheaper than they actually are after a checkout. We would also like to style the buttons and modify the block listing the products that "Customers also liked" to match the rest of the theme.
Screenshot from Finishorder.php page
It is possible for BigCommerce staff to enable an editable checkout (checkout_express.html) and thank you for your order screen (order.html). This will appear under Design Options > More > Template Files and be accessible through WebDAV.
I have multiple Trac projects with different environments on the same server. I would like to have a list of links to all projects at the top of each project page so I can quickly switch between them with out having to go up to the top level list at /projects/.
The ideal solution would:
not require loading all the Trac environments on every page load.
update automatically when a new project is added.
only require editing the config and/or templates or add a plugin.
work for Trac 0.11.
The NavAddPluggin allows the main trac navigation bar to be customized. You could add menu options for each trac of your projects. To add a new menu item the following is added to the trac.ini file.
[navadd]
add_items = project1
project1.target = mainnav
project1.title = Project One
project1.url = http://webserver/trac_project_1
To sort the order edit the mainnav option in the trac.ini
mainnav = project1,wiki,timeline,roadmap,browser,tickets,newticket,search
To answer the question of how to add a meny using site.html, here is a very basic top header to get you started - paste into the site.html placeholder:
<!--! A top header -->
<py:match path="body" once="True">
<body py:attrs="select('#*')">
<div id="top">
<a py:if="req.href() != '/one'" href="/one">one</a>
<a py:if="req.href() != '/two'" href="/two">two</a>
<a py:if="req.href() != '/three'" href="/three">three</a>
</div>
${select('*|comment()|text()')}
</body>
</py:match>
The example uses very simple logic and just hides the current project . You may want to do it differently, typically using highlighting or similar.
See Trac Layout Recipe for an advanced example. This is the layout in use at edgewall.org to switch between the various projects (Trac, Genshi, Babel, Bitten).
The method described by sudo_o is probably your best bet. It will give you something that is very well integrated into the Trac interface.
However, I wanted to mention a quick-n-dirty alternative that you may find useful. You can configure the logo in the upper-left corner of every Trac page to link to a specific page when clicked. Many Trac installations use this to link back to the start page. The link is configurable, however, and you can make it point to your project listing page. In your trac.ini file:
[header_logo]
src = site/your_logo.png
link = /url/to/projects/page
alt = Click to load projects listing
This method gives you easy access to your projects listing, and doesn't require adding any extra entries to your Trac menus. When you add or remove projects, you don't have to modify every trac.ini file to update the links. The downsides are that it takes an extra click to get to another project and that some users might not find this method as intuitive (setting the alt property helps with this a little).