0
217
ViewsHow to access shopify stylesheet?
I'm building a shopify app with Node, React and Nextjs. One of the features allows the user to preview their widget changes in a preview window of the Thank You Page. I'm using shopify's theme classes so that the colors will be dynamic to each store's theme settings.
For example, a button in my project is drawing from the Shopify stylesheet: <button className={"btn"}/>
However, I'm having trouble maintaining an up to date stylesheet. Whenever the user makes a change in their shopify store, the sheet updates.
Example: The below sheet rendered a red button. Then the user changed the color of the button to green. The sheet changed accordingly.
<link href="//cdn.shopify.com/app/services/61201907963/assets/129024491771/checkout_stylesheet/v2-ltr-edge-efa0a63b8eb42aba8cfba1e6c680e7fc-36" rel="stylesheet"/>
Became (37 changed at the end):
<link href="//cdn.shopify.com/app/services/61201907963/assets/129024491771/checkout_stylesheet/v2-ltr-edge-efa0a63b8eb42aba8cfba1e6c680e7fc-37" rel="stylesheet"/>
I looked through Shopify's graphql to see if I could access the stylesheet, but with no luck. Really scratching my head on this.
How do I get access to the current stylesheet or alternatively, is there a better way to show theme settings (colors) in a shopify app preview?
1 answers
Answer question0
Some of this you probably know...for clarity:
In Shopify developers, go to your store.
Click on 'Online Store' in the left menu, under 'SALES CHANNELS'. A menu extends below, on the main screen you will see Themes, and near where it states 'Dawn', you'll see 'Customize'. Click on that button.
Once you are in the theme, at the top you will see the name of the theme, 'Live' and ... -- click on the dots, then click on 'Edit code.'
The menus in the edit code screen will open expanded, but you will find the following categories: layout, templates, sections, snippets, assets, config, and locales.
You will find the JSON files in config
- settings_data.json has the actuals
- settings_schema.json has the structure for settings_data.json
In the assets folder, you will find the CSS files
From here you'll see the variable linking to the JSON files
