Express Theme: How can I disable product pop-up and use regular product pages?

Solved
Highlighted
New Member
3 0 1

I'm loving the Express theme, but I need to use it with an app that doesn't work with modals. Can anyone help guide me on how to disable the product pop-up/modal and link users to a regular product page instead? 

1 Like
Highlighted
Shopify Partner
9267 1180 3265

@keemofo 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
New Member
1 0 0

Hi @KetanKumar !

 

Same question as @keemofo . I don't have a  personal site url to share. However this is the demo page :

 

https://themes.shopify.com/themes/express/styles/bistro/preview

 

Once a product is clicked on the hompage it opens a product modal pop up. Is there a way to direct to the product page instead of the pop up.

The only way I got it to redirect to the actual product page is to right click on a product and open in new tab. See below link:

 

https://express-theme-bistro.myshopify.com/products/spinach-lasagna

 

Any help would be greatly appreciated!

0 Likes
Highlighted
Shopify Partner
9267 1180 3265

This is an accepted solution.

@javier10 

Thanks for details 

can you please check attachment 

Design Sky _ Edit _ Express _ Shopify.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
3 Likes
Highlighted
Tourist
7 0 3

HI,

 This code seems to have changed in the latest version of the "Express" theme.

Removing following code in the  product-card-list.liquid file line no 58, seems to have fixed it but caused a side effect.

 

data-product-card data-product-id="{{ product.id }}"

 

 

Side effect is that it also impacts other features such as "view more" button doesn't work anymore. once you click on it it disappears.

Current modal pop has a close icon (x) , user needs to click on the icon to close the pop-up.This works perfectly for a desktop user.

But mobile users use the phone's back button for navigation and never use browser/modal's close icon.

I want to know if we can fix the modal pop to close using mobile phone's back button (hardware button or on-screen back button) instead of taking to previously visited page.

 

<div class="product-card product-card--list{% if show_form %} product-card--quick-add{% if product.has_only_default_variant %} product-card--has-variants{% endif %}{% endif %}"{% unless onboarding %} data-product-card data-product-id="{{ product.id }}"{% endunless %}{% if show_form %} data-show-quantity-selector="true"{% endif %} tabindex="-1">
  {%- unless show_form -%}
    <a class="full-width-link" href="{{ product.url | within: collection }}" data-product-card-link>
      <span class="visually-hidden">{{ product_title }}</span>
    </a>
  {%- else -%}
    <div class="full-width-link">
      <span class="visually-hidden">{{ product_title }}</span>
    </div>
  {%- endunless -%}

product-card-list.liquid

 

 

0 Likes
Highlighted
Shopify Partner
9267 1180 3265

@farmfreshfoods 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
7 0 3

Hi,

Please find the url below

https://farmfreshmncl.com/

I hope the requirement is clear, on the home.page under feraured collections, the product popup should close when user presses the back button on his mobile phone.

Regards,

RK

1 Like
Highlighted
Shopify Partner
9267 1180 3265

@farmfreshfoods 

Thanks for post 

can you please flow above all step

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
7 0 3

@KetanKumar 

Thank you for quick response.

I read through all the posts in this thtead. I tried do the changes you suggested but the code seems to have changed. 

I could not find the code mentioned in your screenshot in current version  of the file named  product-card-list.liquid 

Regards,

RK

0 Likes
Highlighted
Shopify Partner
9267 1180 3265

@farmfreshfoods 

Can you please add me on staff account so i will check and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like