Description
- replace product gallery with a template preview feature
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. First, you can add some Image Blocks to Product Additional Info with external site url, like this
or this
#1.2. Add text: web-preview to ALT
#1.3. Click Gear icon on Store Page
Next, click Advanced > Page Header Code Injection
Paste this code into right box
<!-- 06.26c01v4 Shop Template Preview -->
<script>
window.SHOPTEMPLATE_PREVIEW_CONFIG = {
altMatch: 'web-preview',
previewHeight: '600px',
devices: [
{ name: 'Desktop', width: '100%', enabled: false },
{ name: 'Tablet', width: '768px', enabled: false },
{ name: 'Mobile', width: '375px', enabled: false }
],
barBackground: '#f5f5f5',
borderColor: '#dddddd',
borderRadius: '8px',
gap: '10px',
padding: '10px',
buttonBackground: '#ffffff',
buttonTextColor: '#2c3e50',
buttonActiveBackground: '#2c3e50',
buttonActiveTextColor: '#ffffff',
buttonBorderRadius: '5px',
buttonTextSize: '14px'
};
</script>
<script src="https://code.beaverhero.com/productdetail/0626c01v4shoptemplatepreview.js"></script>
#2. Customize
#2.1. Fix Bug:
If you see error “…refuse to connect”, make sure you disabled this option in external site.
#2.2. To change Height of Web Preview section, you can change Line 05
previewHeight: '600px',
#2.3. If you want to apply code to specific product, you can edit Additional Info > Add a Code Block
Then paste #1.3 code
