I am struggling to find an ideal solution to change the product image based on the variant selection. I do not see any identifier on the product images using which I could do a cross matching for js change event.
Every theme has this feature, so I guess, there is a pretty good solution to this.
Can you please help me showing the right path?
Thank you.
It depends on the design of the page and what are using.
For example if you plan to show a single image for the variant change you can use the variant image directly.
But if you plan to use a gallery of images there are different approaches. The one I use in most cases is to set an ALT attribute to each image with the name of the color that it's pointing to. Based on those ALT attributes I use some JS logic to filter specific images and show the correct ones.
Other approaches will be to use metafields, tags, linklists etc... A lot of different ways, but each is tied to some JS logic and some bad user experience for the administration since he will be required to switch between different pages and to create different elements in order to tie them to the images.
The final way is to use a separate APP for this.
Related
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
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 am creating a custom module with additional part numbers on a separate tab in the products screen. I have built the module, but am having trouble figuring out how to display the information so it matches the layout in the attached image. I have tried tree view but have not been able to get the fields on the same line. Can this only be accomplished through css or is there a table view that I am not aware of?
I also need to make sure that all of the information in row 1 stays tethered together for additional forms, etc. My plan is to make the field names for each row end with a different number (i.e. x_mfrname1,x_mfrpn1,x_mfrname2,x_mfrpn2, etc.). Can somebody please just tell me if I am on the right track. This is the initial Odoo setup for a client of mine and I don't want them to come back to me down the line and find out I forgot something. I have been scouring the internet and reading a few books but I am not completely confident.
Here is a link to a layout of what I am talking about:
MFG Part Number Tab
Thanks!
class sub_part_details(models.Model)
_name='sub.part.detail'
primary_pn=fields.Boolean('Primary P/N')
obsolete=fields.Boolean('Obsolete')
pn=fields.Char('P/N')
desc=fields.Char('Description')
upgrade=fields.Char('Upgrade')
part_detail_id=fields.Many2one('part.details')
class part_details(models.Model)
_name='part.details'
cat=fields.Char('CAT')
sub_ass=fields.Char('Subassembly')
main_ass=fields.Char('Main Assembly')
notes=fields.Text('Notes')
sub_details_ids=fields.One2Many(''sub.part.detail','part_detail_id')
It might be helpful
I've just installed Flags module and it looks awful when on the bottom I see "Flag this item" link. The only thing I've found in configuration is enabling it to show as normal link. Still I haven't found how to change position of this link. Is it even possible to change link's place? I have installed CCK Blocks but it doesn't give me any option to get rid of it. If someone know or suspect what's possible - please help me.
Try the Display Suite module, this module is integrated with many modules like flag, title etc...
Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your
nodes, views, comments, user data etc. the way you want without having
to work your way through dozens of template files. A predefined list
of layouts (D7 only) is available for even more drag and drop fun!
https://drupal.org/project/ds
You can move and generate custom layouts for the fields/properties on the entity display formatter: teaser, full...
I am so stuck trying to find an answer for this and I can't find it anywhere. Yet I have seen it done online. Basically all I want to do is have images show instead of the text.
Available finishes: White, Antique, Cinnamon
And instead of the text, they can select an image representing each color.
Example: http://www.amazon.com/Sundesa-BB28-MC01-BlenderBottle%C2%AE-Classic-28-ounce/dp/B0018G4ZEW/ref=sr_1_1?ie=UTF8&qid=1363033335&sr=8-1&keywords=blender+bottle
I DO NOT need the image to change as you select a color. I just need the color images to show...
You've probably found the answer by now, but are you looking for something like this? It worked well for us. http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products
Inside the theme, shopify usually create a form with HTML tag option. Using liquid (Shopify language you use on the front end) you may add HTML tag img (image). You could load the own product image (probably you need to set the order properly matching variants with images). Another option is to load an image inside the theme assets, but you would have to upload it one by one. Hope it may give any idea...