In my shopify site, I have multiple facet search attributes like weight, price, color etc to be shown as slider with input box range in the algolia search UI. Is it possible to create a customized widget for a slider with range input box for a facet, or any other solutions to meet the requirements....Check out the below image for reference...
Related
When I enter a SKU# into the default Shopify search bar, the predictive search does not show the item I typed in, however, when I click search and am taken to a new URL (search page), I do see the product with the SKU number I searched, but it is mixed up with random products.
I expect to only see the item I have searched for via the SKU#
I'm currently working on a Shopify project and I need to add color swatches on the product pages. I already did it in other projects using the product variants. But in this case the colors are different products. I found some examples on shopify:
Any help would be much appreciated!
I'm trying to display only the images of the colour variant I have selected on the product page. They're currently being pulled in by their Img Alt text, which is in the product list CSV.
I would to hide the thumbnails of the other colours when they're not selected, and switch to them when they are, including replacing the larger featured image.
Any help would be greatly appreciated. Thank you.
product-template.liquid https://pastebin.com/AyaDpNG4
theme.js https://pastebin.com/KBniw7J8
Link to Product page
https://4158qu33fstl4w69-53119090861.shopifypreview.com/products/lightweight-trainers
Link to CSV
https://docs.google.com/spreadsheets/d/1lc8XcHDMyMFGAkegTRrBLLTlQN8oNVbU430vT0aeP4Y/edit?usp=sharing
From a data standpoint, there is unfortunately no way to do this in vanilla shopify (without an app or using metafields to set up variant images).
The reason for this is that variants only allow one featured image in the data structure. For this reason, you'll likely need to go the app route.
An alternate "hacky" approach would be to add slugs to the end of your image names ('-maroon', '-black', '-all') and then use javascript to match up the images to the currently active variant. This would always be a bit risky and require work when uploading images, though.
Here are some APP, but most of the APPS over Shopify has paid.
Variant Image
Wizard
Variant Image Automator
I would like to show color swatches on Shopify collection page facets that is controlled by Algolia instant search.
I read algolia official facets type guide, but not able to get the solution.
This is what i would like to show.
Does anyone know if this is possible, or how to go about it?
I posted to the algolia discourse, but did not get any answers on it.
https://discourse.algolia.com/t/to-show-color-swatches-in-facets-on-shopify-collection-page/11827
Already checked related questions but did not get what i wanted.
Color swatch on collections page I Shopify
Add color swatches to Collection page Shopify
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