Bigcommerce checkbox addons to product - bigcommerce

Is it possible to have a checkbox on the product page that are upselling the current product? For example if the user wants to buy a computer they might want to add a mouse, is that possible to implement on the product page for the computer by adding a checkbox that says "Add a mouse +50 SEK", and mouse in this case is referring to another existing product?

natively you can add a customized checkbox value to your pdp. You would do this under Products > View > Edit > Customizations. Select checkbox. Then enter rules to increase the price when selected. However, this is not tied directly to the product, so you'd have to run your own custom logic to handle inventory if you go this route.
Another option is to use a picklist. This is in the same location as checkbox. However the difference is that you can directly link this to a product on your storefront and not have to worry about inventory as it can be handled within BC if you select that option.
A third option is to use an app from the App Marketplace. I've used the BuyButtons app + an HTML widget on the pdp in a quick test to see how this would look. It would need some tweaking to get it to how you'd like, but it was fairly straight forward.
There are likely many other ways to accomplish this, though! These are just some native options & an app option. Thanks!

Related

OroCommerce: Configurable Product display in storefront and backoffice

I've created configurable product (internet connection with different speed) following docs, in storefront I see dropdown with product vairants, all is ok.
But in backoffice (when editing shoppingList or creating order) there is always only one variant of product with no ability to quickly select another option (eg change speed to another one) - is this how oro backoffice works and nothing could be changed to make backoffice user quickly navigate between product variants (eg change speed from 1M to 2M by clients phone request)?
Cant even edit product in shopping list
UPD:
If there's no way to see user-friendly configurable product in backoffice than I need to implement smth like button near each product in LineItem which will show popup with product variants. When user will select another option request will be sent to some route and it will run smth like $lineItem->setProduct($newProduct); , grid reloaded and new product variant selected. Is it ok or it will break something in oro?
Where to start for adding that button and popup? Eg I cant edit oro shopping list template, how to properly extend it?
On the line item editing form you cannot change the product, no matter it's configurable or simple. It's done intentionally.
If you want to change the product, you always can remove a line item and add the new one with updated options manually:

Shopify - is it possible to change the preview of a product with a inputbox?

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

How to change in template through the Shopify application

I am trying to write a Shopify application and I want to add a section to the product page when the store owner installed my app. I tried this by adding a custom script tag in the shop template and this tag will load and inject my desired HTML into the page. It's work but it needs to force the store owner to change the product page template and its not user-friendly.
I see some apps in the Shopify app store that can change the product page after you install them without needs add any part to the product page template. How they do this work? I can't find the correct way in the Shopify documents.
You can change the Shopify theme of the shop using The API for Assets:
However as drip mentioned this is not a good idea:
If you change the theme auto-magically via code, you are looking for trouble. A lot of things can go wrong - simply you cannot cater for all themes and their changes over time! So you could possibly leave a broken page after the change. The e-shop owner won't be impressed! Actually a lot of the 1* reviews of apps are for that reason!
What would happen if the eshop owner removes your app? He won't know what code to remove.
So, most apps ask the user to add the app code. They provide detailed instructions of course.
Fyi, another problematic approach is the following:
Some apps may attempt to change the DOM "on the fly", by first locating an existing DOM element (a lot of theme-specific if statements to do that with any degree of success) and, then insert the app's DOM elements.
That's very messy and problematic as well, but at least you do not risk ruining the owner's theme files. In the worst case he can uninstall your app and he 'll be ok.

How to let users create a "custom" product and add to cart

I am developing a custom theme for a client, and the client has asked for a customizable, user-facing product "creation" form, similar in form and function to this pretty nice example from Ollie.
My problem is two-fold:
How to implement this in the BigCommerce dashboard Products section?
How to then go about building this with Stencil?
My initial thoughts are:
How to implement this in the BigCommerce dashboard Products section?
This seems pretty straightforward to me, though I am new to BigCommerce. I am imagining creating a single "Customized Kit" product with an option set containing the different variants that can arise from the customization process.
How to then go about building this with Stencil?
Here is where I'm a bit more muddy due to my lack of experience with BigCommerce and the Stencil structure. My first guess is: I create a custom form component that exposes the "Customized Kit" Product object to the context and then, on "Add Kit to Cart" click, somehow matches the attributes the user just laid out with the closest product variant. From there, however, I am unclear on the specific components that may need to be extended, which event hooks may need to be called, and how to link the whole thing into the "Add to Cart" functionality (I'm guessing I just create a separate add-customized-to-cart.html template).
Thanks, and for reference I am extending the latest Cornerstone theme (2.2.1-rc.2).

Checkout Page Stencil Bigcommerce

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.