Integrating with Shopify

Visual Editor Help
1

I’m wondering if it’s possible to integrate with Shopify without a developer.
When I follow integrations>Shopify>More Info it takes me to GitHub and the instructions seem more technical than I might have expected.

2

Hi @sjoys you definitely can setup an integration without developer help (though further customization is harder without one.) We have an entire Shopify hub here: Shopify FAQ - Builder.io

With tons of relevant information, the most relevant of which is probably out Getting Started Guide

Essentially, just go to Builder.io: Drag and drop page builder and CMS within your builder space, input a few API keys provided by Shopify, and you should be ready to get started. Take a look and try it out and let us know if you have any further questions!

1 Like
3

Thank you for the links! That info looks much more my speed than the GitHub documentation.

1 Like
4

@TimG I’m working on getting Shopify hooked up and am running into difficulty. I’m following the Getting Started Guide, but at min ~3:40 it tells you to create a new product page, then to either select a new product template or import with drop zones. These options don’t seem to be available in builder anymore.
I am able to add new sections for use in the product page, but I can’t figure out how to edit the product page, and more specifically the product box, itself. Please help. Thanks!

5

I thought it might help if I add more detail to my use case/question.
Here’s what I’m trying to do:

  1. Access the product page to make changes to the product box layout (that’s what I was having trouble with in my previous post and haven’t been able to resolve. I did see a tutorial on how to create a new product box to place on my site, but it seems that it’s only for a specific product not a product page template)
  2. Add sections that will follow the product box and show up across all product pages (this I was able to do by adding a section, which then showed up in the Shopify editor, which allowed me to add it directly to the product page template in Shopify)
  3. Dynamically populate the sections created in #2 with the correct content for whichever product a user is viewing (I saw reference to enabling this, but I can’t find specific instructions on how to do so)

Please let me know how to do #1 and #3.

Thanks!

6

Hi @sjoys!

Are you working on a 2.0 theme? If so, this is why you’re not seeing the option to edit an entire product page. We have a guide around using Builder with 2.0 themes here that you can check out.

  1. What changes are you wanting to make to your existing product box layout? One option would be to install a custom section within your existing product page to add content inside of the product box.

  2. If you would like to have a section on a product page that displays different content depending on the product, you can use a dynamic symbol with product targeting.

7

Hi @maddy,
Yes, it turns out I was using a 2.0 theme.
I did swap it out for a 1.0, which resolved issue #1.
Issue #3 is still unresolved.

Here’s the use-case:

  1. We will have a large product catalog (>100), so conditionally hiding full sections of the page will likely get very unwieldy.

  2. We’d like to make 5 additional content-heavy product detail sections (ie: ingredients, where they’re sourced, how they’re made, etc)

  3. Each product will have different content for these sections that would ideally dynamically populate, like the product metadata coming from Shopify: price, product name, description, etc.

Is there any way to do something like this in Builder?

8

If the product details you mentioned in #2 are available within the state pulled in for the product like the price, name, and description are, this is definitely possible. You could use a binding in the data tab to display this text.

If these details aren’t available in the state, then the other option would be to use dynamic symbols as I mentioned above. You could manually add in the ingredients, where they’re sourced, and how they’re made or you could pull this data in from an API if its available. The initial setup will take some time due to the number of products, but, we have seen other users add product descriptions/other product details this way and it works great!

If the dynamic symbols option doesn’t work for you, another option would be to create a section model and for each entry target to a specific product (similar to how the dynamic symbol flow would work), but instead of adding a dynamic symbol to your product page, you can insert the section as a liquid snippet (e.g. {% include 'something.model.builder' %} within a custom code block on your Builder product page wherever you’d like it to display.

9

Hi @sjoys! I just figured out a way to do this. I know it’s been 8 months since this topic was opened, but just thought I’d share in case you still hoped for a solution.

The super high-level explanation is to create a custom liquid element on your Shopify template page. Make it {{ product.id }} wrapped in some identifiable element (div with a special class name, for example). Ensure the element has display: none style.

Make sure that Shopify template page has your custom builder section added. Then in builder, dynamically set a product box’s selected product to the textContent attribute of your new custom liquid element from above.

I can go into more detail if need be. Hope this helps!

10

Yes, it is possible to integrate with Shopify without the need for a developer. Shopify offers a wide range of built-in integrations and apps within its App Store, allowing you to extend the functionality of your store without any coding knowledge.

Shopify’s intuitive interface allows you to customize your store’s appearance, add products, manage orders, and handle other essential tasks easily. While advanced customizations or complex integrations you may still require Shopify third-party integration services providers.