Hi,

I am not interested in the WooCommerce gallery.

On the page we want to have the default gallery Enfold set. Which does not work properly and the thumbnails lose their quality.

I even found where the problem is and enclosed in a private message. Please correct the error that occurs in the Enfold template.

Hi Victoria,

first of all thanks for your patience and expertice!
Actually yes I will need finally assistance in one more problem:
As I described actually the gallery height on my desktop is too much. Its not possible to see the whole picture and the thumbnails below in one screen (I am using Macbook with 4k resolution). Thats why you gave me the CSS. But since fixed pixel will not be responsive as far as I know I tried it with the % in CSS:

#top div .avia-gallery .avia-gallery-big-no-crop-thumb {
height: 50% !important;
}

Actually this did not take any effect. So what to do now to get the gallery height lower in a responsive way / working for all devices?

Thanks!!

I have a backup. You can try to fix the problem with thumbnails.

This solution also did not help. Despite the change in the size and regeneration of the thumbnails did not help.

These are the two pages that have the issues:
Vintage bottle caddy
http://theepicureanarchitect.com/vintage-bottle-caddy/?preview_id=1568&preview_nonce=f7511f71dd&_thumbnail_id=1578&preview=true
Teak paddle board
http://theepicureanarchitect.com/teak-paddle-board/?preview_id=1601&preview_nonce=839baa78c3&_thumbnail_id=1590&preview=true

I have managed now to get a buy button by pasting code directly into a text box not contained within a layout element. Whenever it is in a layout element it is not visible on the website, even though it can be seen in the ‘visual’ window of the editing page.

Ideally, I want the buy button to sit under the $100 text in the layout element.

This is the code for the:
Vintage bottle caddy

<div id=’product-component-55502f0be61′></div>
<script type=”text/javascript”>
/*<![CDATA[*/

(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js&#8217;;
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}

function loadScript() {
var script = document.createElement(‘script’);
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: ‘the-epicurean-architect.myshopify.com’,
storefrontAccessToken: ‘7c033492928c77dfca909d65deed0575’,
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [1428480000117],
node: document.getElementById(‘product-component-55502f0be61’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“width”: “240px”,
“contents”: {
“img”: false,
“imgWithCarousel”: false,
“title”: false,
“variantTitle”: false,
“price”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“text-align”: “left”,
“@media (min-width: 601px)”: {
“max-width”: “calc(25% – 20px)”,
“margin-left”: “20px”,
“margin-bottom”: “50px”
}
},
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“img”: false,
“imgWithCarousel”: true,
“variantTitle”: false,
“buttonWithQuantity”: true,
“button”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
},
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“toggle”: {
“styles”: {
“toggle”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
}
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

Teak paddle board

<div id=’product-component-f545d00ac92′></div>
<script type=”text/javascript”>
/*<![CDATA[*/

(function () {
var scriptURL = ‘https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js&#8217;;
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}

function loadScript() {
var script = document.createElement(‘script’);
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}

function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: ‘the-epicurean-architect.myshopify.com’,
storefrontAccessToken: ‘7c033492928c77dfca909d65deed0575’,
});

ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent(‘product’, {
id: [1428489830517],
node: document.getElementById(‘product-component-f545d00ac92’),
moneyFormat: ‘%24%7B%7Bamount%7D%7D’,
options: {
“product”: {
“variantId”: “all”,
“width”: “240px”,
“contents”: {
“img”: false,
“imgWithCarousel”: false,
“title”: false,
“variantTitle”: false,
“price”: false,
“description”: false,
“buttonWithQuantity”: false,
“quantity”: false
},
“styles”: {
“product”: {
“text-align”: “left”,
“@media (min-width: 601px)”: {
“max-width”: “calc(25% – 20px)”,
“margin-left”: “20px”,
“margin-bottom”: “50px”
}
},
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“cart”: {
“contents”: {
“button”: true
},
“styles”: {
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“footer”: {
“background-color”: “#ffffff”
}
}
},
“modalProduct”: {
“contents”: {
“img”: false,
“imgWithCarousel”: true,
“variantTitle”: false,
“buttonWithQuantity”: true,
“button”: false,
“quantity”: false
},
“styles”: {
“product”: {
“@media (min-width: 601px)”: {
“max-width”: “100%”,
“margin-left”: “0px”,
“margin-bottom”: “0px”
}
},
“button”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
}
}
},
“toggle”: {
“styles”: {
“toggle”: {
“background-color”: “#9b9696”,
“:hover”: {
“background-color”: “#8c8787”
},
“:focus”: {
“background-color”: “#8c8787”
}
},
“count”: {
“color”: “#ffffff”,
“:hover”: {
“color”: “#ffffff”
}
},
“iconPath”: {
“fill”: “#ffffff”
}
}
},
“productSet”: {
“styles”: {
“products”: {
“@media (min-width: 601px)”: {
“margin-left”: “-20px”
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

Thank you so much for your help. I have always used the Shopify app in wordpress and have never had any problems so don’t understand whey this is so tricky now.

Thank you
Victoria