I have a page with a section called ‘Lookbook Gallery,’ where I can define multiple Lookbook Photos, each with an image, a title, and associated products (as shown in the screenshot). Each photo is clickable. How can I create a page template that dynamically displays the associated products for a selected Lookbook Photo when the image is clicked?
@rickbenjamin oh sorry for that issue do you want each product different lookbook right?
@KetanKumar Each Lookbook Photo can have different products associated with it. I want to create a page that dynamically displays the products linked to a specific Lookbook Photo when the image is clicked on the gallery page.
@rickbenjamin yes if are able to code customization create duplicate lookbook section add meta field code customization
Could you give a little more context? The Lookbook gallery, including the lookbook photo blocks are custom created. How can this meta field help me to dynamically render a page with the products from a lookbook photo block.
Hello @rickbenjamin ,
Not sure what others are saying.
But yes it’s possible. You have to fetch the product handle from the dynamic selected product and then call it.
e.g.
{% assign first_product = 'your-product-handle %}
{{ all_products[first_product].title }}
Regards
Guleria
Hello @Guleria ,
Thank you for the suggestion. How would this work for multiple products?
@rickbenjamin maybe like this your option
{% assign lookbook_blocks = page.metafields.lookbook.blocks %}
{% for block in lookbook_blocks %}
{% assign products = block.products %}
{% for product_id in products %}
{% assign product = all_products[product_id] %}
{{ product.title }}
{% endfor %}
{% endfor %}
Use it inside the loop
replace ‘your-product-handle’ with the one which you will get in the loop
btw if the selected product returns the product object then there will be other options too to do it.
@Guleria I don’t quite understand how I can fetch the product_list of a single Lookbook photo block into new page.
Yes little hard if you are not good with code
btw please share your existing code or the one you are trying to use?
@KetanKumar Your example loops through all lookbook blocks on a page. I am looking for an implementation where the page only displays the selected lookbook from the gallery page.
No same thing he shared just way is different as I mentioned earlier.
And yes @KetanKumar shared solution with metafields and I think in your case settings/data will fetch from section/block.
check this part
{% assign products = block.products %}
{% for product_id in products %}
{% assign product = all_products[product_id] %}
{{ product.title }}
{% endfor %}
@Guleria I am quite some web development experience, but I am fairly new to coding in Shopify. This is what i have at the moment.
{%- for block in section.blocks -%}
{%- if block.settings.image != blank -%}
href="#"
class="gallery-item mb-3 image-content__image-wrapper"
style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
>
{% assign img_url = block.settings.image | image_url: %}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endfor -%}
{% assign lookBook = ... %}
{{ product.title }}
{% endfor %}
{%- for block in section.blocks -%}
{%- if block.settings.image != blank -%}
href="#"
class="gallery-item mb-3 image-content__image-wrapper"
style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"
>
{% assign img_url = block.settings.image | image_url: %}
// Get the product handle from object and use in next line
{% assign first_product = 'your-product-handle %}
{{ all_products[first_product].title }}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endfor -%}
Wouldn’t this example displays the product_list on the same page?
It can that depends on the requirement btw above example will show selected product parallel to the lookbook block.
@Guleria The requirement is to display the selected lookbook on a dedicated page. And that’s thing I can’t figure out.
Not sure you are looking for an idea or a complete code for your requirement
Because last message/code also means same
" btw above example will show selected product parallel to the lookbook block. "
I’m looking for an idea how to display the products on a separate page.