Removing size guide from gift card product page

shells
Explorer
193 3 97

Hi all, 

I've been struggling to remove the size guide, the description and the zoom function for the gift card product page.

Is there anyone that can help me with this please?

This is my URL: https://feyre-baby.myshopify.com/admin/themes/120453923004/editor?previewPath=%2Fcollections%2Fgifts...

Thank you!

 

Remove.png

0 Likes
Pallavi
Shopify Expert
2220 363 474

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

a.open-sizeguide {
display: none!important;
}
div#jsSizeGuide {
display: none!important;
}
.row.justify-content-md-center {
display: none!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shells
Explorer
193 3 97

Thank you @Pallavi  but would this apply to all the product pages?

I only want it to be applied to these two pages specifically

https://www.feyrebaby.com.au/collections/gifts/products/gift-box-small

https://www.feyrebaby.com.au/collections/gifts/products/feyre-baby-gift-card 

Pallavi
Shopify Expert
2220 363 474

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout/theme.liquid and paste this at the bottom of the file:

{% if product.handle == 'gift-box-small' or product.handle == 'feyre-baby-gift-card' %}
<style>
a.open-sizeguide {
display: none!important;
}
div#jsSizeGuide {
display: none!important;
}
.row.justify-content-md-center {
display: none!important;
}
</style>
{%- endif -%}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shells
Explorer
193 3 97

Thank you!! It partially works. The zoom function is still there.  

Can I also remove the social sharing on the page as well? What code would I have to add?

 

Thank you @Pallavi 

 

Pallavi
Shopify Expert
2220 363 474

Hello @shells 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout/theme.liquid and paste this at the bottom of the file:

Remove my old css and add this one.

{% if product.handle == 'gift-box-small' or product.handle == 'feyre-baby-gift-card' %}
<style>
a.open-sizeguide {
display: none!important;
}
div#jsSizeGuide {
display: none!important;
}
.row.justify-content-md-center {
display: none!important;
}
.social-sharing.row {
display: none!important;
}

img.zoomImg {
position: unset!important;
}
</style>
{%- endif -%}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shells
Explorer
193 3 97

Hi @Pallavi 

Thank you again.

Almost there, just one issue. If you hover on the image, it does something funny to the image. It creates a duplicate on the bottom. 

https://feyre-baby.myshopify.com/admin/themes/120453923004/editor?previewPath=%2Fcollections%2Fgifts...

CAn you see? Otherwise, I can print screen for you.

 

Thankyou!

Pallavi
Shopify Expert
2220 363 474

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout/theme.liquid and paste this at the bottom of the file:

{% if product.handle == 'gift-box-small' or product.handle == 'feyre-baby-gift-card' %}
<style>
a.open-sizeguide {
display: none!important;
}
div#jsSizeGuide {
display: none!important;
}
.row.justify-content-md-center {
display: none!important;
}
.social-sharing.row {
display: none!important;
}
</style>
{%- endif -%}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shells
Explorer
193 3 97

@Pallavi Still doesnt work. 

I think the zoom needs to be disabled. What would the code be for that?

Thank you!

0 Likes
shells
Explorer
193 3 97

{% if product.handle == 'gift-box-small' or product.handle == 'feyre-baby-gift-card' %}
<style>
a.open-sizeguide {
display: none!important;
}
div#jsSizeGuide {
display: none!important;
}
.row.justify-content-md-center {
display: none!important;
}
.social-sharing.row {
display: none!important;
}

img.zoomImg {
visibility:hidden!important;
}
</style>
{%- endif -%}

 

I managed to fix it by adding this code:

img.zoomImg {
visibility:hidden!important;
}

 

But if you go to the single product page the image is not sitting in the middle. How can I adjust so that it sits in the middle please? Can you help?

0 Likes