Using Shopify variants with CPB Custom Product Builder

The variants that you can create in the Shopify interface are not used by the CPB app directly and can't be used together without custom code. We can't provide instruction for such a custom code, because it depends on the theme of the store a lot. However, in this article, you can find an explanation of how Shopify variants can work together with CPB.

Add to cart method

Options and choices that you create in the CPB app do not correspond to the variants. Data about the options you created is kept separately and can't be linked to the variants.

If you wish to use customizable products together with Shopify variants, you will need to use either the Atuo-generated products method or the Hybrid-generated variants method. You can check this article for more background.

If you try to use Pre-generated variants - variants that the CPB app will generate will rewrite the variants that you created manually in Shopify.

Personalize button mode

In order to display Shopify variants together with CPB, you will need to use the Personalize button mode. With this mode, your clients will first see Shopify variants and a Personalize button, which will lead them to the CPB interface.

By default, all the variants from Shopify will NOT be passed to the customization because they aren't taken into account when the product is added to the cart. The easiest way to add them to the customizable product is to repeat them in the CPB interface. This way, your client will have to make the selection twice.

With custom code, you can preselect these options when the Personalize button is pressed, but it will refresh the page since you will need to add a tail to the URL. In this tail, you will need to put configID, which you can get beforehand using this article.

If you don't have a developer on your team and you need assistance with such a configuration, please contact our support team.