Creating a shopify template with unique content blocks - shopify

I have an ecommerce site, and I'm trying to create a "Lookbook" template. I want my client to be able to create a new lookbook (just as a simple page with a template of "page.lookbook" or similar), then be able to go into the page admin and select and upload images, links, descriptions etc.
So far I have:
page.lookbook.liquid -> calls in the section, lookbook-template.liquid
lookbook-template.liquid has an HTML template
It also has this schema:
{% schema %}
{
"name": "Lookbook",
"blocks": [
{
"type": "Image",
"name": "Lookbook image",
"settings":[
{
"type": "image_picker",
"id": "img",
"label": "Image"
},
{
"type": "text",
"id": "description",
"label": "Description",
"default": "<p>You can write <em>html</em> in here!</p>"
}
]
}
]
}
{% endschema %}
This way, my client can use the simple admin tools to add a new image block. Very nice!
However, this method means that every single lookbook gets the SAME image data as whatever I apply to the lookbook-template.liquid, and this isn't ideal at all.
What am I doing wrong here, and what's the right solution? I want one template that the client choose to attach to a page, and then for each template to have a unique set of images, links and descriptions that the client creates.

Unfortunately, section won't work to get some different content for each page with lookbook.page template.
A solution would be to install (or create) an app to manage metafields attached to pages. Then you can use metafields in your template.
Metafields is a way to add some extra fields in database:
https://help.shopify.com/themes/liquid/objects/metafield

Related

Shopify - Modify Page Template & Sections Reference For Custom Page

I am attempting to modify a specific route/template in my Shopify theme, however nothing from examples I have seen or the documentation seems to take.
Currently I have created a page in the Shopify Admin team which is auto assigned to the route /pages/team-page.
In my templates directory I have tried creating different variations as to assign it a custom section such as
team.json
team_page.json
page.team.json
page.team_page.json
And within those json files referenced to my sections directory liquid file custom.liquid with the following:
{
"sections": {
"custom": {
"type": "custom",
"settings": {}
},
"order": [ "custom" ]
}
But to no avail it always references back to the template index.json which renders main.liquid from sections.
Attempting to print out the page.handle returns team-page, while page.template_suffx seems to return nothing.

What is the correct syntax for accessing translations in app blocks / theme app extensions in Shopify?

This link here mentions how to access translations for your app blocks but the example doesn't seem to work and seems to be for regular sections instead of app blocks:
https://shopify.dev/themes/architecture/sections/section-schema#locales
My locales section looks like the following:
"locales": {
"en": {
"title": "Slideshow"
},
"fr": {
"title": "Diaporama"
}
}
I've tried a bunch of different permutations using the name of my section and the name of the file but nothing works. According to the documentation the below should work:
sections.[section-name].[translation-description]
I've also tried the two below which both don't work:
blocks.[section-name].[translation-description]
block.[section-name].[translation-description]
Something tells me I'm doing something wrong or Shopify's documentation is lacking.
Any help on this would be much appreciated!
You can check Shopify's example theme extension app https://github.com/Shopify/product-reviews-sample-app/tree/main/theme-app-extension/locales
basically, you need this format
{ "blocks": { "average-rating": { "name": "Average Review Score",
"settings": { "stars_fill_color": {
"label": "Stars color" }
} } }}
for accesing a label you should do "t:blocks.average-rating.settings.stars_fill_color.label"

Add Product Images with Shopify API

We have a bunch of disassociated product images in our Shopify store that support could not re-associate. I set up a Postman collection runner to update all these missing images, and it seems to be working in our test environment....
Except, the API call is replacing the default product image with a new image rather than adding the image. I'm using a standard PUT request to the API using the example in their API docs:
PUT /admin/api/2019-04/products/#{product_id}.json
{
"product": {
"id": 632910392,
"images": [
{
"src": "http://example.com/rails_logo.gif"
}
]
}
}
I get that it's an array I'm sending in, so I'm thinking it's overwriting the array each time rather than adding a new element. I tried using a single element variable of "image" in the JSON but that didn't work.
Any ideas?
If you want to add the image use ProductImage resource instead of Product resource.
Product Image Documentation
POST /admin/api/2019-04/products/#{product_id}/images.json
{
"image": {
"src": "http://example.com/rails_logo.gif"
}
}

Building reusable individually customizable sections in Shopify

What's the best way to build a reusable DRY section in liquid assuming the store owner wants to choose new options each time the section is reused?
Here are the two methods I can find:
Create a snippet which I can include from any template file, but
this won't allow the store owner to customize the settings. Keeps things very DRY but with no customization which defeats the purpose.
Create a section with settings, which includes a reusable snippet. But I need to duplicate this section every time I want to use it on a different page. Requires me to create duplicates of all my sections every time I create a new page.
Option 1:
reusable_snippet.liquid:
<div>
<h1>I'm a reusable non customizable quote</h1>
</div>
random_page_1.liquid:
{% include 'reusable_snippet' %}
random_page_2.liquid:
{% include 'reusable_snippet' %}
Option 2:
reusable_customizable_snippet.liquid:
<div>
<h1>{{ section.settings.full_msg_title }}</h1>
</div>
non_reusable_section_1.liquid:
{% include 'reusable_customizable_snippet' %}
{% schema %}
{
"name": "Reusable Snippet",
"settings": [{
"type": "text",
"id": "full_msg_title",
"label": "Full Width Message Title"
}]
}
{% endschema %}
non_reusable_section_2.liquid:
{% include 'reusable_customizable_snippet' %}
{% schema %}
{
"name": "Reusable Snippet",
"settings": [{
"type": "text",
"id": "full_msg_title",
"label": "Full Width Message Title"
}]
}
{% endschema %}
Is there some other, better method to create a reusable, individually customizable section?
It depends of what your section requirements.
If you don't have too many options in that section and your are not using the blocks from it, you can create dynamic blocks, where you will choose each page that the block will be visible on.
If you have too many options or you are using already the blocks, there a still a few ways depending on the information you need to add.
1) Using navigations & pages/articles etc..
Each link can point to a separate page from which you can use the content text or the content and excerpt if it's a blog post.
2) Metafields
Use metafeilds, there is a free APP that support metafields only on the product pages or you can use an extension for the ShopifyFD and use those instead for each page you like to have custom information.
To sum up it all depends on the amount of custom information you plan to edit.

Shopify: How to make new products hidden by default?

I have a shopify site that is hooked up with Lightspeed via MerchantOS. I need new products added via MerchantOS to be hidden upon sync/creation. All help is appreciated.
The Shopify product creation via API allows you to define the product visiblity (published / hidden). You should dig into MerchantOS to make sure when doing a POST to create a product at your Shopify store, it has the following property:
"published": false
Create a new, but unpublished product:
POST /admin/products.json
{
"product": {
"title": "Burton Custom Freestlye 151",
"body_html": "<strong>Good snowboard!<\/strong>",
"vendor": "Burton",
"product_type": "Snowboard",
"published": false
}
}